title: Add item into List from View Loaded Dynamically and pass it to Controller in asp.net core
body: <p>I am working on Mobile Store Management System's Order page. I want to allow users to select a company through a select list, and then select multiple models of that company from another select list which is loaded dynamically through AJAX. </p>
  
  <p>The code for the cascading models is working, but I am unable to send the selected models to the server because it is adding them in the DOM through JavaScript.</p>
  
  <p>The following is the code for the cascading selection: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="form-group row"&gt;
      &lt;label  class="control-label col-6"&gt;Company Name&lt;/label&gt;
      &lt;div class="col-12"&gt;
          &lt;select id="CompanyId"  class="custom-select mr-sm-2"
                  asp-items="@(new SelectList( 
                  @ViewBag.Companies,"Phoneid","Com_name"))"&gt;
              &lt;option value=""&gt;Please Select&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;span class="text-danger"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="form-group row"&gt;
      &lt;label  class="control-label col-6"&gt;&lt;/label&gt;
      &lt;div class="col-12"&gt;
          &lt;select id="modelId" multiple class="custom-select mr-sm-2"
                  asp-items="@(new SelectList(string.Empty,"modelId","model_name","--Select--"))"&gt;
              &lt;option value=""&gt;Please Select&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;span class="text-danger"&gt;&lt;/span&gt;
  &lt;/div&gt; 
  &lt;div&gt;
       &lt;input type="button" id="saveBtn" value="Save" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Cascading Code:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$("#CompanyId").change(async function() 
  {
    await $.getJSON("/Order/GetAllModels",{ PhoneId: $("#CompanyId").val()}, 
    function(data) 
    {
      $("#modelId").empty();
      $.each(data, function (index, row) {
          $("#modelId").append("&lt;option value='" + row.modelId + "'&gt;" + 
            row.model_name + '&lt;/option&gt;')
      });
    });
  }
  </code></pre>
  
  <p>Once the <kbd>Save</kbd> button is clicked, I am displaying the product for the currently selected models using a partial view:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#saveBtn').click(function () {   
    $.ajax({
      url: '/Order/GetProduct?Phoneid=' + $("#CompanyId").val() + "&amp;modelId=" + $('#modelId').val(),
      type: 'Post',
      success: function (data) {
        $('#products').append(data);
      },
    })
  })
  </code></pre>
  
  <h3>Problem 1</h3>
  
  <p>When the user selects the first company and their two models, and then clicks the <kbd>Save</kbd> button, the partial view loads with indexes <code>i=0,i=1</code>. Then, the user selects another company and selects their models. Again, the partial view renders with same indexes. How can I make the indexes unique? This partial view is rendered when the user clicks the <kbd>Save</kbd> button, which renders only the current company's selected models.</p>
  
  <pre class="lang-html prettyprint-override"><code>@model List&lt;Mobile_Store_MS.ViewModel.Orders.Products&gt;
  &lt;table class="table"&gt;
      &lt;tbody&gt;
          @for (int i = 0; i &lt; Model.Count; i++)
          {
              &lt;tr class="card d-flex"&gt;
                  &lt;td&gt;
                      &lt;input asp-for="@Model[i].isSelected" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input hidden asp-for="@Model[i].Phoneid" /&gt;  &lt;input hidden asp-for="@Model[i].modelId" /&gt;
                      @Html.DisplayFor(modelItem =&gt; Model[i].com_Name)   @Html.DisplayFor(modelItem =&gt; Model[i].model_name)
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input asp-for="@Model[i].Quantity" /&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input class="disabled" readonly asp-for="@Model[i].price" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h3>Problem 2</h3>
  
  <p>How can I send all of the items rendered through the partial view to the server? I just want to send these selected products along with the quantity and price for each model to the server. This means binding these items in the product list of the <code>OrderViewModel</code>.</p>
  
  <p>You can find my <code>OrderViewModel</code> and <code>Products</code> model in the following diagram:</p>
  
  <p><a href="https://i.stack.imgur.com/SAsMW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SAsMW.jpg" alt="enter image description here"></a></p>
  
  <p>Can you tell me how to bind Razor items into a list to post to the controller? I would be very grateful if you give me some suggestions. </p>
  
  <h3>Related</h3>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/61962733/add-item-to-c-sharp-list-on-selectchange-loaded-through-cascading">Link of my Previous Question</a></li>
  <li><a href="https://github.com/sami-lab/sample" rel="nofollow noreferrer">Sample of my order page</a></li>
  </ul>