title: How to submit dynamic number of string inputs in ASP.NET Core MVC
body: <p>I've got a page in my application that will allow users to run stored procedures against the database so that they can manage their data or make changes without using SSMS.  Using the <code>SqlCommandBuilder.DeriveParameters</code> method, I was able to successfully fetch and display all stored procedures in a select tag as well as display their input &amp; output parameters.</p>
  <p>Here is the contract class:</p>
  <pre><code>public class DatabaseUpdateModel
  {
      public int ClientId { get; set; }
      public string StoredProcedureName { get; set; }
      public List&lt;SelectListItem&gt; StoredProcedureNames { get; set; }
      public Dictionary&lt;string, SqlParamCollection&gt; StoredProcedures { get; set; }
      public Dictionary&lt;int, string&gt; ParameterInputs { get; set; }
  
  
      public DatabaseUpdateModel()
      {
          StoredProcedureNames = new List&lt;SelectListItem&gt;();
          StoredProcedures = new Dictionary&lt;string, SqlParamCollection&gt;();
          ParameterInputs = new Dictionary&lt;int, string&gt;();
      }
  }
  </code></pre>
  <p>I do this in two steps - step 1 happens on the controller's index loading to fetch the stored procedure names:</p>
  <p>Service methods:</p>
  <pre><code>    private DatabaseUpdateModel GetDatabaseUpdateStoredProcedureNames(string connectionString)
      {
          _logger.LogTrace(&quot;Begin GetDatabaseUpdateModel service method&quot;);
          SqlConnection connection = new SqlConnection(connectionString);
          DBConnectionSetter.SetDBConnection(_SqlHelper, connectionString);
  
          DatabaseUpdateModel model = new DatabaseUpdateModel();
          IDataReader reader = _SqlHelper.GetDataReader(&quot;SELECT name FROM sys.objects WHERE type = 'p' ORDER BY name ASC&quot;, CommandType.Text, _appSettings.CommandTimeoutInSeconds, out connection, null);
  
          while (reader.Read())
          {
              SelectListItem storedProcedure = new SelectListItem
              {
                  Value = ((string)reader[&quot;name&quot;]).Trim(' '),
                  Text = (string)reader[&quot;name&quot;]
              };
  
              model.StoredProcedureNames.Add(storedProcedure);
          }
          reader.Close();
  
          return model;
      }
  </code></pre>
  <p>Step 2 happens via Ajax when a stored procedure is selected</p>
  <pre><code> public DatabaseUpdateModel GetDatabaseUpdateProcedureParameters(string connectionString, string storedProcedureName)
      {
          _logger.LogTrace(&quot;Begin GetDatabaseUpdateProcedureParameters service method&quot;);
          SqlConnection connection = new SqlConnection(connectionString);
          DBConnectionSetter.SetDBConnection(_SqlHelper, connectionString);
          DatabaseUpdateModel model = GetDatabaseUpdateStoredProcedureNames(connectionString);
          connection.Open();
  
          Contract.Shared.SqlParamCollection collection = new Contract.Shared.SqlParamCollection();
          SqlCommand command = new SqlCommand();
          command.Connection = connection;
          command.CommandText = storedProcedureName;
          command.CommandType = CommandType.StoredProcedure;
          SqlCommandBuilder.DeriveParameters(command);
          foreach (SqlParameter param in command.Parameters)
          {
              if (param.Direction == ParameterDirection.Input)
              {
                  collection.InputParameters.Add($&quot;{param.ParameterName} - {param.SqlDbType}&quot;);
                  collection.SqlParameters.Add(param);
              }
              else
              {
                  collection.OutputParameters.Add($&quot;{param.ParameterName} - {param.SqlDbType}&quot;);
              }
          }
  
          model.StoredProcedures.Add(storedProcedureName, collection);
          connection.Close();
          return model;
      }
  </code></pre>
  <p>What this leaves me with is this:
  <a href="https://i.stack.imgur.com/LnEe1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LnEe1.png" alt="Showing our table" /></a></p>
  <p>Now I've been following various articles and resources to get to this point but now I'm having issues correctly binding these inputs to a model to be submitted either by an action or via ajax.  Here's my current code in the view (the commented out line is one of my latest attempts to get this working).</p>
  <pre><code>@model DatabaseUpdateModel
  
  &lt;form&gt;
      &lt;table id=&quot;summaryTable&quot; class=&quot;table&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;td&gt;Input Parameters&lt;/td&gt;
                  &lt;td&gt;Output Parameters&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;ul&gt;
                          @if (!string.IsNullOrEmpty(Model.StoredProcedureName))
                          {
                              for (int i = 0; i &lt; Model.StoredProcedures[Model.StoredProcedureName].InputParameters.Count(); i++)
                              {
                          &lt;li&gt;
                              @Model.StoredProcedures[Model.StoredProcedureName].InputParameters[i].ToString()&lt;br /&gt;
                              @*&lt;input id=&quot;databaseUpdateParam[@i]&quot; name=&quot;parameter[@i]&quot; asp-for=&quot;@Model.ParameterInputs[@i]&quot; type=&quot;text&quot; /&gt;*@
                              &lt;input id=&quot;databaseUpdateParam[@i]&quot;type=&quot;text&quot; /&gt;
                          &lt;/li&gt;
                              }
                          }
                      &lt;/ul&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;ul&gt;
                          @if (!string.IsNullOrEmpty(Model.StoredProcedureName))
                          {
                              foreach (var param in Model.StoredProcedures[Model.StoredProcedureName].OutputParameters)
                              {
                                  &lt;li&gt;
                                      @param
                                  &lt;/li&gt;
                              }
                          }
                      &lt;/ul&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  @if (Model.StoredProcedures[Model.StoredProcedureName].InputParameters.Count() &gt; 0)
  {
      &lt;button type=&quot;submit&quot; asp-action=&quot;Foo&quot;&gt;Submit&lt;/button&gt;
  }
  </code></pre>
  <p>Ajax function that runs when a value is selected:</p>
  <pre><code>function selectDatabaseUpdateStoredProcedure(clientId, storedProcedureName) {
      var selected = $(&quot;#clientStoredProcedurePicker option:selected&quot;).val();
      console.log(selected); // Selected Stored Procedure Name
      $.ajax({
          url: &quot;/Process/GetDatabaseUpdateProcedureParameters?ClientId=&quot; + clientId + &quot;&amp;StoredProcedureName=&quot; + storedProcedureName,
          success: function (data) {
              console.log(data);
              $(&quot;#summaryTableDiv&quot;).html(data);
          }
      });
  }
  </code></pre>
  <p>My assumption, and everything that I read up to this point has said that I should be able to simply be able to use the name attribute to denote the dictionary's key and the value in the tag would correspond to the value entered upon form submission.  However all of my attempts to achieve this are met with errors (for example that the index is not present in the dictionary).</p>
  <p>How can this be done either through a controller action or ajax?</p>