基于下拉选择 MVC 显示值答案

【问题标题】：Display Values based on dropdown selection MVC基于下拉选择 MVC 显示值
【发布时间】：2017-04-05 05:11:19
【问题描述】：

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

模型类

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>

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

【问题讨论】：

你想在同一个页面或另一个页面显示用户的详细信息？
仅同一页。
那么你需要为细节数据创建一个局部视图。并在下拉更改事件中调用 ajax 方法并获取数据并在部分视图中加载。
见我下面的回答。

标签： c# .net asp.net-mvc asp.net-mvc-4

【解决方案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);
}

【讨论】：

db.Users.find(id);这是什么用户..？？
例如db是你的datacontaxt users是表实体，find是从表主键中查找记录的linq方法。

【解决方案2】：

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

在局部视图中添加模型参考，如下所示，

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

就是这样。希望对你有帮助:)

【讨论】：