Question

我对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>

谢谢大家的帮助。

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>

并使用脚本，您可以将弹出窗口显示为

var modalPopup = $('#PostDetail');


            modalPopup.modal('show');

要加载列表，您可以将列表部分（表格标记）放在部分视图中，并将此部分视图加载到DIV标记中。现在单击弹出窗口中的按钮，您可以进行ajax调用，并返回该部分视图作为结果。然后使用$("#dvID").html(result);

将此HTML转储到已加载部分视图的div中

我希望这会有所帮助

使用弹出窗口编辑表单

1 个答案: