基於下拉選擇的顯示值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

回答

相關問題