I have employeeId dropdown. I need to show the details of employee in the other fields based the empId picked on the form. Any example on how to do that?
I need to grab the details from the database when an employee is picked.
The only way I can think of accomplishing your goal is to do some sort of PostBack when the dropdown is selected.
And since a View doesn't have the ability (to my knowlege) to do a post back, your best bet is going to be to use JQuery or JavaScript to do the post back to your Controller.
Your Controller should have an action to get the employee details. Instead of ActionResult the return type can be JsonResult.
When user selects an item in the dropdown you can do a jQuery POST to this action to get the employee details by passing the id. Try something like this.
$("#MyDropDown").change(function(e) {
return GetEmployeeDetails();
});
function GetEmployeeDetails() {
// do a jQuery POST
}
Now display the details from the JSON you receive.
@Html.DropDownListFor(model=>model.employeeID,null,"Please select a value", new{@id="lstEmployee", @onchange="getEmployeeDetails()"})
Then in your jquery i would have something like this.
function getEmployeeDetails(){
if("#lstEmployee").val()!=""{
$.post("/ControllerName/ActionName",
{employeeID: $("#lstEmployee").val()},
function (data){
$("#employeeDetailsDiv").html(data)}
};
And your controller would look something like this.
public actionResult getEmployeeDetails(int employeeID)
{
//Get employee details here.
return PartialView("path to a partial view to display", employeeDetailsModel)
}
THen create a partial view to display the details. Easy, re-usable in other applications etc.
I have this code.. the RegionId is not changing based on the selection of the dropdown.. Any ideas?
//********Controller Code
public ActionResult GetRegion(int? area)
{
var cm = new ConnectionManager();
string regionId = cm.GetRegionId(area);
ViewData["RegionId"] = regionId;
return RedirectToAction("Edit");
}
//**********View Code
// Change event handler to the first drop down ( Area List )
$("#Area").change(function() {
$.ajax({
type: 'GET',
url: "@Url.Action("GetRegion", Url.RequestContext.RouteData.Values)" + "?area=" + $("#Area").val(),
data: "{}",
success: function() { console.log("Good"); },
error: function() { console.log("Errrr"); }});;
});
I changed my code a little more...still not working though...
//********Controller Code
public ActionResult GetRegion(int? area)
{
var cm = new ConnectionManager();
string regionId = cm.GetRegionId(area);
ViewData["RegionId"] = regionId;
return RedirectToAction("Edit");
}
//**********View Code
// Change event handler to the first drop down ( Area List )
$("#Area").change(function() {
GetRegion();
});
public class State
{
public int Id { get; set; }
public string Name { get; set; }
}
public ActionResult GetStates()
{
IEnumerable<State> states = manager.GetStates();
return View(states);
}
[HttpGet]
public ActionResult GetCountry(int? stateId)
{
var countryName = manager.GetCountryName(stateId);
return Content(countryName);
}
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#StateDropDown").change(function () {
$.ajax({
type: 'GET',
url: '<%=Url.Action("GetCountry") %>' + '?stateId=' + this.value,
data: {},
success: function (result) {
alert(result);
},
error: function () { alert('Error'); }
});
});
});
</script>
<%=Html.DropDownList("stateDropDown", new SelectList(Model, "Id", "Name"), new { id = "StateDropDown" })%>
nissan
Participant
1065 Points
618 Posts
Dropdown selected index changed - MVC Razor
Mar 08, 2012 08:25 PM|LINK
Hello,
I have employeeId dropdown. I need to show the details of employee in the other fields based the empId picked on the form. Any example on how to do that?
I need to grab the details from the database when an employee is picked.
eric2820
Contributor
2777 Points
1161 Posts
Re: Dropdown selected index changed - MVC Razor
Mar 08, 2012 08:37 PM|LINK
The only way I can think of accomplishing your goal is to do some sort of PostBack when the dropdown is selected.
And since a View doesn't have the ability (to my knowlege) to do a post back, your best bet is going to be to use JQuery or JavaScript to do the post back to your Controller.
http://www.my-msi.net/Admin
blog
If a post helps you, please mark it as Ansered, thank-you.
jerryjoseph
Contributor
6740 Points
1257 Posts
Re: Dropdown selected index changed - MVC Razor
Mar 08, 2012 09:35 PM|LINK
Your Controller should have an action to get the employee details. Instead of ActionResult the return type can be JsonResult.
When user selects an item in the dropdown you can do a jQuery POST to this action to get the employee details by passing the id. Try something like this.
$("#MyDropDown").change(function(e) { return GetEmployeeDetails(); }); function GetEmployeeDetails() { // do a jQuery POST }Now display the details from the JSON you receive.
linkedin | twitter | www.jerryjoseph.net
ricka6
All-Star
15070 Points
2272 Posts
Microsoft
Moderator
Re: Dropdown selected index changed - MVC Razor
Mar 09, 2012 05:52 PM|LINK
My blog Cascading DropDownList in ASP.Net MVC does exactly this. See also Working with the DropDownList Box and jQuery
alm1
Member
133 Points
60 Posts
Re: Dropdown selected index changed - MVC Razor
Mar 09, 2012 07:16 PM|LINK
you could create a dropdown as such
@Html.DropDownListFor(model=>model.employeeID,null,"Please select a value", new{@id="lstEmployee", @onchange="getEmployeeDetails()"})Then in your jquery i would have something like this.
function getEmployeeDetails(){ if("#lstEmployee").val()!=""{ $.post("/ControllerName/ActionName", {employeeID: $("#lstEmployee").val()}, function (data){ $("#employeeDetailsDiv").html(data)} };And your controller would look something like this.
public actionResult getEmployeeDetails(int employeeID) { //Get employee details here. return PartialView("path to a partial view to display", employeeDetailsModel) }THen create a partial view to display the details. Easy, re-usable in other applications etc.
nissan
Participant
1065 Points
618 Posts
Dropdownlist changed..
Mar 19, 2012 05:36 PM|LINK
I have this code.. the RegionId is not changing based on the selection of the dropdown.. Any ideas?
//********Controller Code
public ActionResult GetRegion(int? area)
{
var cm = new ConnectionManager();
string regionId = cm.GetRegionId(area);
ViewData["RegionId"] = regionId;
return RedirectToAction("Edit");
}
//**********View Code
// Change event handler to the first drop down ( Area List )
$("#Area").change(function() {
$.ajax({
type: 'GET',
url: "@Url.Action("GetRegion", Url.RequestContext.RouteData.Values)" + "?area=" + $("#Area").val(),
data: "{}",
success: function() { console.log("Good"); },
error: function() { console.log("Errrr"); }});;
});
<select id="Area">
<option value="">None</option>
@foreach (var arearow in (List<SMS.Website.Models.Area>)ViewBag.AreaCodes)
{
<option value="@arearow.AreaId">@arearow.AreaName (@arearow.AreaName)</option>
}
</select>
<b>Region:</b> <span id="RegionId">@ViewData["RegionId"]</span>
nissan
Participant
1065 Points
618 Posts
Re: Dropdown selected index changed - MVC Razor
Mar 19, 2012 05:50 PM|LINK
Hello alm1,
I think.. you told me what I wnated.. but i am not able still get it.. I posted my new post at http://forums.asp.net/p/1782413/4888033.aspx/1?p=True&t=634677609692729108 just in case this thread does not get noticed..
nissan
Participant
1065 Points
618 Posts
Re: Dropdownlist changed..
Mar 19, 2012 06:00 PM|LINK
I changed my code a little more...still not working though...
//********Controller Code
public ActionResult GetRegion(int? area)
{
var cm = new ConnectionManager();
string regionId = cm.GetRegionId(area);
ViewData["RegionId"] = regionId;
return RedirectToAction("Edit");
}
//**********View Code
// Change event handler to the first drop down ( Area List )
$("#Area").change(function() {
GetRegion();
});
function GetRegion()
{
if($('#Area').val()!=""){
$.ajax({
type: 'GET',
url: "@Url.Action("GetRegion", Url.RequestContext.RouteData.Values)" + "?area=" + $("#Area").val(),
data: "{}",
success: function() { $("#RegionId").text(@ViewData["RegionId"]); },
error: function() { console.log("Bad"); }});;
}
}
<select id="Area">
<option value="">None</option>
@foreach (var arearow in (List<SMS.Website.Models.Area>)ViewBag.AreaCodes)
{
<option value="@arearow.AreaId">@arearow.AreaName (@arearow.AreaName)</option>
}
</select>
<b>Region:</b> <span id="RegionId">@ViewData["RegionId"]</span>
ramankashyap
Member
178 Points
43 Posts
Re: Dropdownlist changed..
Mar 19, 2012 06:57 PM|LINK
public class State { public int Id { get; set; } public string Name { get; set; } } public ActionResult GetStates() { IEnumerable<State> states = manager.GetStates(); return View(states); } [HttpGet] public ActionResult GetCountry(int? stateId) { var countryName = manager.GetCountryName(stateId); return Content(countryName); }<script language="javascript" type="text/javascript"> $(document).ready(function () { $("#StateDropDown").change(function () { $.ajax({ type: 'GET', url: '<%=Url.Action("GetCountry") %>' + '?stateId=' + this.value, data: {}, success: function (result) { alert(result); }, error: function () { alert('Error'); } }); }); }); </script> <%=Html.DropDownList("stateDropDown", new SelectList(Model, "Id", "Name"), new { id = "StateDropDown" })%>ricka6
All-Star
15070 Points
2272 Posts
Microsoft
Moderator
Re: Dropdownlist changed..
Mar 19, 2012 07:08 PM|LINK
Please don't keep creating new threads on the same question. Please go through
My blog Cascading DropDownList in ASP.Net MVC - if you need to, modify my code and explain why it doen't solve your problem.