单击mvc3中webgrid中的链接后弹出窗口答案

【问题标题】：Popup window after clicking on link in webgrid in mvc3单击mvc3中webgrid中的链接后弹出窗口
【发布时间】：2012-07-13 21:44:12
【问题描述】：

我有一个 webgrid，它在 mvc3 中有 href 链接。

现在，当单击链接时，将返回响应，其中包含我想在弹出窗口上显示的服务器记录（单击该链接后在控制器中运行新查询后，数据将从服务器传来，然后显示在弹出窗口中）。

但我不想打开一个新窗口。我想在同一浏览器页面的弹出窗口中打开它。

我不知道他们使用 jQuery 或 AJAX 的天气。但我想实现相同的功能。

请帮助我实现这一目标

提前致谢

【问题讨论】：

标签： c# asp.net-mvc-3 razor

【解决方案1】：

您可以使用任何提供弹出窗口的jQuery 插件来执行此操作。有几个选项可用，如 fancybox、SimpleModel、Colorbox、jQuery UI 对话框、thickbox 等。

这就是你将如何处理jQuery UI 对话框。

第 1 步） 在您的页面（或布局页面）中包含 jQuery 和 jQuery UI 库。您可以参考 CDN 中的参考副本的本地副本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

第 2 步） 在您的网格中，为链接提供css 类名称，以便我们可以将其用于 jQuery 选择。这里我给了一个CSS类popupLink

@Html.ActionLink("Scott", "Details", "Customers",
                new { @Id = "someId" }, new { @class = "popupLink" })

第 3 步） 现在为具有此特定 CSS 类的链接启用 jQuery UI 对话框功能

<script type="text/javascript">
$(function(){
    $(".popupLink").click(function (e) {
        var url = this.href;
        var dialog = $("#dialog");
        if ($("#dialog").length == 0) {
            dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
        }
        dialog.load(
            url,
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({                       
                    close: function (event, ui) {                            
                        dialog.remove();
                    },
                    modal: true,                        
                    width: 460, resizable: false
                });
            }
        );           
        return false;           
    });
});
</script>

因此，每当用户单击这些链接时，它都会调用该链接的 HREF 属性值（该操作方法）并获取结果并将显示在弹出窗口中。

确保您有处理此请求的操作方法

public ActionResult Details(string Id)
{
  //do some dB query or whatever and return the result

  return View();  // can return the Model here to the view.

}

【讨论】：