ASP.NET MVC 5-通过单击“添加行”按钮可以处理IEnumerable的任意数量的元素的“创建”视图？

Question

I am writing a recipe manager for my wife in C#/.NET MVC 5. I'm getting to the page for creating a recipe, and I'm a little stumped. A recipe consists of a Name and a list of ingredients.

When I create a view, I have my form:

@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!" />
}

When the button for adding an ingredient is clicked, it should render a block of html inside the form just above the button itself, that way the user can add any number of ingredients and then submit the recipe back when the form is posted back to the controller.

For this functionality, should I make the button call a controller that sends back a partial view or something? I'm not sure how to accomplish this outside of JavaScript, but I'm wanting to use a .NET MVC solution if I can.

Answer 1

I try to minimize my reliance on javascript whenever I can, however I agree with @br4d that knockout is your best option here. If you want to avoid it at all cost, it will be more complex, slower and not as user friendly but here is how I would do it.

Enclose the form in a div. Have a place holder div inside the form to hold your ingredients list. Make the "Add new ingredient" call into a controller that will return a partial view with the required fields. In the target attribute indicate the place holder div as the update target and append the response to the html of the place holder div by specifying InsertionMode.InsertAfter.

<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>

This code is by no means comprehensive or production ready (I prefer to have a way of handling failed ajax calls and you might want to block off interactions until the call comes back just to mention two of the enhancements). Once again KnockOut would be the preferred way to do this.