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);
        })
    });