Как добавить новый объект, содержащий список новых объектов в ASP.MVC

Question

У меня есть класс foo:

public class Foo { 
    public String Name; 
    public List<bar> BarList; 
} 

Слой данных моего приложения только принимает новый foo, если она содержит по крайней мере один новый bar.

Мне нужно иметь представление, которое позволяет создать новый foo и добавить как можно больше bar, который затем будет отправлен на уровень данных приложения.

До сих пор я мог опубликовать данные для нового foo, но мне не удалось создать список bar в представлении, которое будет опубликовано с ним. У меня такое ощущение, что мне нужно будет использовать частичные виды, однако я не смог заставить их работать правильно.

Answer 1

Модель: Прежде всего, необходимо иметь свойства (с приготовьтесь оба)

public class Foo 
{ 
    public string Name 
    { 
     get; set; 
    } 
    public List<Bar> BarList 
    { 
     get; set; 
    } 
} 
public class Bar 
{ 
    public string Name{ 
     get; set; 
    } 
} 

Вид: В MVC, если имя любого элемента управления HTML в синхронизации с моделью, то значение этого элемента управления HTML будет автоматически привязываться к этому свойству.

@model Foo 
@using (Html.BeginForm("Index", "Default", FormMethod.Post)) 
{ 
<span> Name:</span> 
@Html.TextBoxFor(m => m.Name) 
<span> List of Bars</span> 
for (int i = 0; i < 10; i++) 
{ 
    @Html.TextBoxFor(m => m.BarList[i].Name) 
    //or 
    // <input type="text" name="BarList[@i].Name" /> 

} 
<input type="submit" value="save" /> 
} 

нажмите кнопку (отправить форму), и полные данные будут привязаны к параметру foo вашего действия.

Контроллер:

[HttpPost] 
    public ActionResult Index(Foo foo) 
    { 
     return View(); 
    } 

Отредактировано: Если вы хотите добавить динамические строки, то ниже код добавить новую кнопку и DIV, где вы будете добавлять новые строки

<div id="divBar"></div> 
<button type="button" onclick="AddnewRow()">Add new Row</button> 

объявить jquery

<script> 
var i=0; 
function AddnewRow() 
{ 
    var string = '<input type="text" name="BarList[' + i + '].Name" /><br/>'; 
    $('#divBar').append(string); 
    i = i + 1; 
} 
</script> 

Полная Па GE после выполнения этого

<script src="~/scripts/jquery-1.10.2.min.js"></script> 
@using (Html.BeginForm("Index", "Default", FormMethod.Post)) 
{ 
<span> Name:</span> 
@Html.TextBoxFor(m => m.Name) 
<span> List of Bars</span> 

<div id="divBar"></div> 
<button type="button" onclick="AddnewRow()">Add new Row</button> 
<input type="submit" value="save" /> 
} 
<script> 
var i=0; 
function AddnewRow() 
{ 
    var string = '<input type="text" name="BarList[' + i + '].Name" /><br/>'; 
    $('#divBar').append(string); 
    i = i + 1; 
}