ASP.NET MVC3 : 부분 뷰와 기본 뷰 간의 상호 작용

Question

연락처 부분 뷰가 있습니다. 현재 색인보기는 연락처 세부 사항에 대한 부분보기를 표시합니다. 편집 된 데이터를 저장하기 위해 부분보기 안에 저장 단추가 있습니다. 편집 된 데이터를 저장하는 동안 연령에 대한 유효성 검사가 있습니다. 이 정도면 잘 작동합니다.

사용자가 나이를 편집하고 저장할 때마다 기본보기에서 해당 운세 예측을 표시해야합니다. 우리는 어떻게 그것을 성취합니까?

public class ContactEntity 
{ 
    public int ContactID { get; set; } 
    public string ContactName { get; set; } 

    [Range(18, 50, ErrorMessage = "Must be between 18 and 50")] 
    public int ContactAge { get; set; } 
} 

public class AgeHoroscope 
{ 
    public int Age { get; set; } 
    public string HoroscopePrediction { get; set; } 
} 

// 홈 컨트롤러

namespace MYContactEditPartialViewTEST.Controllers 
{ 
public class HomeController : Controller 
{ 

    List<AgeHoroscope> horoList = new List<AgeHoroscope>() 
    { 
     new AgeHoroscope{Age=16,HoroscopePrediction="You are confused"}, 
     new AgeHoroscope{Age=26,HoroscopePrediction="You are very brilliant"}, 
     new AgeHoroscope{Age=27,HoroscopePrediction="You are practical"} 
    }; 

    public ActionResult Index() 
    { 
     AgeHoroscope selectedHoro = horoList[1]; 
     return View(selectedHoro); 
    } 

    } 
} 

// 연락 컨트롤러

namespace MYContactEditPartialViewTEST.Controllers 
{ 
public class ContactController : Controller 
{ 

    public PartialViewResult MyContactDetailEdit() 
    { 
     Thread.Sleep(500); 
     return PartialView(GetContact()); 
    } 


    [HttpPost] 
    public PartialViewResult MyContactDetailEdit(string conatcclick) 
    { 
     //Save to database 
     Thread.Sleep(500); 
     return PartialView(GetContact()); 
    } 


    private ContactEntity GetContact() 
    { 
     ContactEntity contactEntity = new ContactEntity(); 
     contactEntity.ContactID = 1; 
     contactEntity.ContactName = "Lijo"; 
     contactEntity.ContactAge = 26; 
     return contactEntity; 
    } 

} 
} 

//Index.cshtml

@model MYContactEditPartialViewTEST.AgeHoroscope 
@{ 
ViewBag.Title = "Index"; 
} 

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



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

<h2> 
    Index</h2> 

<div> 
<a>Your age is <b>@Html.DisplayFor(x => x.Age) </b>and the prediction is <b>" @Html.DisplayFor(x => x.HoroscopePrediction) 
    " </b></a> 
<br /> 
</div> 
<div style="border: 3px solid Teal"> 
@Html.Action("MyContactDetailEdit", "contact") 
</div> 

// MyContactDetailEdit.cshtml

@model MYContactEditPartialViewTEST.ContactEntity 


@using (Html.BeginForm()) 
{ 
@Html.ValidationSummary(true) 

<h3>MyContactDetailEdit PARTIAL</h3> 

<div> 
@Html.HiddenFor(x => x.ContactID) 
<br /> 
<div style="font-weight:bold"> 
    Name: 
    <br /> 
</div> 
@Html.DisplayFor(x => x.ContactName) 
<br /> 
<br /> 
<div style="font-weight:bold"> 
    Age 
    <br /> 
</div> 
@Html.EditorFor(x => x.ContactAge) 
@Html.ValidationMessageFor(model => model.ContactAge) 
<br /> 
<br /> 
</div> 

<input type="submit" id="saveButton" value="Save" /> 

} 

READING

1. ASP.Net MVC Passing multiple parameters to a view

2. ASP.Net MVC 3 RC2, Partial Views Form Handling

는

Answer 1

난 그냥 다음 아약스 게시물을 수행하고 jQuery를 사용 좋아할

변경상위 뷰 클라이언트 측 직접

Answer 2

이렇게하려면 새 ViewModel을 만들어야합니다.

public class IndexViewModel 
{ 
    public int ContactID { get; set; } 
    public string ContactName { get; set; } 
    public int ContactAge { get; set; } 
    public string HoroscopePrediction { get; set; } 
} 

당신이 다음 컨트롤러의 index 액션 (볼)에서 사용하는 것 :

@model MYContactEditPartialViewTEST.IndexViewModel 

이 뷰 모델 (IndexViewModel.cs)이 같은 (I이 추측하고있어)를 볼 것

아이디어는 ContactEntity와 AgeHoroscope (또는 Linq 등) 간의 조인에서 HoroscopePrediction을 채우고 색인의 각 줄을 전체 개체 (연락처 및 별점 표시)로 표시한다는 아이디어입니다.

Answer 3

데이터가 "HomeController"및 "Index"작업에 게시되므로보기에서 나이를 변경하면 변경 사항이 반영됩니다.

다음과 같이 홈 컨트롤러를 수정하면 예상대로 작동합니다.

1) AgeHoroscope 목록이없는 대신 연령 및 예측 사전을 사용할 수 있습니다.

2) 다음과 같이 HttpGet 및 HttpPost에 대한 두 개의 색인 작업을 만듭니다.

public class HomeController : Controller 
{ 

    Dictionary<int, string> AgePred = new Dictionary<int, string>() 
    { 
    {16,"You are confused"}, 
    {26,"You are very brilliant"}, 
    {27,"You are practical"} 
    }; 

    [HttpGet] 
    public ActionResult Index() 
    { 
     AgeHoroscope selectedHoro = new AgeHoroscope() { Age = 26 }; 
     selectedHoro.HoroscopePrediction = AgePred[selectedHoro.Age]; 
     return View(selectedHoro); 
    } 
    [HttpPost] 
    public ActionResult Index(AgeHoroscope model,ContactEntity entity) 
    { 
     model.Age = entity.ContactAge; 
     model.HoroscopePrediction = AgePred[entity.ContactAge]; 
     return View(model); 
    } 

}