How to show a partial view in JqueryUI dialog ASP.NET MVC4 - asp.net-mvc

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>

Answer 1

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

Answer 2

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>