jQuery AJAX Post Success將不會更新div，顯示部分視圖

Question

我似乎無法獲得jQuery AJAX帖子以使用返回的局部視圖更新div。 返回的局部視圖帶有正確的html，並在瀏覽器中完整顯示，但我無法在我希望的div中顯示它。 我敢肯定這是相當簡單的事情，但是經過數小時的嘗試來解決這個問題后，我似乎無法弄清楚。

最終，我要實現的目標是在表單發布后將結果顯示在另一個div中，然后以某種方式通過另一個ajax調用以另一個局部視圖更新另一個div。 我已設置此測試以熟悉事物的工作原理，但我正在努力做到這一點。

控制器：

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include="id,Name")] Test test)
    {
        if (ModelState.IsValid)
        {
            db.Test.Add(test);
            db.SaveChanges();
            return PartialView("DetailsPartial", test);
        }

        return PartialView("CreatePartial");
    }

主頁：

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    <button id="Create">Create</button>
</p>
<div id="CreatePlaceholder">

</div>

<div id="DetailsPlaceholder">

</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

<script>
    $(document).ready(function () {
        $('#Create').click(function (event) {
            event.preventDefault();
            $.ajax({
                type: 'get',
                url: '/Test/Create'
            }).done(function (data) {
                $('#CreatePlaceholder').html(data)
            })
        })

        $('#CreateForm').submit(function (event) {
            event.preventDefault();

            var $form = $(this);
            var formData = $form.serialize;
            alert(formData);
            formData.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();

            $.ajax({
                type: 'POST',
                url: '/Test/Create',
                data: formData,
                success: function (result) {
                    $('#DetailsPlaceholder').html(result);
                }
            })
        });
    })
</script>

創建局部視圖：

@model PerformanceTools.Models.Test

<form id="CreateForm" method="post" action="@Url.Action("Create","Test")">
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Test</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

詳細局部視圖：

@model PerformanceTools.Models.Test

<dl class="dl-horizontal">
    <dt>
        @Html.DisplayNameFor(model => model.id)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.id)
    </dd>
    <dt>
        @Html.DisplayNameFor(model => model.Name)
    </dt>

    <dd>
        @Html.DisplayFor(model => model.Name)
    </dd>
</dl>

Answer 1

但是，您正在渲染部分視圖，並將其放在div中。

 <div id="partialSummaryDiv">@{Html.RenderPartial("YourPartial");}</div>

成功執行Ajax調用后，請在div而不是局部視圖上調用.html（）。

  success: function (data) {
                $('#partialSummaryDiv).html(data);
          }

它沒有顯示在Div中，因為您沒有在div中定義局部視圖。 如果您希望在ajax成功通過之前隱藏部分視圖，則需要添加其他邏輯

Answer 2

問題在於該事件從未掛接到表單提交，因為在DOM准備就緒后將其添加到頁面中。

我可以通過在空的占位符div上使用.on來解決此問題。

    $('#CreatePlaceholder').on('submit', '#CreateForm', function (event) {
        event.preventDefault();

        var formData = $(this).serialize();
        formData.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();

        $.ajax({
            type: 'POST',
            url: '/Test/Create',
            data: formData
        }).done(function (data) {
            $('#DetailsPlaceholder').html(data);
        })
    });