ASP.NET MVC3: Interaction between Partial View and

Question

I have a partial view for contact. Currently the index view shows this partial view for contact details. There is a save button inside the partial view to save the edited data. There is a validation for age while saving the edited data. This much is working fine.

Whenever user edit age and save it, I need to show the corresponding horoscope prediction on the main view. How do we achieve it?

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

//Home Controller

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

  }
 }

//Contact Controller

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

you'll need to create a new ViewModel to do this. This ViewModel (IndexViewModel.cs) would look something like this (I'm guessing at this):

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

you'd then use it in your controller index action (and view):

@model  MYContactEditPartialViewTEST.IndexViewModel

the idea being that you'd populate the HoroscopePrediction in a join between ContactEntity and AgeHoroscope (or via Linq etc) and thus show each line in the index as a complete object (showing contact and horoscope).

Answer 2

I would like just use jQuery to do ajax post and then change the parent view client side directly

Answer 3

As data is posted to "HomeController" and "Index" action, so changes are reflected when you change age in View.

Try to modify the home controller as follows,then it will work as expected.

1) Instead of having a list of AgeHoroscope, we can have a dictionary of age and prediction.

2) Create two Index Action for HttpGet and HttpPost as follows.

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

}