Question

我有两个控制器，两个都有视图。

控制＃1→＃视图1

控制＃2→＃视图2

控制器＃1-上的

＆gt;视图＃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()工作正常，它会调用Display()的{{1}}方法并最终显示Controller#2。但现在要求是view#2应该是弹出模式对话框。

仅供参考：两个视图都使用了常见的view#2文件。

请帮我这样做。

Answer 1

第二个视图不能是带有布局的完整视图。它应该是部分视图并由ajax调用。检查this answer以了解如何实施它。

Answer 2

我使用@Ajax.ActionLink()为您创建了一个完整的解决方案。要使用Ajax.ActionLink，添加对jquery.unobtrusive-ajax.min.js的引用非常重要。总之，您应该在以下引用这个顺序：

<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>

<强>输出：

在bootstrap模式对话框上加载从控制器获取数据

2 个答案: