ASP.NET MVC 5 - "Create" 视图可以基于单击 "Add row" 按钮处理 IEnumerable 的任意数量的元素？

Question

我正在用 C#/.NET MVC 5 为我的妻子编写食谱管理器。我正在访问创建食谱的页面，但我有点困惑。食谱由名称和成分列表组成。

当我创建视图时，我有我的表单：

@using(Html.BeginForm()){
    //Form elements
    @Html.DisplayNameFor(x => Model.Name)
    //button for adding a new ingredient to the recipe 
    <input type="submit" text="Submit New Recipe!" />
}

当点击添加成分的按钮时，它应该在按钮本身正上方的表单中呈现一个 html 块，这样用户就可以添加任意数量的成分，然后提交食谱当表单回发到控制器时返回。

对于这个功能，我应该让按钮调用一个发送回部分视图或其他东西的控制器吗？我不确定如何在 JavaScript 之外完成此操作，但如果可以的话，我想使用 .NET MVC 解决方案。

Answer 1

我尽量减少对 javascript 的依赖，但我同意 @br4d 的观点，即淘汰赛是你最好的选择。如果您想不惜一切代价避免它，它会更复杂、更慢并且不那么用户友好，但我会这样做。

将表格括在 div 中。在表格内有一个占位符 div 来保存您的配料表。将 "Add new ingredient" 调用到控制器中，该控制器将 return 具有必填字段的部分视图。在目标属性中指示占位符 div 作为更新目标，并通过指定 InsertionMode.InsertAfter.

将响应附加到占位符 div 的 html

<div id="parentDiv">
    @Html.BeginForm........
        @Ajax.ActionLink("Add New Ingredient","ActionName","ControllerName",routeValues,
                     new AjaxOptions
                    {
                        UpdateTargetId = "ChildDiv",
                        InsertionMode = InsertionMode.InsertAfter
                    }
        <div id=ChildDiv>
        </div>
</div>

此代码绝不是全面的或生产就绪的（我更喜欢有一种方法来处理失败的 ajax 调用，您可能想阻止交互，直到调用返回只是提到两个增强功能）。再一次，KnockOut 将是执行此操作的首选方法。