Question

我正在尝试在ASP.NET MVC中创建主视图和详细信息视图。

我想创建一个包含两个表的视图，这样第一个表将加载一个人列表，单击选择链接会将所选人员的详细信息加载到第二个表。

在WebForms中，这对我来说很容易，但对于MVC，我没有任何乐趣。

我已经成功加载了第一个，但我迷失了第二个怎么办。我尝试使用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是

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

假设Details中的PersonController操作方法接受了（人）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);
}

您也可以考虑返回部分视图结果（要在详细信息视图中呈现的html标记），而不是返回JSON数据。在这种情况下，您可以简单地将响应（详细信息的html标记）设置为容器div的内部html，而不是从响应中读取每个属性值。您可以使用jquery html(someString)。

ASP.NET MVC中的主/细节，带有两个HTML表

1 个答案: