模态jquery弹出窗口剃刀视图答案

【问题标题】：Modal jquery popup window razor view模态jquery弹出窗口剃刀视图
【发布时间】：2016-05-02 06:32:34
【问题描述】：

我已经尝试了一段时间，在每个链接的剃刀局部视图中都需要一个模态 jQuery 弹出窗口。这是我的尝试。单击链接后，它会重定向到页面home/test/1，而不是弹出窗口。

然后在我的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>

【问题讨论】：

您检查浏览器中的控制台错误了吗？
没有错误。我需要输入什么特殊步骤来测试它吗？文件是否也正确包含？
还有什么需要包含在我的 Test.cshtml 中？我只有 1 个 div 对话框视图
首先只是尝试检查您的 jquery 点击事件是否工作该页面？
怎么样？如果我在 $("#dialog-view").dialog({ 它不起作用。但在它之前，我得到了警报窗口。

标签： jquery razor

【解决方案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>

【讨论】：