1

我的索引控制器加载一个带有 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;
};
4

1 回答 1

0

我做这样的事情..不确定这是否有帮助，但你的 ajax 调用看起来有点傻。下面发布的代码将检查您的更新元素。您还想确保您的活动也始终可用

//事件绑定

$(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" />
}

查询：

 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;

};

于 2013-04-29T12:31:06.083 回答