Post dynamic form data from partial view in ASP.NET MVC

Question

I am trying to add new functionality to an old ASP.NET MVC project. I want to add new address form every time I click a button, furthermore customer's address is list and it will be added dynamically, the problem is that model does not bind address list data when it is posted in action.

Here is my model of Customer:

public class CustomerInfo
{
    public CustomerModel CUSTOMER { get; set; }
    public CustomerAddress CustomerAddresses { get; set; }
}

Address model:

 public class CustomerAddresses
 {
    public string Address { get; set; }
 }

This is the jQuery code which appends address list :

$(document).on('click', "#addAddressItem", function (e) {
    e.preventDefault();
    $.ajax({
         url: this.href,
         cache: false,
         success: function (html) {
             $("#RegisterAddressId").append(html);
         }
    });  
});

Action link which loads partial view :

   <div>
        <div class="address">
        </div>
        <p>
            @Html.ActionLink("add address", MVC.Applications.RegisterAddress(), new 
            { id = "addAddressItem" })
        </p>
        <div id="RegisterAddressId">
        </div>
   </div>

Partial view action :

public virtual PartialViewResult RegisterAddress()
{
    return PartialView(MVC.Applications.Views.CustomerAddress);
}

Partial view :

@model WeaponPermissions.Models.RegisterCustomerAddress
<table>
   <td class="personlistborder">
       <div class="editor-label">
          Address
       </div>
     
          <div class="editor-field">
              @Html.EditorFor(model => model.Address, new { @class = "CustomerAddressField" })
              @Html.ValidationMessageFor(model => model.Address) 
          </div>        
  </td>
 <td colspan="7"></td>
 <td>
    <span id="deleteRegisterCustomerAddress" class="outline ui-button ui-widget ui-state- 
  default ui-corner-all" role="button" aria-disabled="false">
        <span class="ui-icon-minusthick ui-icon "></span>
    </span>
  </td>
</table>

I should also delete appended address field if necessary, that's why there is a span with Id deleteRegisterCustomerAddress

jQuery to post data to action on click :

buttons: ({
        "Save": {
            text: "save",
            id: "btnSubmitExamApp",
            click: function () {
                var form = $('form', this);
                var validator = $(form).validate();
                if (validator.form()) {
                    debugger
                    var res = JSON.parse(form);
                     res.submit();
                }
                $(this).submit();
            }
         },

What am I doing wrong? I have been researching this topic for a long time, but could not find a solution

Answer 1

you can find it in Request.Form["Address"] and make sure "RegisterAddressId" is inside the posted form.

and since you are familiar with jquery use clone() instead of calling 'RegisterAddress' to add new item it will be better