MVC 3動態一個ViewModel添加到瀏覽

我也有類似的這些部分的ViewModels：MVC 3動態一個ViewModel添加到瀏覽

public class ResturantViewModel 
{ 
    public ResturantViewModel() 
    { 
     Clients.Add(new ClientViewModel()); 
    } 
    public string MyProperty {get;set;} 
    public IList<ClientViewModel> Clients = new List<ClientViewModel>(); 
} 

public class ClientViewModel 
{ 
    public string FirstName {get;set;} 
    public string LastName {get;set;} 
}

在我看來，我有這樣的：

@foreach(var client in Model.Clients) 
{ 
    <tr> 
     <td>First Name: @Html.EditorFor(item => client.FirstName)</td> 
     <td>Last Name: @Html.EditorFor(item => client.LastName)</td> 
    </tr> 
}

我想有一個按鈕它可以將一些新的空白ClientViewModel添加到ResturantViewModel.Clients列表中，以便它可以在視圖中呈現併發布到Resturant/Create操作。

在此先感謝

來源

2011-12-13 parajao

將您的foreach放入表單並將表單動作綁定到控制器的動作。 – Maess

你可以看看的following blog post。它使用WebForms視圖引擎，但它可以很容易地適應Razor。

來源

2011-12-13 15:24:35

你需要實現對象的列表視圖中

<input type="text" name='Clients[@index].FirstName' value='@c.FirstName' /> 
    <input type="text" name='Clients[@index].LastName' value='@c.LastName' /> 

@index++;

後

你必須克隆與下一個索引值這些領域，所以你必須有這樣的投入：

<input type="text" name='Clients[0].FirstName' value='@c.FirstName' /> 
<input type="text" name='Clients[0].LastName' value='@c.LastName' /> 

<input type="text" name='Clients[1].FirstName' value='@c.FirstName' /> 
<input type="text" name='Clients[1].LastName' value='@c.LastName' /> 
<input type="text" name='Clients[2].FirstName' value='@c.FirstName' /> 
<input type="text" name='Clients[2].LastName' value='@c.LastName' />

在控制器中，您將接受這些對象的列表：

List<Client> Clients

來源

2011-12-13 15:29:27

好的，謝謝大家這是我所做的解決。

首先我創建了一個新的局部視圖_ClientRow.cshtml：

@using Extensions.CollectionItemsHtmlExtension 
@using ClientViewModel 
@model ClientViewModel 
<div class = "clientEditRow"> 
    @using(Html.BeginCollectionItem("Clients")) 
    { 
     @First Name: @Html.TextBoxFor(c=>c.FirstName) 
     @Last Name: @Html.TextBoxFor(c=>c.LastName) 
    } 
</div>

這部分視圖呈現爲一個客戶端的新線。 BeginCollectionItem是一個Html擴展，下面提到了Darin博客帖子。

然後在我看來，我設置：

<legend>Clients</legend> 
<fieldset> 
    <div id="clientEditorRows"> 
     @foreach(var client in Model.Clients) 
     { 
      Html.RenderPartial("_ClientRow", client); 
     } 
    </div> 
    @Html.ActionLink("New Client", "NewClientRow", null, new {id = "addItem"}) 
</fieldset> 
... 
<script type="text/javascript" scr="../Scripts/listEditor.js"></script>

在foreach循環遍歷所有的客戶，並呈現爲每個客戶端的局部視圖。然後在我的控制，我寫這個方法：

public PartialViewResult NewClientRow() 
{ 
    return PartialView("_ClientRow", new ClientViewModel()) 
}

此方法由ActionLink的調用，並返回的HTML的一個新行追加到以前行。後來我從博客中添加了這個JavaScript文件代碼，並將其修改爲我的情況：

listEditor.js 

$("#addItem").click(function() { 
    $.ajax({ 
     url: this.href, 
     cache: false, 
     success: function (html) { $("#clientEditorRows").append(html); } 
    }); 
    return false; 
});

這JS代碼追加新線到頁面的HTML。希望這可以幫助，再次感謝你。

亞歷

PS：在HttpPost方法接收的值並沒有被修改，有這個簽名

[HttpPost] 
public ActionResult Create(ResturantViewModel resturantVM) 
{ 
    ... 
}

需要注意的是resturantVM.Clients接收所有的值，沒有必要添加的IList客戶端參數

來源

2011-12-23 19:27:01 parajao

MVC 3動態一個ViewModel添加到瀏覽

回答

相關問題