Модальный jQuery popup window razor view

Question

Я пытался какое-то время, нужно создать всплывающее окно модального jQuery в частичном представлении бритвы для каждой ссылки. Вот моя попытка. Как только я нажму на ссылку, он будет перенаправлен на страницу home/test/1 вместо всплывающего окна.

затем в моем Test.cshtml внутри DIV с идентификатором "dialog-view"@ViewBag.id

в контроллере и about.cshtml зрения ниже. Пожалуйста, помогите мне.

public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 
     public ActionResult About() 
     { 
      return View(); 
     } 

     public PartialViewResult Test(int id) 
     { 
      ViewBag.id = id; 
      return PartialView(); 
     } 
    } 




<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script src="../../Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script> 

    @Html.ActionLink("Link1", "Test", new { id = 1 }, new { @class = "viewDialog" }) 
    @Html.ActionLink("Link2", "Test", new { id = 2 }, new { @class = "viewDialog" }) 


    <div id="dialog-view"></div> 

    <script type="text/javascript"> 
     $(".viewDialog").live("click", function (e) { 
      //can see usl 
      var url = $(this).attr('href'); 
      alert(url); 
      $("#dialog-view").dialog({ 
       title: 'View Modal', 
       autoOpen: false, 
       resizable: false, 
       height: 355, 
       width: 400, 
       show: { effect: 'drop', direction: "up" }, 
       modal: true, 
       draggable: true, 
       open: function (event, ui) { 
        $(this).modal('show'); 

       }, 
       buttons: { 
        "Close": function() { 
         $(this).dialog("close"); 

        } 
       } 
      }); 

      $("#dialog-view").dialog('open'); 
      return false; 
     }); 

     </script> 

Answer 1

Обнаружена проблема. Нужно комментировать jquery в макете и обновлять код. Это работает.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> 
@Html.ActionLink("Link3", "Test", null, new { id = 234 }, new { @class = "modal" }) 
    @Html.ActionLink("Link4", "Test", null, new { id = 34 }, new { @class = "modal" }) 

      <div id="dialog" title="form">  
      </div> 


<script type="text/javascript"> 
    $(function() { 
     $('#dialog').dialog({ 
      autoOpen: false, 
      width: 400, 
      resizable: false, 
      modal: true 
     }); 

     $('.modal').click(function() { 
      $('#dialog').load(this.href, function() { 
       $(this).dialog('open'); 
      }); 
      return false; 
     }); 
    }); 
</script>