重置局部视图的模型值

Question

我有一个包含两个部分视图的视图。一个用于选择客户，一个用于创建新客户，两者都显示在父页面的选项卡中。如果有人选择了一个客户，然后继续使用数据输入表单，但随后必须返回创建一个新客户，则来自所选客户的数据仍然存在。我可以通过输入新数据来替换数据，但是，重要的是客户 ID 仍然存在，因此没有考虑其他数据。有没有办法让我在点击时重置客户对象，例如一个编辑按钮，而不会丢失页面其余部分的数据？

我的父视图（相关部分）是：

    <div class="form-group">
        @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-12">
            @if (Model.CommunicationModel.Communication.Customer.Name == null)
            {
                <input id="btnCust" type="button" value="Select" class="btn btn-default selectCustomer" />
            }
            else
            {
                <span id="custSpan" style="font-size:16px; font:bold;">
                    @Html.DisplayFor(model => model.CommunicationModel.Communication.Customer.Name)
                    @Html.HiddenFor(model => model.CommunicationModel.Communication.Customer.CustomerId)
                    <input id="btnEditCust" type="button" value="Edit" class="btn btn-default selectCustomer" />
                </span>
            }
            <div id="customerTabs" style="display:none;">
                <hr />
                <p>
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tabs-1" aria-controls="tabs-1" role="tab" data-toggle="tab">Select Customer</a></li>
                        <li role="presentation"><a href="#tabs-2" aria-controls="tabs-2" role="tab" data-toggle="tab">Create New Customer</a></li>
                    </ul>
                </p>

                <div class="tab-content">
                    <div id="tabs-1" role="tabpanel" class="tab-pane active">
                        @Html.Partial("~/Views/Communication/SelectCustomer.cshtml", Model.CustomerViewModel.AllCustomers)
                    </div>
                    <div id="tabs-2" role="tabpanel" class="tab-pane">
                        @Html.Partial("~/Views/Communication/CreateCustomer.cshtml", Model)
                    </div>
                </div>
            </div>
        </div>
    </div>

我创建客户的部分视图是：

@model CommunicationsLog.ViewModels.CommunicationViewModel

<div class="form-horizontal" id="addCustomerForm">
<div class="row">
    <div class="col-md-12">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Name, new { htmlAttributes = new { @class = "form-control" }, @id = "name" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Name, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, new { htmlAttributes = new { @class = "form-control" }, @id = "email" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactTel, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactTel, new { htmlAttributes = new { @class = "form-control" }, @id = "phone" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactTel, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.CompanyName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.CompanyName, new { htmlAttributes = new { @class = "form-control" }, @id = "company" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.CompanyName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Address, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Address, new { htmlAttributes = new { @class = "form-control" }, @id = "address" })
                @Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Address, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
</div>

---

任何帮助将不胜感激。我很难过:)

Answer 1

您正在使用 Partials，这意味着 html 在到达客户端时已经加载并呈现。

要处理Id正在发送的情况，你应该标记..Customer.CustomerId有disabled="disabled"或readonly，这样可以避免Client端提交Input tag，导致Server端“认为"（如果您以这种方式实施）这是一个新客户。

您可以使用 jQuery 1.6+ 轻松实现它：

$('#TheCustomerId').prop('disabled', true);
$('#TheCustomerId').prop('disabled', false);

在 Disable/enable an input with jQuery?