Как показать частичный вид в диалоговом окне JqueryUI ASP.NET MVC4

Question

Когда я нахожусь на странице создания DeskAlert, я хочу открыть в диалоговом окне частичный вид, содержащий список шаблонов предупреждений. Поэтому я поместил ссылку, чтобы открыть диалоговое окно JqueryUI, и я пытаюсь связать с ним частичный вид шаблона. Но ... Я не понимаю, почему представление не появилось в диалоговом окне.

Я создал контроллер/View с помощником VS 2013. Не могли бы вы объяснить мне этот меканизм?

Благодаря

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

Я немного изменил код. Создала функцию для загрузки частичного представления в div и создала параметр для функции обратного вызова, чтобы при частичном просмотре вы могли применить диалог jquery в этом div. Попробуйте и дайте мне знать.

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

Answer 2

Хорошо, я нашел решение. Ваш ответ дает мне идею протестировать с Firebug ... и я мог видеть свою ошибку. Я делаю путаницу в синтаксисе url между Controller/Action/View. Поэтому я создал специальное действие, частичное представление, и, наконец, он сработал.

Эта ссылка помогает мне понять: http://www.itorian.com/2013/02/jquery-ui-autocomplete-with-json-in-mvc.html логика, и эта: Loading a partial view in jquery.dialog как вызвать частичный вид. Мое решение:

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