ドロップダウン選択に基づく値表示MVC

Question

ドロップダウン選択に基づいて詳細を表示する必要があります。これらの詳細はデータベースからのものです。あるユーザーをクリックすると、そのユーザーに属するすべての詳細が表示されます。

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> 

ユーザーの値はドロップダウン内にあります。しかし、管理者がユーザーのいずれかを選択すると、ユーザーのすべての詳細を表の下に表示する必要があります。ここまで私は完璧ですが、ここから殴られました。ドロップダウン選択に基づいてユーザーの詳細を表示する方法を進める方法。

Answer 1

ステップ

1. あなたが特定のユーザーのすべての詳細情報を表示できるビューを作成します。

2. Ajaxがユーザーの変更を呼び出すようにして、コントローラからの部分的なビューを使用して特定のユーザーの詳細を取得します。

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

コントローラ

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という部分ビューを作成したとします。

は、HTMLコード内のデータをバインドするために部分図を詳細に記述する必要がある、

@modelのYour_Project_Name.ModalFolderName.TaskDetails

を怒鳴るようなあなたの部分図の内部モデルの参照を追加します。

はあなたがダウンを選択し、ドロップした後、ユーザの詳細データをロードしたいあなた メインビュー、内部 =「mydetailsTable」 idを持つ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は私のクラスのドロップダウンです。追加する必要があります。

あなたのアクションメソッドは

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

だ。つまり、このようになります。希望することができます:)