2つのHTMLテーブルを持つASP.NET MVCのマスター/詳細

Question

ASP.NET MVCでマスタービューと詳細ビューを作成しようとしています。

最初のテーブルが人のリストを読み込むように2つのテーブルでビューを作成し、選択リンクをクリックすると、選択した人物の詳細が2番目のテーブルに読み込まれます。

WebFormsではこれは簡単ですが、MVCでは喜んでいません。

私は最初に正常に読み込まれましたが、私は2番目のものと何をするのかと迷っています。 JavaScriptを使用しようとしましたが、カスケーディングするドロップダウンリストではまだ動作していませんでした。

@Agramer私は今いくつかのコードを追加しています、私は@ Shiyju鉛を追って、これまでになった。

<table id="Pat" class="table table-condensed table-hover"> 
    <thead> 
     <tr> 
      <th> 
       Salutation 
      </th> 
      <th> Surname</th> 
      <th> Firstname</th> 
      <th> Reg. No.</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var lst in lstPat) 
     { 
      <tr> 
       <td> 
        @Html.DisplayFor(modelItem => lst.salutation.Salute) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => lst.Surname) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => lst.Firstname) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => lst.RegNo) 
       </td> 
       <th> 
        <button class="btn btn-xs btn-success" onclick="pickdet(@lst.PatientID)"> 
         @*<span class="glyphicon glyphicon-check"></span>*@ 
         <i class="fa fa-list fa-lg"></i> Select 
        </button> 
        &nbsp;&nbsp; 
        <button class="btn btn-xs btn-alert" onclick="location.href ='@Url.Action("Create", "PVSigns1", new { id = lst.PatientID })'"> 
         @*<span class="glyphicon glyphicon-check"></span>*@ 
         <i class="fa fa-list fa-lg"></i> Create New 
        </button> 
        &nbsp;&nbsp; 
        <button class="btn btn-xs btn-warning" onclick="location.href='@Url.Action("Edit", "PVSigns1", new { id = lst.PatientID })'"> 
         <span class="fa fa-edit fa-lg"></span> Edit 
        </button> 
       </th> 
      </tr> 
     } 
    </tbody> 
</table> 
<br /> 
<div> 
    <h3> Details</h3> 
    <table id="Pv" class="table table-condensed"> 
     <thead> 
      <tr> 
       <td>Sign</td> 
       <td> Value </td> 
      </tr> 
     </thead> 
     <tbody> 
      @foreach (var pvv in lstPv) 
      { 
       @Html.DisplayFor(modelItem => pvv.VitalSigns.Sign); 
       @Html.DisplayFor(modelItem => pvv.SignValue); 
      } 
     </tbody> 
    </table> 

JavaScriptはそれが実際に下図のように設定されたテーブルの結果にそれらを入れて結果を引っ張っていないが、テーブル

function pickdet(Id){ 
     var url = "/PVSigns1/GetDetails"; 
     $.post(url, {Id: Id}) 
     .done(function (response) { 
      $("#Pv").html(response); 
     }); 
    } 

を充填しようとしています。

PVC120HBC150Pulse72 

Answer 1

クリックした人物のレコードの詳細を取得するには、ajaxを使用できます。アンカータグのclickイベントを聞き、その人の一意のIDを取得し、このIDを持つサーバーにajax呼び出しを行い、サーバーが人の詳細を返すようにします。あなたのajax呼び出しのsuccess/doneイベントで、返される応答を解析し、必要に応じてそれを表示します。

この

@model IEnumerable<Person> 
<table> 
    <tr><th>Name</th></tr> 
    @foreach(var p in Model) 
    { 
    <tr> 
     <td>@Html.ActionLink(p.Name,"Details","Person", 
            new {@id=p.Id},new {class="personLink"})</td> 
    </tr> 
    } 
</table> 
<h2>Details of selected person:</h2> 
<div id="fullName"></div> 
<div id="jobTitle"></div> 

ような何かとクリックイベントを処理するために、JavaScriptがPersonControllerであなたのDetailsアクションメソッドを想定し

$(funtion(){ 
    $("a.personLink").click(function(e){ 
     e.preventDefault(); 

     var url=$(this).attr("href"); 
     $.getJSON(url,function(data){ 
     if(data!=null) 
     { 
      $("#fullName").text(data.FullName); 
      $("#jobTitle").text(data.JobTitle); 
     } 
     });  
    });  
}); 

では、（人の）IDを受け入れ、持つオブジェクトを返しますFullNameおよびJobTitleプロパティ

public ActionResult Details(int id) 
{ 
    var d=new {FullName="Shyju", JobTitle="Developer"}; 
    // Hard coded for demo. You may get this information from db 
    return Json(d,JsonRequestBehaviour.AllowGet); 
} 

また、JSONデータを返す代わりに、部分ビュー結果（詳細ビューでレンダリングするhtmlマークアップ）を返すことを検討することもできます。その場合、レスポンスから各プロパティ値を読み込む代わりに、コンテナdivの内部htmlとして応答（詳細のHTMLマークアップ）を設定するだけで済みます。そのためにjquery html(someString)を使用することができます。