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调用的成功，调用.html（）对div不在局部视图上。

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

jQuery AJAX Post Success不会更新div，显示部分视图

2 个答案: