How to show a partial view in JqueryUI dialog ASP.NET MVC4

Question

When I'm on my DeskAlert creation page, I wish to open in a dialog box a partial view which contains a list of Alert Template. So I have put a link to open a JqueryUI dialog, and I'm trying to link my Template partial view with it. But... I don't understand why the view didn't show up, in the dialog box.

I have created Controller/View with VS 2013 assistant. Could you explain me this mecanism ?

Thanks

RouteConfig

routes.MapRoute("Index",
"AlertTemplatesModal/Index/",
new { controller ="AlertTemplatesModal",action="Index"},
new[] {"WebAppDeveloppement.Controllers"});

Create.cshtml

<script type="text/javascript">
$(document).ready(function() {
    $(".tlist").on("click",function (event) {
        event.preventDefaut();
        $('#myDialogContent').dialog("open");
    });

    $('#myDialogContent').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true,
        open:function () {
            $.ajax({
                url:"@(Url.RouteUrl("Index"))",
                type:"GET",
                succes:function(data)
                {
                    $('#myDialogContent').html("");
                    $('#myDialogContent').html(data);
                },
                error:function(xhr,ajaxOptions, thrownError){
                    alert("error");
                }
            });
        },
        buttons:{
           Cancel:function() {
              $(this).dialog("close");
           }
        }
    });
});
</script>
<div id="myDialogContent"></div>

AlertTemplatesModalController

private DSdatabaseEntities db = new DSdatabaseEntities();
public ActionResult Index()
{
    var alertTempalte = db.AlertTemplate.Include(a=>a.AlertMode).Include(a=>a.AlertPriority).Include(a=>a.RecipientMap);
    return View(alertTemplate.ToList());
}

Index.cshtml

@model IEnumerable<WebAppDeveloppment.AlertTemplate>
<div id="myDialogContent">
...
</div>

score 1 · Answer 1 · edited May 23 '17 at 11:53

Ok, I've found the solution. Your response give me the idea to test with Firebug... and I could see my error. I make a confusion in the url syntax between Controller/Action/View. So I have created a special action, a partialview, and finally, it's worked.

This link helps me to understand : http://www.itorian.com/2013/02/jquery-ui-autocomplete-with-json-in-mvc.html the logic, and this one : Loading a partial view in jquery.dialog how to call partial view. My solution :

Create.cshtml

<script type="text/javascript">
$(document).ready(function() {
    $(".tlist").on("click",function (event) {
        event.preventDefaut();
        $('#myDialogContent').dialog("open");
    });

    $('#myDialogContent').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true,
        open:function () {
            $(this).load("/AlertTemplatesModal/TemplateView/");
        },
        buttons:{
           Cancel:function() {
              $(this).dialog("close");
           }
        }
    });
});
</script>
<div id="myDialogContent"></div>

AlertTemplatesModalController

public ActionResult TemplateView()
{
    ViewBag.AlertTemplateTitle = new SelectList(db.AlertTemplate,"AlertTemplateID","AlertTemplateTitle");
    return PartialView("Index");
}

score 0 · Answer 2 · answered Apr 09 '15 at 13:46

I have changed the code little bit. Created a function to load partial view in div and created a parameter for callback function so that when partial view is loaded, you could apply jquery dialog on that div. Give it a try and let me know.

<script type="text/javascript">
$(document).ready(function() {
    $(".tlist").on("click",function (event) {
        event.preventDefaut();
        loadPartialView(function(){
            $('#myDialogContent').dialog("open");
        });
    });

    $('#myDialogContent').dialog({
        autoOpen:false,
        height:500,
        width:500,
        modal:true,
        buttons:{
           Cancel:function() {
              $(this).dialog("close");
           }
        }
    });
});


function loadPartialView(callback){
$.ajax({
    url:"€(Url.RouteUrl("Index")}",
    type:"GET",
    succes:function(data)
    {
        $('#myDialogContent').html("");
        $('#myDialogContent').html(data);
        callback();
    },
    error:function(xhr,ajaxOptions, thrownError){
        alert("error");
    }
});
}
</script>

Hum... nothing happens when I click on my link. I'm trying this operation on a create page linked to my first controller. This partial view is linked with another controller... With Firebug, I see that Ajax url is AlertMaps/Create, it's the url of my create page and not the partial view — mrplume, Apr 09 '15 at 14:21
if it is an url's issue then you have to correct it first. there is no other solution. — Ankush Jain, Apr 09 '15 at 14:41

How to show a partial view in JqueryUI dialog ASP.NET MVC4

2 Answers2