jQuery AJAX Post Success不会更新div，显示部分视图 [英] jQuery AJAX Post Success will not update div, displays partial view

问题描述

我似乎无法获得jQuery AJAX帖子来更新带有返回的部分视图的div。部分视图返回正确的HTML并在浏览器中完整显示，但我无法将它显示在我希望的div中。我相信这是一件相当简单的事情，但我无法想象，经过无数小时试图解决这个问题。

I can't seem to get a jQuery AJAX post to update a div with the returned partial view. The partial view is returned with the correct html and displays in its entirety within the browser but I cannot get it to display in the div I would like it to. I'm sure it is something rather simple but I can't seem to figure it out after numerous hours of trying to solve this.

最终，我正在努力实现当表单发布时，结果显示在另一个div中，然后我会通过另一个ajax调用以另一个局部视图更新另一个div。我已经设置了这个测试，以熟悉如何工作，但我很努力地得到这个权利。

Ultimately what I am trying to achieve is when the form is posted that the results are display in another div and I would then, somehow, update another div with another partial view via another ajax call. I have set this test up to get familiar with how things work but I am struggling to get this right.

控制器：

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

主页：

Main page:

@{
    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>

创建部分视图：

Create partial view:

@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>

详情局部视图：

Details partial view:

@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>

推荐答案

问题是，在DOM准备就绪后，由于它被添加到页面而提交表单。

The problem was that the event was never being hooked up to the forms submit due to it being added to the page after the DOM was ready.

我可以通过使用 .on来解决问题在空的占位符div上。

I was able to fix the issue by using .on on the empty placeholder div.

    $('#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，显示部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！