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

}

ЧТЕНИЕ

1. ASP.Net MVC Передача нескольких параметров в представление

2. ASP.Net MVC 3 RC2, обработка форм с частичным просмотром

Answer 1

Я хотел бы просто использовать jQuery для публикации ajax, а затем напрямую изменить клиентскую сторону родительского представления

Answer 2

Поскольку данные публикуются в действиях «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);
    }

}

Answer 3

вам нужно создать новую ViewModel для этого.Этот 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; }
}

затем вы будете использовать его в своем действии индекса контроллера (и в представлении):

@model  MYContactEditPartialViewTEST.IndexViewModel

идея заключается в том, что вы заполнили бы HoroscopePrediction в соединении между ContactEntity и AgeHoroscope (или через Linq и т. Д.) И таким образом показали бы каждую строку в индексе как полный объект (показывая контакт и гороскоп).