Question

I am having a webgrid which is having href link in mvc3.

Now, when a link is clicked, then response is returned with some records from server that i want to display on a popup window (data will be comming from server after running a new query in controller after clicking that link and than shown in pop up window).

But i dont want to open a new window. i want to open it in a popup on same browser page.

i dont know weather they have used jQuery or AJAX.But i want to implement same functionality.

Please help me to acheive this

Thanks in advance

Answer 1

You can use any jQuery pluggin which provides the popup window to do this. Several options are available like fancybox,SimpleModel, Colorbox, jQuery UI dialog, thickbox etc..

This is how you will do with jQuery UI dialog.

Step 1)
Include jQuery & jQuery UI Library to your page (or Layout page). You can refer your local copy of refer to a copy from a 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" />

Step 2)
In your grid, Give a css class name to the links so that we can use that for the jQuery selection. Here i gave a CSS class popupLink

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

Step 3)
Now enable the jQuery UI Dialog functionality to those links with this specific CSS class

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

So whenever the user clicks on those links it is going to make call to the HREF attribute value of that link (that action method) and get the result and will show in the Popup window.

make sure you have the action method to handle this request

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.

}