CODEWITHSUNDEEP
c#.netasp.net-mvcasp.net-mvc-4
Meghana
Meghana

Reputation: 65

Display Values based on dropdown selection MVC

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.

Upvotes: 3

Views: 18405

Answers (2)

Govinda Rajbhar
Govinda Rajbhar

Reputation: 3034

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

Upvotes: 3

Basanta Matia
Basanta Matia

Reputation: 1562

Create a partial view, which is basically to bind data for user details. For example you created a partial view called, userDetails.cshtml.

Add the model reference inside your partial view like bellow,

@model Your_Project_Name.ModalFolderName.TaskDetails

You need to write the html code inside details partial view to bind data.

Suppose you have a div with id="mydetailsTable" inside your main view, where you want to load the user details data after drop down select.

Then call an ajax method in drop down change event, and get the data and load it inside mydetailsTable div. check my bellow code,

$(".myDropdown").change(function() { 
 var id = $(this).val(); 
 $.ajax({
 type: 'GET',
 url: '/ControllerName/GetUserDetails/'+id,
 contentType: 'application/html; charset=utf-8',
 datatype: 'html',
 success: function (data) {
   $('#mydetailsTable').html('');
   $('#mydetailsTable').html(data);
  })
});

See, .myDropdown is my class of drop down. You need to add.

Your Action method will be like this,

public ActionResult GetUserDetails(int userId)
{
 //fetch the data by userId and assign in a variable, for ex: myUser
 return PartialView("userDetails",myUser);
}

That's it. Hope it helps :)

Upvotes: 0

Related Questions