使用Ajax调用在ASP.NET MVC中提交表单不呈现部分视图

Question

我的索引控制器使用一个包含3个复选框的表单加载视图，该复选框用于过滤某些表中的数据。 在索引视图中，我具有：

<div id="ajax-container">

    <div id="content-loading"><img src="~/Images/preloader4.gif" /></div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#filter-form").trigger("submit");
        });
    </script>
}

也就是说，在页面加载时，我使用默认值提交表单。 这将在我的控制器中调用一个方法，该方法返回部分视图，如下所示：

<table id="summaryTable">
    <tr>
       <th>Column1</th>
       <th>Column2</th>
       <th>Column3</th>
    </tr>
    <tr>
       <td>Column1</td>
       <td>Column2</td>
       <td>Column3</td>
    </tr>
</table>

在初始页面加载时，这有效。 以后每次提交表单时，视图都不会更新。 返回部分视图的方法确实被调用，并且确实到达了返回PartialView（），但是它不会更新。

在尝试在document.ready上实施AJAX调用之前，所有这些工作正常。 不同之处在于索引视图的第一次加载称为@ Html.Partial（“ _ summaryTable”，Model）（现在是ajax-container div所在的位置），而<div id="ajax-container">的全部内容是在局部视图中包装表格。

编辑

Ajax的调用是：

$(function () {

var ajaxFormSubmit = function () {
    var $form = $(this);

    $("#content-loading").show();

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        $("#content-loading").hide();
    });

    return false;
};

Answer 1

我做这样的事情。不确定是否有帮助，但是您的ajax调用看起来有点愚蠢。 以下发布的代码将检查您的update元素。 您还想确保您的活动也总是可用

//事件绑定

$(document).on('submit', '#add_site_form', function(e) {
    e.preventDefault();
    postAjaxForm(e.target);

});

HTML：

 @using (Html.BeginForm("AddSite", "Site", new { Area = "Admin" }, FormMethod.Post, new { @id = "add_site_form", @class = "", @UpdateElement = "#middle" }))
{
    <ul>
        <li>
            @Html.LabelFor(x=>x.SiteName)
        </li>
        <li>
            @Html.TextBoxFor(x=>x.SiteName) &nbsp;@Html.ValidationMessageFor(x=>x.SiteName)
        </li>
        <li>
            @Html.LabelFor(x=>x.SiteUrl)
        </li>
        <li>
            @Html.TextBoxFor(x=>x.SiteUrl) &nbsp;@Html.ValidationMessageFor(x=>x.SiteUrl)
        </li>
    </ul>
<input type="submit" />
}

jQuery：

 var postAjaxForm = function (form) {
var updateElement = $(form).attr('UpdateElement');

if (!$(updateElement).length) {
    alert('Unable to find update element');
    return false;
}

if ($(form).valid()) {
    $.ajax({
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function (response) {

            if (response.redirect) {
                window.location = response.redirectUrl;
            } else {
                $(updateElement).html(response);
                $.validator.unobtrusive.parse($(updateElement).find('form'));
            }
        },
        error: function (xhr, stats, errorMessage) {
            console.log(errorMessage);
        }
    });
}
return true;

};