Question

我有一个面板，其中包含带有ID和标题的作业列表。它只是一个简单的视图和一个简单的控制器。

 <li class="list-group-item"> @item.ID @item.Title</li>

列表中的项目：

 [HttpGet]
    public ActionResult Details (int jobID)
    {

        var details = db.details.Find(jobID);
        return PartialView(details);
    }

我创建了一个细节控制器来显示该作业的部分视图：

{{1}}

只是一个沙漠的观点。使用脚手架。

如何在该列表中添加一个操作链接，当单击其作业详细信息与其ID匹配时，该链接将显示一个弹出框。

Answer 1

通过弹出框你的意思是莫代尔？如果是，那么：

更改列表的这一部分

<li class="list-group-item"><a data-id="@item.ID" href="#">@item.Title</a></li>

我会假设您正在使用jQuery和Bootstrap？如果没有，我会在下面提供链接并查看它们。

$('.list-group-item a').click(function (){
   //gets the id for the selected list item
   var itemId = $(this).data("id");

   //performs an ajax call to the controller to get the details based on the id selected
   $.ajax({
     url : 'your controller url',
     type : 'POST',
     data : {
       'jobID' : itemId
     },
     dataType:'json',
     success : function(data) {              
       //append the results to your modal's body.
       //$("modal selector").modal('show');
     },
     error : function(error)
     {
       //do something with the error
     }
  });
});

指向Bootstrap Modals和jQuery

的链接

使用部分视图数据asp.net mvc5创建一个弹出窗口

1 个答案: