c# - .NET MVC 部分返回 jQuery Ajax 输入在表单提交后不重置

Question

我很困惑为什么这不起作用。我有一个表单，我需要通过 jquery ajax 提交并让结果恢复原状。但是成功提交后输入字段不会被重置。

@model VendorCreateViewModel

<div id="ajaxVendorContainer">
    <div class="contentareabody">
        <div id="vendorIndexResult">
         @Html.Partial("Vendor/_VendorIndexPartial", Model.PersistedVendors)
        </div>
    </div>
    <br />
    <table style="width: 100%; border: 0;">
        <tr style="vertical-align: top;">
            <td>
                <div class="contentareabody">
                    @using (Html.BeginForm("Create", "Vendor", FormMethod.Post, new { id = "createVendorForm" }))
                    {
                        @Html.HiddenFor(x => x.VendorRequestId)
                        <table class="table table-striped table-bordered">
                            <tr>
                                <td class="rowheader">
                                    @Html.LabelFor(model => model.VendorName)
                                </td>
                                <td>
                                    <div class="input-prepend">
                                        <span class="add-on"><i class="icon-pencil"></i></span>
                                        @Html.EditorFor(model => model.VendorName)
                                    </div>
                                    @Html.ValidationMessageFor(model => model.VendorName)
                                </td>
                            </tr>
                            <tr>
                                <td class="rowheader">@Html.LabelFor(model => model.VendorNumber)</td>
                                <td>
                                    <div class="input-prepend">
                                        <span class="add-on"><i class="icon-pencil"></i></span>
                                        @Html.EditorFor(model => model.VendorNumber)
                                    </div>
                                    @Html.ValidationMessageFor(model => model.VendorNumber)
                                </td>
                            </tr>
                            <tr>
                                <td class="rowheader">@Html.LabelFor(model => model.VendorAddressOrDescription)</td>
                                <td>
                                    <div class="input-prepend">
                                        <span class="add-on"><i class="icon-pencil"></i></span>
                                        @Html.EditorFor(model => model.VendorAddressOrDescription)
                                    </div>
                                    @Html.ValidationMessageFor(model => model.VendorAddressOrDescription)
                                </td>
                            </tr>
                            <tr>
                                <td class="rowheader">@Html.LabelFor(model => model.VendorAmount)</td>
                                <td>
                                    <div class="input-prepend">
                                        <span class="add-on">$</span>
                                        @Html.EditorFor(model => model.VendorAmount)
                                    </div>
                                    @Html.ValidationMessageFor(model => model.VendorAmount)
                                </td>
                            </tr>
                            <tr>
                                <td class="rowheader">Account Number Helper</td>
                                <td>
                                    <div class="input-prepend">
                                        <span class="add-on"><i class="icon-hand-up"></i></span>
                                        <select id="AccountDropDown" style="width: 315px;">
                                            <option value="0"></option>
                                            <option value="1">My Department - Travel and Meetings - 18</option>
                                            <option value="2">My Department - Training Expense - 20</option>
                                            <option value="3">Different Department - Manual Entry</option>
                                        </select>
                                    </div>
                                    <img id="vendor-ajax-loader-account" src="/Content/Images/ajax.gif" style="display: none;" alt="ajax loader" />

                                </td>
                            </tr>
                            <tr>
                                <td class="rowheader">
                                    @Html.LabelFor(model => model.VendorAccountNumber)

                                </td>
                                <td>
                                    <div class="input-prepend">
                                        <span class="add-on"><i class="icon-pencil"></i></span>
                                        @Html.EditorFor(model => model.VendorAccountNumber)
                                    </div>
                                    @Html.ValidationMessageFor(model => model.VendorAccountNumber)

                                </td>
                            </tr>
                        </table>
                    }
                </div>
            </td>
            <td>
                <div class="rightoptions">
                    @Html.Partial("EstimatedExpenses/Summary", Model.VendorEstimatedExepensesViewModel)
                </div>
            </td>
        </tr>
    </table>

    <input class="btn btn-large btn-primary" onclick="submitForm()" value="Add Vendor" />
    &nbsp;
    <img id="vendor-ajax-loader-add" src="/Content/Images/ajax.gif" style="display: none;" alt="ajax loader" />
    <span id="vendor-working-add" style="display: none;">Adding Vendor...</span>

    <script>

        function submitForm() {
            $('form#createVendorForm').submit();
        }

        $('form#createVendorForm').submit(function () {
            if ($(this).valid()) {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    beforeSend: function () {
                        $('#vendor-ajax-loader-add').show();
                        $('#vendor-working-add').show();
                    },
                    success: function (result) {
                        $('#ajaxVendorContainer').html(result);
                        $('#vendor-ajax-loader-add').hide();
                        $('#vendor-working-add').hide();
                    }
                });
            }
            return false;
        });


        $(function () {
            $('#AccountDropDown').change(function () {
                var rId = '@(Model.VendorRequestId)';
            var aId = $('#AccountDropDown').val();

            $.ajax({
                url: '/Account/GetAccountNumber',
                type: 'GET',
                dataType: 'json',
                data: { id: rId, accountId: aId },
                beforeSend: function () {
                    $('#vendor-ajax-loader-account').show();
                },
                success: function (result) {
                    $('#VendorAccountNumber').val(result);
                    $('#vendor-ajax-loader-account').hide();
                }
            });
        });


    });
    </script>
</div>

知道这里发生了什么吗？您可以看到操作方法为输入字段返回空值，但浏览器仍显示旧的预表单提交值

Answer 1

有 2 种方法重置它。您可以通过在提交后调用的成功函数中手动清除它们来重置所有字段。另一种方法是在数据库插入成功时在操作结果中返回一个空视图模型。例如：

public actionresult Create(VendorCreateViewModel viewModel)
{
    if (!ModelState.IsValid)
        return PartialView(viewModel);

    // Converts your view model to your domain model
    VendorModel domainModel = new VendorModel(viewModel);

    // Service call to create your vendor in the database
    vendorService.CreateVendor(domainModel);

    // This will reset your fields to empty
    return PartialView(new VendorCreateViewModel());
}

我忘了在第二个例子中添加只有在您使用内置的 ASP.NET MVC-Ajax（即 Ajax.BeginForm()）时才有效。