如何將數據從視圖傳遞到MVC中的控制器3

Question

我已經創建了一個ViewModel，其中包含Contact和該Contact的Phones列表。

我的目標是爲新聯繫人添加數據，並添加幾個電話，然後通過Controller操作保存。

我編輯了我的聯繫人的腳手架Create.cshtml，爲手機添加了一個網格。增加了一個用於創建手機的JavaScript。到現在爲止還挺好。

問題是當我點擊創建按鈕，我回到控制器，我沒有電話。我如何（在視圖中）將電話行添加到我的IEnumerable中？

編輯： 拿出代碼在視圖中，在這種情況下是不正確的。

我的視圖模型：

public class ContactViewModel 
{ 
    public Contact Contact {get; set;} 
    public IEnumerable<Phone> Phones { get; set; }  
} 

我的觀點：

@model PilotKibsNet.Controllers.ContactViewModel  
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.js"></script> 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

<script type="text/javascript"> 

    function Add() { 
     $("#tbl > tbody:last").append("<tr><td>" + $("#Number").val() + "</td><td>" + $("#Kind").val() + "</td><td></td></tr>"); 

     $("#Number").val(""); 
     $("#Kind").val(""); 
    } 

</script> 
@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>Contact</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Contact.Name) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Contact.Name) 
      @Html.ValidationMessageFor(model => model.Contact.Name) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Contact.Address) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Contact.Address) 
      @Html.ValidationMessageFor(model => model.Contact.Address) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Contact.City) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Contact.City) 
      @Html.ValidationMessageFor(model => model.Contact.City) 
     </div> 


     <legend>Phone numbers</legend> 
     <label>Number :</label>    
     @Html.TextBox("Number") 
     <label>Kind :</label> 
     @Html.TextBox("Kind") 
     <input type="button" value="Add" onclick="Add()" /> 

     <table id="tbl"> 
      <tr> 
       <th> 
        Phone 
       </th> 
       <th> 
        Kind 
       </th> 
       <th></th> 
      </tr> 

     <tbody> 
     </tbody> 
     </table> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

，然後在由控制器動作，跟有數據，但手機是一個空列表。

[HttpPost] 
    public ActionResult Create(ContactViewModel contactViewModel) 
    { 
     if (ModelState.IsValid) 
     { 
      contactViewModel.Contact.id = Guid.NewGuid(); 

      db.Contacts.AddObject(contactViewModel.Contact); 
      db.SaveChanges(); 
      return RedirectToAction("Index"); 
     } 

     return View(contactViewModel.Contact); 
    } 

如何讓手機回到服務器？！？

Answer 1

您只能顯示這些Phones集合的模板。根本沒有值將被髮送到服務器。如果用戶不應該編輯值或文本框，您可以使用隱藏字段。

另外我想由一個編輯模板替換在您看來這個foreach循環：

if (Model != null) 
{ 
    @Html.EditorFor(x => x.Phones) 
} 

，然後我將定義哪些會被渲染爲手機集合中的每個元素（~/Views/Shared/EditorTemplates/Phone.cshtml）編輯模板：

@model Phone 
<tr> 
    <td> 
     @Html.DisplayFor(x => x.Number) 
     @Html.HiddenFor(x => x.Number) 
    </td> 
    <td> 
     @Html.DisplayFor(x => x.Type) 
     @Html.HiddenFor(x => x.Type) 
    </td> 
    <td> 
     @Html.ActionLink("Edit", "Edit", new { id = Model.id }) | 
     @Html.ActionLink("Details", "Details", new { id = Model.id }) | 
     @Html.ActionLink("Delete", "Delete", new { id = Model.id }) 
    </td> 
</tr> 

我在這裏使用了隱藏字段來保存模型的值，以便當您將表單發佈到服務器時，它們將被髮送。

另一個和恕我直言，更好的方法，如果用戶不應該編輯表中的這些值是簡單地在您的數據庫中的POST操作中重新提取它們。