基于下拉选择的显示值MVC

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

Model类

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>

在查看我加载所有用户在下拉列表中输入值。但是，当管理员选择任何用户时，用户的所有细节都必须显示在表格下。他在这里我很完美，但从这里被击中。如何前进如何根据下拉选择显示用户的详细信息。

来源

2017-04-05 Meghana

是否要在同一页面或另一个页面中显示用户的详细信息？ –

只有同一页。 – Meghana

然后，您需要为细节数据创建部分视图。并在下拉更改事件中调用ajax方法并获取数据并在部分视图中加载。 –

步骤

创建一个视图，在此可以显示特定用户的所有细节。

对用户更改进行Ajax调用，并通过控制器的局部视图从该用户获取特定的用户详细信息。

比HTML追加HTML结果。

这里

下拉的Html

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

阿贾克斯

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

精读troller

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

来源

2017-04-05 05:31:54

db.Users.find（id）;这里是什么用户..？ – Meghana

这是例如'db'是你的datacontaxt'users'是表实体，'find'是一个linq方法来查找表主键的记录。 –

是的，好吧..给它.. – Meghana

创建局部视图，这基本上是结合用于用户数据的细节。例如，您创建了一个名为userDetails.cshtml的部分视图。

添加模型参考类似波纹管的局部视图中，

@model Your_Project_Name.ModalFolderName.TaskDetails

你需要编写HTML代码里面详细说明了数据绑定局部视图。

假设你有ID =“mydetailsTable”你主视图，您要下拉菜单中选择后加载用户相关内容内一个div。

然后在drop down change事件中调用ajax方法，并获取数据并将其加载到mydetails表 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是我的下拉类。你需要添加。

动作方法会是这样，

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

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

来源

2017-04-05 05:43:07

基于下拉选择的显示值MVC

回答

相关问题