Question

我有一个要求，我需要根据下拉选择显示详细信息。这些细节来自数据库。当我点击一个用户时，所有细节都属于该用户必须显示的内容。

模型类

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

控制器

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

查看

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

在视图中我正在加载下拉列表中的所有用户值。但是当管理员选择任何用户时，用户的所有细节都必须显示在表格下。到了这里，我很完美但是从这里开始了。如何根据下拉选择向前推进如何显示用户的详细信息。

Answer 1

步骤

创建视图您可以在其中显示特定用户的所有详细信息。



在用户更改时调用Ajax，并从控制器的部分视图中获取该用户的特定用户详细信息。



将html结果附加到您的html。

在这里

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

控制器

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

Answer 2

创建部分视图，基本上是绑定用户详细信息的数据。例如，您创建了一个名为userDetails.cshtml的部分视图。

在局部视图中添加模型参考，如bellow，

@model Your_Project_Name.ModalFolderName.TaskDetails

您需要在详细信息部分视图中编写html代码以绑定数据。

假设您在主视图中有一个 id =“mydetailsTable”的div，您希望在下拉选择后加载用户详细信息数据。

然后在下拉更改事件中调用ajax方法，并获取数据并将其加载到 mydetailsTable div中。检查我的波纹管代码，

$(".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);
  })
});

看，.myDropdown是我的下拉类。你需要添加。

你的Action方法将是这样的，

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

就是这样。希望它有所帮助：）

根据下拉选择MVC显示值

2 个答案: