编辑带有弹出窗口的表单

Question

I'm really new to MVC in general and trying to understand how to do things the best way. Right now I'm stuck and need a little help.

So I have this edit form where the user can change information related to a person and list his current contacts. The contact types can be something like na email, facebook, twitter, Skype etc. The form below does what i need. Lists all contacts and allows the users to change this person information.

Now I want to allow the users to add a new contact (while the rest of the form is in edit mode). For that I want to show a popup, insert the new contact, and then update the list that already exists in the form.

How can I show the popup, insert the new contact, update the contact list while maintaining the changes the user did to the other fields?

<div id='content' class="tab-content">
<div class="tab-pane active" id="tab1">
    @using (Ajax.BeginForm("Edit", "Persons", null, new AjaxOptions() { HttpMethod = "POST" }, new { @id = "editPersonForm", enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()

        @Html.HiddenFor(model => model.Persons.PersonId, new { @id = "personId" })
        @Html.HiddenFor(model => model.Persons.StateId)
        <div class="row">
            <div class="col-md-6">
                <!-- Personal Information -->
                <div class="box box-danger">
                    <div class="box-body">
                        <div class="form-group">
                            <div class="col-xs-12">
                                <label>Name:</label>
                                @Html.EditorFor(model => model.Persons.Name, new { htmlAttributes = new { @class = "form-control", @placeholder = "Introduza o nome..." } })
                                @Html.ValidationMessageFor(model => model.Persons.Name, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-5">
                                <label>Birth Date:</label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    @Html.EditorFor(model => model.Persons.BirthDate, new { htmlAttributes = new { @id = "BirthDate", @class = "form-control" } })
                                    @Html.ValidationMessageFor(model => model.Persons.BirthDate, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="col-xs-5">
                                <label>Gender:</label>
                                @Html.DropDownListFor(model => model.Persons.Gender, Model.AllGenders, "Seleccione...", new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.Persons.Gender, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <label>Country:</label>
                                @Html.EditorFor(model => model.Persons.Nacionality, new { htmlAttributes = new { @class = "form-control", @placeholder = "Introduza a nacionalidade..." } })
                                @Html.ValidationMessageFor(model => model.Persons.Name, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-4">
                                <label>Has driving licence:</label>
                                @Html.CheckBoxFor(model => model.Persons.HasDrivingLicense, new { @class = "flat-green" })
                                @Html.ValidationMessageFor(model => model.Persons.HasDrivingLicense, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                @if (Model.Contacts != null && Model.Contacts.Count > 0)
                                {
                                    <table id="example2" class="table table-bordered table-hover dataTable" aria-describedby="example2_info">
                                        <thead>
                                            <tr role="row">
                                                <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">Contact</th>
                                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Contact Type</th>
                                                <th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Active</th>
                                        </thead>
                                        <tbody role="alert" aria-live="polite" aria-relevant="all">
                                            @{
                                                string cssClass = string.Empty;
                                                string activo = string.Empty;
                                            }

                                            @for (var i = 0; i < Model.Contacts.Count; i++)
                                            {
                                                cssClass = i % 2 == 0 ? "even" : "odd";

                                                <tr class="´@cssClass">
                                                    <td class=" ">@Html.DisplayFor(model => Model.Contacts[i].Contact)</td>
                                                    <td class=" ">@Html.DisplayFor(model => Model.Contacts[i].contacttypes.Name)</td>
                                                    <td class=" ">@Html.CheckBoxFor(model => Model.Contacts[i].IsActive, new { @class = "flat-green" })</td>
                                                </tr>
                                                @Html.HiddenFor(model => Model.Contacts[i].ContactsId)
                                            }
                                        </tbody>
                                    </table>
                                }
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-12">
                                <input type="button" value="Add Contact" class="buttonCreate btn btn-primary btn-sm" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

thank you all for the help.

Answer 1

    <div id="PostDetail" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content popupStyle" style="width: 900px !important">

            <div class="modal-header">
                <button type="button" class="close absolute-close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"></h4>
            </div>

            <div class="modal-body">
                //PUT YOUR CONTENT HERE

                <div class="clearfix"></div>
            </div>
            <div class="modal-footer">

            </div>

        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

and using script you can show the popup as

var modalPopup = $('#PostDetail');


            modalPopup.modal('show');

For loading the list, you can put your list part (table tag) in a partial view, and load this partial view in a DIV tag. Now on click of a button inside the popup, you can make an ajax call, and return that Partial view as result. Then dump this HTML in that div in which you already loaded the partial view using $("#dvID").html(result);

I hope this helps