解析复选框值更改模型，然后在VIEW ASP.Net MVC

Question

按钮点击JSON对象有一个表单，用户应该能够取消预先选定checkbox和节省AJAX的职位，国家通过JSON对象为Controller工作在ASP.Net MVC

要求：

1. 取消选中预先选定复选框抄ULD改变从“活动” =“Y”的数据库属性一排“活动=” =“N”
2. 新选定的复选框会在数据库创建一个完整的新行

问题：

1. 取消选定所选文字框后模型未在VIEW中更新。因此，服务器端数据不会更新。在数据解析为AJAX调用之前，需要客户端更新。
2. 不知道如何捕获复选框值更改并将其传递给模型，以便解析后的数据可以更改为按钮单击/提交表单。
3. 下面的代码也给出了错误200，因为dataType在提交时（假设按钮在这里提交）据说不正确。

检视：

@model List<DashboardPermissionTool.ViewModels.UserViewModel> 
@using (@Html.BeginForm(new { id = "UserForm" })) 
{ 
<table class="table"> 
    <tr> 
     <th>User</th> 
     @for (int i = 0; i < Model[0].Roles.Count; i++) 
     { 
      <th> 
       @Model[0].Roles[i].RoleName 
      </th> 
     } 
    </tr> 
    @for (int i = 0; i < Model.Count; i++) 
    { 
     <tr> 
      <td> 
       @Html.HiddenFor(m => m[i].UserName) 
       @Model[i].UserName 
      </td> 
      @for (int j = 0; j < Model[i].Roles.Count; j++) 
      { 
       <td> 
        @Html.CheckBoxFor(m => m[i].Roles[j].IsSelected) 
       </td> 
      } 
     </tr> 
    } 
</table> 

<div class="form-actions"> 
    <a id="SubmitUserRoles" class="btn btn-success submit" value="Save">Save changes</a> 
</div> 

<script> 

    var parsedData = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)); 

    $(document).ready(function() { 
     $("#SubmitUserRoles").click(function() { 

      $('input[type=checkbox]').on("change",function(){ 
       if($(this).prop('checked')) 
       { 
        $(this).attr('checked', false); 
       } 
       else 
       { 
        $(this).attr('checked', true); 
       }     
      }); 

       $.ajax({ 
       url: '@Url.Action("Create", "User")', 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       cache: false, 
       dataType: 'json', 
       data: JSON.stringify(parsedData), 
       success: function (data) { 
        console.log(data); 
       }, error: function (xhr, ajaxOptions, error) { 
        alert(xhr.status); 
        alert("Error: " + xhr.responseText); 
       } 
      }); 
     }); 
    }); 
</script> 

}

HTML响应：：对于每个选中复选框响应如下：

<td> 
    <input checked="checked" data-val="true" data-val-required="The IsSelected field is required." name="[0].Roles[0].IsSelected" type="checkbox" value="true" /> 
    <input name="[0].Roles[0].IsSelected" type="hidden" value="false" /> 
</td> 

对于每个选中复选框答复如下：

<td> 
    <input data-val="true" data-val-required="The IsSelected field is required." name="[0].Roles[1].IsSelected" type="checkbox" value="true" /> 
    <input name="[0].Roles[1].IsSelected" type="hidden" value="false" /> 
</td> 

的ViewModels：

public class UserViewModel 
{ 
    public string UserName { get; set; } 
    public List<RoleViewModel> Roles { get; set; } 
} 

public class RoleViewModel 
{ 
    public string RoleName { get; set; } 
    public bool IsSelected { get; set; } 
} 

控制器：

[HttpPost] 
    public ActionResult Create(List<UserViewModel> model) 
    { 

     for (int i = 0; i < model.Count; i++) 
     { 
      for (int j = 0; j < model[i].Roles.Count; j++) 
      { 
       db.User.Add(new User 
       { 
        username = model[i].UserName, 
        role = model[i].Roles[j].RoleName 
       });     
      } 

      db.SaveChanges(); 
      return RedirectToAction("Index", "User"); 
     } 
     return View("Index", model); 
    } 

Answer 1

有你的代码的多个问题。

从控制器方法开始，外部for循环内有一个return语句，这意味着您只保存第一个UserViewModel的值，然后退出该方法。要保存所有的记录，它需要

[HttpPost] 
public ActionResult Create(List<UserViewModel> model) 
{ 
    for (int i = 0; i < model.Count; i++) 
    { 
     for (int j = 0; j < model[i].Roles.Count; j++) 
     { 
      db.User.Add(new User { username = model[i].UserName, role = model[i].Roles[j].RoleName });     
     } 
    } 
    db.SaveChanges(); 
    return RedirectToAction("Index", "User"); 
} 

但是从这个方法的明确，要重定向到Index()方法保存的记录，所以使用Ajax提交的数据是没有意义的（Ajax调用后留在同一页面上，不要重定向），所以你应该使用正常的提交按钮来提交表单（并删除所有的脚本）。您需要更改

<a id="SubmitUserRoles" class="btn btn-success submit" value="Save">Save changes</a> 

到

<input type="submit" class="btn btn-success submit" value="Save" /> 

，并还请注意，value不是一个<a>元素的有效属性。

但是，为了解决代码中的其他问题，我们假设您希望保持在同一页面上并更新DOM。

首先

var parsedData = @Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)); 

（和你可以简单地使用var parsedData = @Html.Raw(Json.Encode(Model))代替）的序列化的原始模型，所以你只要回发的原始值，而不是编辑的值。为了通过编辑的价值观，你的AJAX选项必须

data: $('form').serialize(), 

下一页

contentType: 'application/json; charset=utf-8', 

意味着你发送的数据为JSON，但是你有没有字符串化的数据。这将需要

data: JSON.stringify($('form').serialize()), 

为了绑定，但这是不必要的，你只需要以便它使用默认的'application/x-www-form-urlencoded; charset=UTF-8'

下一页

dataType: 'json', 

删除contentType选项意味着你指定的方法返回json，但实际上它正在返回html，所以它会抛出异常。这将需要dataType: 'html',或简单地删除该选项和ajax方法将解决。

您还需要删除您的$("#SubmitUserRoles").click(function() { ... }脚本。 checked属性的存在意味着其所选的checked="checked"或checked="true"或check="false"或checked="anything"都表示完全相同的事情 - 即选中该复选框。幸运的是，代码永远不会执行（如果这样做的话，它会把所有东西都搞砸了），因为你只在处理函数内部添加了处理函数$("#SubmitUserRoles").click(function() {，这引发了一个异常。

最后

@using (@Html.BeginForm(new { id = "UserForm" })) 

为id添加路由值（如果你看一下HTML的发生，你会看到action="../Create/UserForm"（或action="../Create?id=UserForm"取决于你的路由（和你的方法没有一个参数string id ）。我假设你认为它为<form>标签添加了id属性，在这种情况下，您需要使用接受htmlAttributes的中的一个overloads。然而，其只需要添加与CSS或JavaScript的选择使用id属性，所以你可以只使用

@using (@Html.BeginForm())