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>

Community · Accepted Answer · 2017-05-23 11:53:03Z

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");
}

Ankush Jain · Accepted Answer · 2015-04-09 13:46:59Z

0

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>

answered Apr 9, 2015 at 13:46

Ankush Jain

7,2434 gold badges41 silver badges71 bronze badges

2 Comments

mrplume Over a year ago

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

Ankush Jain Over a year ago

if it is an url's issue then you have to correct it first. there is no other solution.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related