ASP.NET MVC 5 最佳实践表单提交答案

【问题标题】：ASP.NET MVC 5 best practise form submitASP.NET MVC 5 最佳实践表单提交
【发布时间】：2017-11-03 12:03:16
【问题描述】：

说明： 我有一个用户友好输入的表单：

但我不能以这种方式提交表单，因为我的表单操作模型如下所示：

    public string Title { get; set; }  // First input
    public string Description { get; set; }  // Second input
    public string SportsmanId { get; set; }  // Not used
    public List<WorkoutExerciseParam> WorkoutExerciseParams { get; set; }  // Items, combined from list items (show on form screenshot)
    public SelectList AvailableSportsmans { get; set; }  // Dropdown list

所以，如果我不能提交，我写了JS代码来构造和发布一致的模型：

$(document)
        .ready(function() {
            $("#submit").click(function() {
                var exerciseList = [];
                /* Assemble exerciseList from OL and UL items */
                var title = $("input#Title").val();
                var description = $("input#Description").val();
                var sportsmanId = $("select#SportsmanId").val();
                $.post('@Url.Action("Create", "Workout")',
                {
                    Title: title,
                    Description: description,
                    SportsmanId: sportsmanId,
                    WorkoutExerciseParams: exerciseList
                });
            });
        });

这段代码运行良好，但操作完成后我无法重定向（就像我刚刚提交表单时一样）：

然后，我重写了 JS 代码，它构造了一个带有隐藏输入的新隐藏表单并提交它。但我不知道如何创建输入列表（来自第一个代码示例的列表）。

问题：

向 ASP.NET 控制器的 Action throw JS 提交数据的最佳实践是什么，我可以使用 RedirectToAction() 和 View() 方法？是否需要构造表单（如何做对象列表）或如何处理 JS 中的 RedirectToAction() 和 View() 方法？

【问题讨论】：

使用普通提交（以及是什么让您认为您的模型与无法使用普通提交有关）
@StephenMuecke 因为正常提交不会将 UL 和 OL 转换为 List<...>
您的 <ol> 和 <li> 未发布 - 您的表单控件已发布，您只需正确命名它们即可绑定到您的模型。首先阅读答案here 和here（我建议您使用BeginCollectionItem() 方法
@StephenMuecke 所以，我不知道这个技巧。谢谢。如果您拟定了答案，我可以将其标记为正确并关闭问题

标签： javascript jquery asp.net asp.net-mvc forms

【解决方案1】：

如果你想重定向，你应该进行普通提交而不是 ajax（或者如果ModelState 无效，则能够返回视图并显示验证错误。使用 ajax 没有意义，因为 ajax 调用不重定向.

您尚未展示如何动态生成与您的WorkoutExerciseParam 集合关联的输入，但只需使用索引器正确命名它们，以便它们将被DefaultModelBinder 绑定。格式需要是

<input name="WorkoutExerciseParams[0].SomeProperty" .... />
<input name="WorkoutExerciseParams[0].AnotherProperty" .... />
<input name="WorkoutExerciseParams[1].SomeProperty" .... />
<input name="WorkoutExerciseParams[1].AnotherProperty" .... />
....

您可以使用 javascript 生成它，但更好的解决方案是使用BeginCollectionItem() 方法，如在回答

【讨论】：