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做AJAX後，然後改變父視圖客戶端直接

Answer 2

你需要創建一個新的ViewModel來做到這一點。該視圖模型（IndexViewModel.cs）將是這個樣子（我在此猜測）：

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 

這個想法是，你可以在ContactEntity和AgeHoroscope之間的連接中（或通過Linq等）填充HoroscopePrediction，從而將索引中的每一行顯示爲一個完整的對象（顯示聯繫人和星座）。

Answer 3

當數據發佈到「HomeController」和「Index」操作時，所以當您在View中更改年齡時會反映更改。

嘗試按如下所示修改家庭控制器，然後按預期工作。

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); 
    } 

}