Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

但是当控制器操作期望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客户端脚本 - 如果它们存在，您的捆绑模式看起来会接收它们，但我不相信它们已安装在默认项目中：

s[]

虽然Ajax.BeginForm包含在标准MVC项目中，但客户端脚本却没有，这些负责加载内容而不刷新整个页面。

Answer 2

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

更新后的视图如下所示：

<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的click事件：

$('.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

2 个答案: