How to update View using Ajax in asp.net mvc? - ajax

Question

I have a simple form with drop down list with people names(exhibitors). After I choose one of them and click link “Get Exhibitor data” I want to update only a part of my Home site and show data of chosen exhibitor.
Structure of my folders in project:
My home controller looks like follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication5.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public PartialViewResult GetExhibitorDataById(int? Id)
{
List<Exhibitor> exhibitors = new List<Exhibitor>()
{
new Exhibitor()
{
Id=1,
Name= "Tom",
Surname="Cruise"
},
new Exhibitor()
{
Id=2,
Name= "Jennifer",
Surname="Lopez"
},
};
if (Id == 1)
{
//return PartialView("_Exhibitor", exhibitors[0]);
Session["ExhibitorData"] = exhibitors[0];
return PartialView("_Exhibitor");
}
else if(Id==2)
{
//return PartialView("_Exhibitor", exhibitors[1]);
Session["ExhibitorData"] = exhibitors[1];
return PartialView("_Exhibitor");
}
else
{
//return PartialView("_Exhibitor", new Exhibitor());
Session["ExhibitorData"] = new Exhibitor();
return PartialView("_Exhibitor");
}
}
public class Exhibitor
{
public int Id { get; set; }
public string Name { get; set; }
public string Surname { get; set; }
}
}
}
My Index View code from Home folder looks like this:
#using WebApplication5.Controllers
<h2>Exhibitors</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
#Html.DropDownList("ExhibitorsList", new List<SelectListItem>
{
new SelectListItem {Text ="Tom Cruise", Value = "1" },
new SelectListItem {Text ="Jennifer Lopez", Value = "2" },
}, "Select Exhibitor" )
#Ajax.ActionLink("Get Exhibitor data", "GetExhibitorDataById", new { Id = 1 }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "divExhibitors", // ID of the HTML element to update
InsertionMode = InsertionMode.Replace // Replace the existing contents
})
<div id="divExhibitors">
</div>
But I would like to set parameter Id of Ajax.ActionLink, to value from DropDownList called “ExhibitorsList” and I don’t know how to do that.
Partial View code “_Exhibitor” looks like this:
#using WebApplication5.Controllers
<table>
#if (Session["ExhibitorData"] != null)
{
<tr>
<td>Id</td>
#*#{HomeController.Exhibitor exhibitor = ((HomeController.Exhibitor)(#Session["ExhibitorData"]))};*#
#*<td>#exhibitor.Id</td>*#
<td>#((HomeController.Exhibitor)(#Session["ExhibitorData"])).Id</td>
</tr>
<tr>
<td>Name</td>
<td>#((HomeController.Exhibitor)(#Session["ExhibitorData"])).Name</td>
</tr>
<tr>
<td>surname</td>
<td>#((HomeController.Exhibitor)(#Session["ExhibitorData"])).Surname</td>
</tr>
}
</table>
When I tried to run my app and then click Aajax.ActionLink something gone wrong because after I clicked Ajax.ActionLink I go to different url.
Home View:
After Clicked Ajax.ActionLink
What I want is to choose person name from dropdownlist, then click Ajax.ActionLink and get data of chosen person(exhibitor) without any redirect or refresh the site as I wrote at the beginning. Im also curious if it possible to do that only with one View- "Index" without using partialview.

Answer 1

As Stephen Muecke said you should change your controller ina View to pass model and show it:
Controller:
public PartialViewResult GetExhibitorDataById(int? Id)
{
List<Exhibitor> exhibitors = new List<Exhibitor>()
{
new Exhibitor()
{
Id=1,
Name= "Tom",
Surname="Cruise"
},
new Exhibitor()
{
Id=2,
Name= "Jennifer",
Surname="Lopez"
},
};
//here how you pass model to View
ViewData.Model = exhibitors.FirstOrDefault(x => x.Id == Id);
return PartialView("_Exhibitor");
}
Your View will be:
#model WebApplication5.Controllers.Exhibitor
#using WebApplication5.Controllers
<table>
#if (Model != null)
{
<tr>
<td>Id</td>
<td>#Model.Id</td>
</tr>
<tr>
<td>Name</td>
<td>#Model.Name</td>
</tr>
<tr>
<td>surname</td>
<td>#Model.Surname</td>
</tr>
}
</table>
What i did is make your View strongly typed with #model WebApplication5.Controllers.Exhibitor and then use your model properties to show data.

Answer 2

Finally I found the solution. "The problem was due to the corrupted unobtrusive-ajax.min.js file." I found post asp.net mvc partialview #Ajax.ActionLink doesn't work and I had the same problem. I uninstalled unobtrusive-ajax.min.js and intalled it once again. It was good solution in my case and now ajax works properly.