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

我有一个webgrid，它在mvc3中有href链接。在mvc3中单击webgrid中的链接后的弹出窗口

现在，当点击一个链接，然后返回响应与服务器的一些记录，我想要显示在一个弹出窗口（数据将在服务器运行后，在控制器中运行一个新的查询后单击该链接，显示在弹出窗口中）。

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

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

请帮我达致这

在此先感谢

来源

2012-07-13 Vicky Kumar

你可以使用任何jQuery撑着它提供了弹出窗口来做到这一点。有几个选项可用，如fancybox，SimpleModel，Colorbox，jQuery UI对话框，thickbox等。

这是您如何处理jQuery UI对话框。

步骤1） 包括jQuery的& jQuery用户界面库到您的网页（或布局页）。您可以将您的本地副本引用到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-13 13:32:03 Shyju

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

回答

相关问题