为什么Ajax在第一次请求时正常工作，但在第二次请求时返回新页面上的部分视图？

我有一个嵌套在表中每一行的Ajax表单，以提供添加/删除function。 部分列出了所有可用角色（Microsoft身份2.0），并为每个角色列出了指定用户是否与该角色相关联，以及用于切换用户进出角色（Ajax）的按钮。

当我使用Ajax.Beginform时，一切正常，但是当我使用常规jquery时，它第一次单击按钮切换用户与角色的关联时工作，但第二次将部分视图加载到其新页面上拥有没有CSS风格。

在stackoverflow上搜索，我看到其他人有类似的问题，但他们似乎根本没有ajax工作，不像我有第一个请求工作，然后没有。 我还应该提一下，我是Asp.net的新手，这是我第一次直接使用jquery（遵循Scott Allan关于PluralSight的教程）。

这是我已经尝试过的：检查该操作是否被带有调试断点的ajax请求命中。 检查我在布局视图中引用了jquery，并且不超过一次。 检查我是否以正确的顺序引用jquery和jquery unobtrusive ajax。 检查web.config是否将相关标志设置为true。

我已经被困在这几个小时了，任何指导都会非常感激。

BundleConfig.cs：

namespace GCCP { public class BundleConfig { // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*", "~/Scripts/jquery.unobtrusive*")); bundles.Add(new ScriptBundle("~/bundles/gccp").Include( "~/Scripts/gccp.js")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); // Set EnableOptimizations to false for debugging. For more information, // visit http://go.microsoft.com/fwlink/?LinkId=301862 BundleTable.EnableOptimizations = true; } } } 

行动方法：

 public ActionResult UserRoles(string returnUrl, string UserName) { ViewBag.ReturnUrl = returnUrl; UserRolesViewModel Model = new UserRolesViewModel(); Model.UserName = UserName; Model.RoleAssignments = UserRoleAssignments(UserName); return View(Model); } [HttpPost] public ActionResult ToggleUserToRoleAssignment(string returnUrl, string UserName, string RoleName) { ViewBag.ReturnUrl = returnUrl; var userStore = new UserStore(context); var userManager = new UserManager(userStore); var roleStore = new RoleStore(context); var roleManager = new RoleManager(roleStore); string userID = userManager.FindByName(UserName).Id; if ( roleManager.RoleExists(RoleName) == true ) { if ( userManager.IsInRole(userID, RoleName) == true ) { userManager.RemoveFromRole(userID, RoleName); } else { userManager.AddToRole(userID, RoleName); } } 

视图模型：

 namespace GCCP.Models { public class UserRolesViewModel { [Required] [Display(Name = "User")] public string UserName { get; set; } public Dictionary RoleAssignments { get; set; } public string AjaxTest { get; set; } } } 

视图：

 @using GCCP.Models; @using System.Web.Mvc.Ajax; @model UserRolesViewModel @{ ViewBag.Title = "User Roles"; } 
 @Model.UserName | Assigned Roles 
 @Html.Partial("_UserRolesList", Model) 

部分视图：

 @using GCCP.Models; @using System.Web.Mvc.Ajax; @model UserRolesViewModel 
  @foreach ( var item in Model.RoleAssignments ) { if ( item.Value ) {  } else {  } } 
 
 
 
 Roles 
 
 Assigned 
 
 Add / Remove 
 
 
 
 
 @item.Key 
 
  
 
 
    
 
 
 
 @item.Key 
 
  
 
 
    
 
 
 
  

jQuery的：

 $(function () { var ajaxFormSubmit = function () { var $form = $(this); var options = { url: $form.attr("action"), type: $form.attr("method"), data: $form.serialize() }; $.ajax(options).done(function (data) { var $target = $($form.attr("data-gccp-target")); $target.replaceWith(data); }); return false; }; $("form[data-gccp-ajax='true']").submit(ajaxFormSubmit); }); 

提前致谢 ：）

Answer 1

“仅第一次工作”行为是典型的动态添加内容的情况，但事件直接绑定到元素（例如，在DOM就绪）。

相关部分是这样的：

 $("form[data-gccp-ajax='true']").submit(ajaxFormSubmit); 

这只绑定到运行该代码行时存在的现有表单。

另一种方法是使用委托的事件处理程序，附加到元素的不变的祖先：

例如

 $('#roleAssignmentList').on("submit", "form[data-gccp-ajax='true']", ajaxFormSubmit); 

它的工作原理是通过侦听提交事件来冒泡到该祖先， 然后将jquery选择器应用于bubble-chain中的元素， 然后应用frunction。

如果您没有方便的不变的祖先使用document 。 我并非100％确定您没有完全替换#roleAssignmentList （或仅仅是其子代），因此该示例无法使用document 。

例如

 $(document).on("submit", "form[data-gccp-ajax='true']", ajaxFormSubmit); 

但从不使用’body’作为委托事件处理程序目标（它有一些与样式相关的错误，这意味着它可能会错过某些事件）。