1

なぜこれが機能しないのか混乱しています。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>

ここで何が起こっているのですか？アクション メソッドが入力フィールドに空の値を返していることがわかりますが、ブラウザーにはフォーム送信前の古い値が表示されています。

ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力

4

1 に答える 1

0

リセットするには2つの方法があります。送信後に呼び出される成功関数で手動でクリアすることにより、すべてのフィールドをリセットできます。もう 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()) を使用している場合にのみ機能する 2 番目の例を追加するのを忘れていました。

于 2013-06-11T15:56:46.860 に答える