ASP.NET MVC 5 "创建"视图，该视图可以通过单击“添加行”来处理IEnumerable的

本文关键字：视图 添加行 quot IEnumerable 处理 单击 MVC NET 创建 ASP 可以通过 | 更新日期: 2023-09-27 17:53:42

我正在用c#/为我的妻子写一个食谱管理器。asp.net MVC 5。我要到创建食谱的页面了，我有点难住了。菜谱由一个Name和一组配料组成。

当我创建一个视图时，我有我的表单:

@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解决方案。

ASP.NET MVC 5 "创建"视图，该视图可以通过单击“添加行”来处理IEnumerable的

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

将表单包含在div中。在表单中使用占位符div来保存成分列表。将"Add new ingredient"调用添加到一个控制器中，该控制器将返回一个包含所需字段的部分视图。在target属性中，将占位符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将是完成此操作的首选方法。

相关文章：