Question

我已经尝试了一段时间，需要在每个链接的剃刀局部视图中使用模态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>

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>

模态jquery弹出窗口剃刀视图

1 个答案: