MVC阿贾克斯从提交模式 [英] mvc ajax submitting from a modal

问题描述

我称之为一个模式，它允许用户选择一堆动态创建的复选​​框，然后提交表单到一个控制器，它保存所有在传递给它的的FormCollection的信息，然后做一个RedirectToAction来调用的页面模态。

我希望能够仍然保存东西在的形式，但，而不是重定向到调用我想留在模态模态的页面。

模式

 ＆LT;脚本类型=文/ JavaScript的＆GT;
当完成//关闭模态。
功能CloseModal（）{
    $（＃SkillModalWindow）模式（隐藏）。
}
＆LT; / SCRIPT＆GT;@using（Ajax.BeginForm（保存，SkillGroup，空，新AjaxOptions
{
    列举HTTPMethod =邮报，
    的onSuccess =CloseModal
}，
新{ID =CreateSkillGroups}））
{
@ Html.ValidationSummary（真）
@ Html.Hidden（JobRoleId（INT）ViewBag.JobRoleID）＆LT; D​​IV CLASS =模头＆GT;
    ＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆×LT; /按钮＆GT;
    ＆LT; H3 ID =myModalLabel＆gt;添加新的技能来工作角色和LT; / H3 GT＆;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =模体ID =CreateModal＆GT; @ Html.Partial（_创建）＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =模式躯＆GT;
    ＆LT;按钮类=BTN数据解雇=莫代尔ARIA隐藏=真＆GT;关闭＆LT; /按钮＆GT;
    ＆LT;按钮式=提交级=BTN BTN-小学＆GT;保存＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
}
 

动作控权

  [HttpPost]
公众的ActionResult保存（的FormCollection的FormCollection）
{的foreach（在formCollection.AllKeys VAR键）
{
    做东西.....}
返回RedirectToAction（「指数」）;}
 

解决方案

您可以返回一个包含模式的标记，而不是重定向的局部视图：

  [HttpPost]
公众的ActionResult保存（的FormCollection的FormCollection）
{    的foreach（在formCollection.AllKeys VAR键）
    {
        做东西.....    }
    返回PartialView（_莫代尔）;
}
 

另外，还要确保你已经包括 jquery.unobtrusive-ajax.js 脚本在主视图，如果你想在 Ajax.BeginForm 辅助工作。

I call a modal which allows a user to select a bunch of dynamically created check boxes and then submit the form to a controller which saves all the info from the FormCollection passed in to it then does a RedirectToAction to the page that calls the modal.

I want to be able to still to save the stuff in the form, but, instead of redirecting to the page that calls the modal i want to stay in the modal.

modal

<script type="text/javascript">
// Close Modal when done.
function CloseModal() {
    $("#SkillModalWindow").modal("hide");
}
</script>

@using (Ajax.BeginForm("Save", "SkillGroup", null, new AjaxOptions
{
    HttpMethod = "Post",
    OnSuccess = "CloseModal"
},
new { id = "CreateSkillGroups" }))
{
@Html.ValidationSummary(true)
@Html.Hidden("JobRoleId", (int)ViewBag.JobRoleID)

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Add New Skills to Job Role</h3>
</div>
<div class="modal-body" id="CreateModal">@Html.Partial("_Create")</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button type="submit" class="btn btn-primary">Save</button>
</div>
}

Controllor Action

[HttpPost]
public ActionResult Save(FormCollection formCollection)
{

foreach (var key in formCollection.AllKeys)
{
    do stuff.....

}
return RedirectToAction("Index");

}

解决方案

You could return a partial view containing the modal markup instead of redirecting:

[HttpPost]
public ActionResult Save(FormCollection formCollection)
{

    foreach (var key in formCollection.AllKeys)
    {
        do stuff.....

    }
    return PartialView("_Modal");
}

Also make sure that you have included the jquery.unobtrusive-ajax.js script in your main view if you want the Ajax.BeginForm helper to work.

这篇关于MVC阿贾克斯从提交模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！