Question

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

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

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

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

请帮助我实现这个

提前致谢

Answer 1

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

这是您使用jQuery UI对话框的方法。

步骤1） 包括jQuery＆amp; jQuery UI Library到您的页面（或布局页面）。您可以参考本地副本，参考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 Dialog功能

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

}

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

1 个答案: