1

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

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

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

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

请帮助我实现这一目标

提前致谢

4

1 回答 1

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) 现在启用 jQuery UI 对话框功能到具有此特定 CSS 类的链接

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

}
于 2012-07-13T13:32:03.487 回答