asp.net mvc ajax.beginform 作为 html.beginform 发送

Question

我有一个部分视图，我想从中显示一个包含更新数据的模式对话框。用户单击 div 将触发模式的显示和 ajax 要求更新模式的内容。

<div class="nMmenuItem" >    
    @using (Ajax.BeginForm("editItem","nMrestaurant",new { id = Model.ID },
        new AjaxOptions
        {
            HttpMethod = "get",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "myModalDocument"
        }, new { id = "ajaxEditItem" }))
    {
        <div data-toggle="modal" data-target="#myModal" 
             onclick="$('form#ajaxEditItem').submit();">            
            <div class="text-center">
                @Model.name
            </div>
        </div>        
    }
</div>

我在父视图中有一个模态占位符：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" id="myModalDocument">
        @Html.Partial("_editItem", new nMvMmenuItem())
    </div>
</div>

但是当控制器操作期待 AjaxResquest 时，控制器将 Request.IsAjaxRequest() 评估为 false。

 public async Task<ActionResult> editItem(int? id)
    {
        if (Request.IsAjaxRequest())
        {                
            return PartialView("_editItem", await db.nMmenuItems.FindAsync(id));
        }
        return View();
    }

刷新整个视图并阻止模态窗口工作。

我在 _Layout.cshtml 页面中捆绑了以下脚本：

"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery.unobstrusive*",
"~/Scripts/jquery.validate",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"

感谢您的帮助！

Answer 1

检查您是否安装了不显眼的 ajax 客户端脚本 - 如果它们存在，您的捆绑包模式看起来会拾取它们，但我不相信它们安装在默认项目中:

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

虽然 Ajax.BeginForm 包含在标准 MVC 项目中，但客户端脚本不包含，它们负责在不刷新整个页面的情况下加载内容。

Answer 2

我发现将 submit() 附加到表单的 onclick 事件不会执行 ajax 请求。因此，我的解决方案是删除 Ajax.SubmitForm 而是处理我的 js 中的点击事件：

更新后的视图如下所示：

<div class="nMmenuItem">
<form method="get" action="@Url.Action("editItem","nMrestaurant",new { id = Model.ID })"
      data-nM-ajax="true" data-nM-target="#myModalContent">
    <div>            
        <div class="text-center">
            @Model.name
        </div>            
    </div>
</form>

在js中我会将表单提交绑定到父级的点击事件div:

$('.nMmenuItem').click(ajaxFormSubmit);

以及处理表单提交和打开结果模式对话框的函数：

var ajaxFormSubmit = function () {        

    var $form = $(this).children('form:first');

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

    $.ajax(options).done(function (data) { 
        var $target = $($form.attr("data-nM-target"));                     
        $target.replaceWith(data);
        $("#myModal").modal(dialogOpts);
    });

    return false;

};

asp.net mvc ajax.beginform 作为 html.beginform 发送

asp.net mvc ajax.beginform being sent as html.beginform

asp.net-mvc

ajax.beginform