Display Values based on dropdown selection MVC

Question

I have a requirement which I need to display details based on drop down selection. These details coming from database. when I click one user all then all the details belong to that user has to be displayed.

Model class

public class TaskDetails
{
    public string ProjectID { get; set; }
    public string ProjectName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EstimatedDate { get; set; }
    public string TaskDescription { get; set; }
}

Controller

List<SelectListItem> query = DE.tblEmployees.Select(c => new SelectListItem 
                            { Text = c.Name, Value = c.Name }).ToList();
ViewBag.Categories = query;
return View();

View

<div class="dropdown">
     @Html.DropDownList("CategoryID", (List<SelectListItem>)ViewBag.Categories, "--User Name--")
</div>

In the View I am loading all the user values inside the drop down. But when admin selects any of the user then all the details of user has to be displayed under a table. Upto here I am perfect but from here got strucked. How to move forward how to show the details of the user based on dropdown selection.

Answer 1

Steps

1. Create A view Where you can display all details of particular user.

2. Make Ajax call on user change and fetch specific user details from that use with partial view from controller.

3. Than append that html result to your html.

As Here

Drop Down Html

 <div class="dropdown">
        @Html.DropDownList("CategoryID", (List<SelectListItem>)ViewBag.Categories, "--User Name--")
    </div>

Ajax

 $("#CategoryID").change( function (event) {
      var userId = $(this).val();
        $.ajax({
            url: "@Url.Action("GetUser","Controller")",
            data: { id : userId },
            type: "Get",
            dataType: "html",    
            success: function (data) {
                //Whatever result you have got from your controller with html partial view replace with a specific html.
                $("#divPartialView").html( data ); // HTML DOM replace
            }
        });
    });

Controller

public PartialViewResult GetUser(int id /* drop down value */)
{
    var model = db.Users.find(id); // This is for example put your code to fetch record.   
    return PartialView("MyPartialView", model);
}