MVC에서 뷰에서 컨트롤러로 데이터를 전달하는 방법 3

Question

두 개의 연락처 (해당 연락처에 대한 전화 목록)로 ViewModel을 만들었습니다.

내 목표는 새 연락처에 대한 데이터를 추가하고 몇 가지 폰을 추가 한 다음 컨트롤러 작업으로 저장하는 것입니다.

내 연락처에 대한 스캐 폴딩 된 Create.cshtml을 편집하고 전화기에 대한 눈금을 추가했습니다. 휴대 전화를 만들기위한 자바 스크립트가 추가되었습니다. 여태까지는 그런대로 잘됐다.

문제는 내가 만들기 버튼을 클릭 할 때 컨트롤러로 돌아가서 전화기가 없습니다. 보기에서 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

이러한 폰 컬렉션에 대한 템플릿 만 표시 할 수 있습니다. 아무 가치도 서버에 전송되지 않습니다. 사용자가 값 또는 입력란을 편집하지 않아도된다면 숨겨진 필드를 사용할 수 있습니다.

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

을 한 후 나는 전화 콜렉션의 각 요소 (~/Views/Shared/EditorTemplates/Phone.cshtml) 렌더링 될 편집기 템플릿을 정의합니다 :

또한 나는 에디터 템플릿보기에서이 foreach 루프를 대체 할

을

@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 작업으로 간단히 다시 가져 오는 것입니다.