Add items to a list dynamically before submitting the form in asp .NET MVC

Question

I have a form that the user should fill. I want the user to add a list of owners before submitting the form. For example, the user enters the first owner details and the click on add another owner button, then the user will be prompt to enter the other owner details and so on. When the user adds all of the owners, he can submit the form. Any ideas how I can do it please.

My View:

@using (Html.BeginForm(Html.BeginForm("SubminWebSiteLicense", "Licenses", FormMethod.Post, new { enctype = "multipart/form-data" })))
{
    <div class="row">
        <div class="col-md-6">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.WebsiteLink, "WebsiteLink ", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.WebsiteLink, new { @class = "form-control " })
                @Html.ValidationMessageFor(model => model.WebsiteLink, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-6">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.ApplicationLink, "ApplicationLink", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.ApplicationLink, new { @class = "form-control " })
                @Html.ValidationMessageFor(model => model.ApplicationLink, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <br />
    <h3>OwnersInfo</h3>

    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.First_Name, "First_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.First_Name, new { @class = "form-control ", @id = "First_Name" })
                @Html.ValidationMessageFor(model => model.First_Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Second_Name, "Second_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Second_Name, new { @class = "form-control ", @id = "Second_Name" })
                @Html.ValidationMessageFor(model => model.Second_Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Third_Name, "Third_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Third_Name, new { @class = "form-control ", @id = "Third_Name" })
                @Html.ValidationMessageFor(model => model.Third_Name, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.Last_Name, "Last_Name", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.Last_Name, new { @class = "form-control ", @id = "Last_Name" })
                @Html.ValidationMessageFor(model => model.Last_Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwnerNid, "OwnerNid", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwnerNid, new { @class = "form-control ", @id = "OwnerNid" })
                @Html.ValidationMessageFor(model => model.OwnerNid, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwnerMobile, "OwnerMobile", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwnerMobile, new { @class = "form-control ", @id = "OwnerMobile" })
                @Html.ValidationMessageFor(model => model.OwnerMobile, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="main-form-group main-form-input">
                @Html.LabelFor(model => model.OwneEmail, "OwneEmail", new { @class = "control-label main-lable" })
                @Html.TextBoxFor(model => model.OwneEmail, new { @class = "form-control ", @id = "OwneEmail" })
                @Html.ValidationMessageFor(model => model.OwneEmail, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-md-4">
            <br />  <br />
            <input type="button" value=" add another owner " class="main-submit" id="AddOwner" name="AddOwner" />
        </div>
    </div>

    <div class="main-form-submit">
        <input type="submit" value="submit" class="main-submit" id="submit" name="submit" />
    </div>
}

My Main Model:

public class WebsiteLicenseViewModel
{
    public string WebsiteName { get; set; }

    public string WebsiteLink { get; set; }

    public string ApplicationLink { get; set; }

    public string CrNumber { get; set; }

    public string OwnerNid { get; set; }

    public string OwnerMobile { get; set; }

    public string OwneEmail { get; set; }

    public string First_Name { get; set; }

    public string Second_Name { get; set; }

    public string Third_Name { get; set; }

    public string Last_Name { get; set; }

    public string AttachmentUrl { get; set; }

    public List<OwnersViewModel> OwnersList { get; set; }
}

My OwnersViewModel:

public class OwnersViewModel
{
    public string OwnerNid { get; set; }

    public string OwnerMobile { get; set; }

    public string OwneEmail { get; set; }

    public string First_Name { get; set; }

    public string Second_Name { get; set; }

    public string Third_Name { get; set; }

    public string Last_Name { get; set; }

    public List<OwnersViewModel> OwnersList { get; set; }
}

Answer 1

First of all, it´s just a thought about your problem: To solve it, I would recommend you to create a button, on which you will react when the button was clicked. If the button was clicked you read out the forms data and add these data to the list.

Answer 2

To achieve what you mentioned you have to do following

1. In your view create a button to add an owner. Like a + sign or "Add Owner"
2. When user click on this button present the UI that lets you add owner. I assume you dont want to store owner on server at this stage to push owner object into an array in javascript.
3. Update your UI to show all owners from this list. You may have remove button or edit button for owners added with mistake etc
4. Once this is done on client side you can see the form now contains your fields and an array of owners list
5. If you want to submit this form with owners list simply put them in a json data object along with other fields and send it to server
6. Your method on controller will map the list items to correct field names and for array item you can see it coming to your method.
7. In controller you can then save all owners or do validation etc

To debug it you should be able to see the post request going to server with array of objects that you can test in console. Once that is achieved you are only left with problem of server to consume it so get your client side code sending this array first.

This technique is common in grids when they have to apply multiple filters so they build all filters in front end UI as array and once they submit those filters to server the controller can decide to do whatever is needed with them and return data based on that.

Try it and let us know where you find it difficult.

Answer 3

You can use JqueryRepeater library. just add the owner related inputs in a container then bind JqueryRepeater to the container. it will duplicate the owner inputs when you click the add button and when you click the submit button it will submit a list of owners to the action. just remember to give the same name to your inputs as your model class.