我对MVC一般都很陌生，并试图了解如何以最佳方式做事。现在我被困住了，需要一些帮助。
所以我有这个编辑表单，用户可以在其中更改与人相关的信息并列出他当前的联系人。联系类型可以是像电子邮件，脸书，推特，Skype等。下面的表格做我需要的。列出所有联系人，并允许用户更改此人员信息。
现在我想允许用户添加新联系人（而表单的其余部分处于编辑模式）。为此，我想显示一个弹出窗口，插入新的联系人，然后更新表单中已存在的列表。
如何显示弹出窗口，插入新联系人，更新联系人列表，同时保持用户对其他字段所做的更改？
<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>
谢谢大家的帮助。
答案 0 :(得分：0)
<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>
并使用脚本，您可以将弹出窗口显示为
var modalPopup = $('#PostDetail');
modalPopup.modal('show');
要加载列表，您可以将列表部分（表格标记）放在部分视图中，并将此部分视图加载到DIV标记中。现在单击弹出窗口中的按钮，您可以进行ajax调用，并返回该部分视图作为结果。然后使用$("#dvID").html(result);
我希望这会有所帮助