在bootstrap模式對話框上加載從控制器獲取數據

Question

我有兩個控制器，都有視圖。

控制＃1->視圖＃1

控制＃2->視圖＃2

在控制器＃1->視圖＃1我有以表格格式顯示的數據。 在那個數據表中，一列是超鏈接，當我點擊它時我想彈出Bootstrap模態對話框。 我的退休是Modal對話框應該調用控件＃2的動作方法並在模態對話框中顯示視圖＃2。

視圖＃1：

@model xxx
<table id="myTable" class="table table-bordered">
    <thead>
        ....
    </thead>
    <tbody>
        @foreach (xx item in Model.xxx)
        {
             ....
             <td>@Html.ActionLink(item.Value.ToString(), "Display", "Controller#2", new { para1 = item.val1, para2 = item.val2}, null)</td> 
        }

@Html.ActionLink()工作正常，它調用Controller#2 Display()方法，最終顯示view#2 。 但現在要求是view#2應該是彈出模式對話框。

僅供參考：兩個視圖都使用常見的_Layout.cshtml文件。

請幫我這樣做。

Answer 1

第二個視圖不能是具有布局的完整視圖。 它應該是部分視圖並由ajax調用。 檢查此答案以了解如何實施它。

Answer 2

我使用@ Ajax.ActionLink（）為您創建了一個完整的解決方案。要使用Ajax.ActionLink ，添加對jquery.unobtrusive-ajax.min.js的引用非常重要。 Ajax.ActionLink ，您應該在以下引用中這個命令：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var p1 = new Product { ID = 1, Description = "Product 1" };
        var p2 = new Product { ID = 2, Description = "Product 2" };
        return View(new List<Product> { p1, p2 });
    }

    public PartialViewResult GetDetails(string description)
    {
        return PartialView("_GetDetails", description);
    }
}

_GetDetails.cshtml局部視圖：

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal Header</h4>
            </div>
            <div class="modal-body">
                <h3>@Model</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

主要觀點：

@model IEnumerable<MVC_Master_Pages.Models.Product>

@{
    ViewBag.Title = "Home";
    Layout = null;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
    function Done() {
        $('#myModal').modal('show');
    }
</script>
<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Description</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.ID</td>
                <td>@product.Description</td>
                <td>
                    @Ajax.ActionLink("Details",
                 "GetDetails",
                 new { description = product.Description },
                 new AjaxOptions
                 {
                     UpdateTargetId = "details",
                     InsertionMode = InsertionMode.Replace,
                     OnSuccess = "Done()"
                 })
                </td>

            </tr>
        }
    </tbody>
</table>
<div id="details">
</div>

輸出：