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

Question

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

public ActionResult Index()
    {
        ViewBag.menuItem = "DashBoard";
        return View(db.jobs.ToList());

    }

列表中的项目：

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

并且只是一个标准视图。使用脚手架。

我如何将操作 link 添加到该列表中，当单击与其 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 and jQuery

的链接

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

Create a popup with partialview data asp.net mvc5

javascript

modal-dialog

http-get

asp.net-mvc-partialview