Modal jQuery弹出式窗口剃须刀视图

我一直在尝试一段时间，需要在每个链接的剃刀局部视图中的模态jQuery弹出窗口。这是我的尝试。一旦我点击链接，它将重定向到页面home/test/1而不是一个弹出窗口。Modal jQuery弹出式窗口剃须刀视图

然后在我Test.cshtml里面的div id为"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>

来源

2016-05-02 C P

您是否在浏览器中检查控制台错误？ –

没有错误。有什么特别的步骤需要输入来测试它吗？该文件是否正确包含？ –

还需要包含在我的Test.cshtml中？我只有1 div的对话框视图 –

发现此问题。需要在布局中评论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>

来源

2016-05-02 07:52:29

Modal jQuery弹出式窗口剃须刀视图

回答

相关问题