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>

在初始页面加载时，这是有效的。在每次后续提交表单时，视图永远不会更新。返回部分视图DOES的方法被调用，它确实返回到返回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调用看起来有点傻。下面发布的代码将检查您的更新元素。您还希望确保您的活动始终可用

// EVENT BINDING

$(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;

};

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

1 个答案: