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>

有什么想法在这里发生？您可以看到action方法返回输入字段的空值，但浏览器仍显示旧的预表单提交值

enter image description here

Answer 1

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

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（））时才有效。

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

1 个答案: