使用弹出窗口编辑表单

Question

总的来说，我对 MVC 真的很陌生，并且试图了解如何以最好的方式做事。现在我被困住了，需要一点帮助。

所以我有这个编辑表单，用户可以在其中更改与某个人相关的信息并列出他当前的联系人。联系人类型可以是电子邮件、facebook、twitter、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');

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

加载局部视图的 div 中

希望对您有所帮助

使用弹出窗口编辑表单

Edit form with a popup

ajax

jquery

razor

asp.net-mvc-5