c# - How to open window in the same View in MVC 4?

Question

I have a Telerik MVC grid in my view with a "Download" custom button. This button redirects to my Download action and this download action redirects me to the download view which shows me some images in window mode. I would like to open this window with the grid 'under' it, in the same page.

My code:

c.Bound(column => column.IsStock);
    c.Bound(column => column.Version);
    c.Command(cmd => cmd.Custom("Download")
         .Text("Download")
         .DataRouteValues(d => { d.Add(k => k.IDDocument); d.Add(k => k.ReceivedDate); })
         .SendDataKeys(true)
         .Action("Download", "Administrative"));

Action:

 [Authorize(Roles = "Administrator, Employee")]
 public ActionResult Download(DocumentModel model)
 {
     var listUris = new List<string>();
     var uris = ServiceProxy.GetInstance().GetContainerUri(model.IDProtocol.ToString(), model.IDDocument.ToString()));
     foreach (var uri in uris)
     {
         listuris.Add(uri.AbsoluteUri);
     }
     ViewBag.uris = listUris;
     return View("Download");            
 }

Download View:

@{
ViewBag.Title = "Imagens";
 }
@{
     Html.Telerik().Window()
    .Draggable(true)
    .Resizable(a => a.Enabled(true))
    .Scrollable(true).Width(700)
    .Name("ShowBarcode")
    .Modal(true)
    .Buttons(b => b.Close())
    .Content(@<text>
@using (Html.BeginForm())
{
    foreach (var uri in ViewBag.uris)
    {
    <img src="@uri" alt="IMAGE"/>
    <a href="@uri">@uri</a>
    }
}
   </text>).Render();
}

This works fine, but i lose my grid when i click in the download button. Any suggestions? Thanks.

Answer 1

so you want to put an ajax call in your script tag. Make sure you have jquery referenced on the page. you call should look something like this

$('#TableID tr').on('click', function() {
    $.ajax({
        url: "@(Url.Action("Action", "Controller"))",
        type: "POST",
        data: {
            id: $(this).attr('id')// from here http://stackoverflow.com/questions/5142422/get-id-of-selected-row-in-a-table-html
        }
        cache: false,
        async: true,
        success: function (result) {
            $(".Content").html(result);
            contentOverlay.load();
        }
    });
});

then on your controller

public PartialViewResult Action(string id){
    Model model = //query the database
    return PartialView("_PartialView", model);
}

so when a row is clicked the method on your controller is called and a partial view is returned. Put that result into a div on your view and then pop up that div (we use jquery overlay but there are several different options). Hope this helps