c# - 可排序，可拖动，可排序的表格+ MVC无法正确更新订单

我正在尝试向我的视图添加可排序的表。在View New.cshtml中进行排序时，可以进行排序。它使用jQuerys sortable。如果我添加了一些说明（在这种情况下为1-5），那么由于可排序的脚本，我可以移动它们。但是，当我尝试在重新排序后添加新指令时，命令从以下位置更改：至我想这与隐藏形式有关@Html.HiddenFor(m => m.Recipe.Instructions[i].Number, new { @id = "Number"})当我对可排序表中的字段重新排序时，它需要更新其值。我在这里想念什么？RecipeController.cspublic ActionResult Create(NewRecipeViewModel viewModel, string command){//...more code... var instructionList = new List<Instruction>(); if (viewModel.Recipe.Instructions != null) { for (int i = 0; i < viewModel.Recipe.Instructions.Count; i++) { var instruction = new Instruction { Id = viewModel.Recipe.Instructions[i].Id, Name = viewModel.Recipe.Instructions[i].Name, Number = viewModel.Recipe.Instructions[i].Number }; instructionList.Add(instruction); } } if (command.Equals("AddInstruction")) { var instruction = new Instruction { Name = viewModel.NewInstruction.Name, Number = viewModel.Recipe.Instructions.Count + 1 }; recipe.Instructions.Add(instruction); viewModel.Recipe = recipe; return View("New", viewModel); }//...more code...}New.cshtml<div class="form-group" style="margin-top: 170px;"> <label class="col-md-2 control-label"> Lägg till instruktion: </label> <div class="col-md-10"> @Html.TextBoxFor(m => m.NewInstruction.Name, new { @class = "form-control" }) </div></div><div class="form-group" style="margin-top: 300px;"> <label class="col-md-2 control-label"> </label> <div class="col-md-10"> <button type="submit" name="command" value="AddInstruction" class="btn btn-primary">Add instruction</button> </div></div><div class="form-group" style="margin-top: 100px;"> <label class="col-md-2 control-label"> Instructions: </label> <div class="col-md-10"> <table class="table table-bordered table-hover pagin-table" style="margin-top: 10px"> <thead> <tr bgcolor="#f5f5f5"> <th>Order:</th> <th>Instruction:</th> </tr> </thead> <tbody id="sortable"> @if (Model.Recipe.Instructions != null) { for (int i = 0; i < Model.Recipe.Instructions.Count; i++) { <tr> @Html.HiddenFor(m => Model.Recipe.Instructions[i].Id) <td class="order"> @Model.Recipe.Instructions[i].Number @Html.HiddenFor(m => m.Recipe.Instructions[i].Number, new { @id = "Number"}) </td> <td> @Model.Recipe.Instructions[i].Name @Html.HiddenFor(m => m.Recipe.Instructions[i].Name) </td> </tr> } } </tbody> </table> </div></div> <script type="text/javascript"> $(document).ready(function() { $('#sortable').sortable({ update : function(event, ui) { $('td.order').each(function(index) { var order = index + 1; $(this).find('span').text(order); $(this).find('.Number').val(order); }); } }); }); </script编辑：添加instructionList.Sort((s1, s2) => s1.Number.CompareTo(s2.Number));到RecipeController.cs。其余的归功于Stephen Muecke。RecipeController.cspublic ActionResult Create(NewRecipeViewModel viewModel, string command){//...more code... var instructionList = new List<Instruction>(); if (viewModel.Recipe.Instructions != null) { for (int i = 0; i < viewModel.Recipe.Instructions.Count; i++) { var instruction = new Instruction { Id = viewModel.Recipe.Instructions[i].Id, Name = viewModel.Recipe.Instructions[i].Name, Number = viewModel.Recipe.Instructions[i].Number }; instructionList.Add(instruction); } instructionList.Sort((s1, s2) => s1.Number.CompareTo(s2.Number)); }//...more code...}New.cshtml @* More code *@ <td class="order"> <span>@Model.Recipe.Instructions[i].Number</span> @Html.HiddenFor(m => m.Recipe.Instructions[i].Number, new {@class = "Number"}) </td> @* More code *@ <script type="text/javascript"> $(document).ready(function() { $('#sortable').sortable({ update : function(event, ui) { $('td.order').each(function(index) { var order = index + 1; $(this).find('span').text(order); $(this).find('.Number').val(order); }); } }); }); </script 最佳答案 您在update函数中的选择器不正确，将返回undefined（您缺少#（id选择器），并且在任何情况下$都会创建一个jQuery对象，因此它将是.val(...)，而不是。但是，使用value=...将无法正常工作，因为它只会更新具有$('#Number').val(index + 1) id`属性的第一个元素是无效的html。请改用类名和相对选择器。将html更改为<td class="order"> <span>@Model.Recipe.Instructions[i].Number</span> @Html.HiddenFor(m => m.Recipe.Instructions[i].Number, new { @class = "Number"})</td>然后脚本$('#sortable').sortable({ update : function(event, ui) { $('td.order').each(function(index) { var order = index + 1; $(this).find('span').text(order ); $(this).find('.Number').val(order ); }); }});关于c# - 可排序，可拖动，可排序的表格+ MVC无法正确更新订单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52597650/