Question

这个问题实际上是在询问如何继续扩展这个简单的例子以及看我是否正确地接近问题。

这是我第一次使用Jquery UI。我在click事件上调用下面的jquery UI对话框（工作正常）。该对话框将包含许多元素（复选框等），单击这些元素时将对首先调用该对话框的元素执行操作。（showdialog中的'this'（this））

1）你会看到我正在为dialog（）的open事件中调用的对话框元素建立click事件。会有很多这样的，所以我想知道这是否是正确的地方。

2）对话框可能会变得复杂，所以我不想使用.html（）加载内容，我想使用部分视图（或类似的。）我尝试添加$（this）.load（ '@ Url.Action（“controllername”）'）到开始动作。内容加载正常，但点击事件丢失了。所以，我将dialogevents（）移动到局部视图，但它仍然无法正常工作，当我点击复选框时，实际上似乎崩溃了Chrome。

任何经历过这个的人都可以给我任何建议：a）将内容加载到对话框中的首选方法，以及b）管理对话框内元素的点击事件的最佳方法。

或者......我不应该为此使用.dialog（）。 :)

感谢。

   <script>
        $(function (e) {            
                $(".Text").on("click", function (e) {
                    showdialog(this);
                });
            }

            function showdialog(obj) {
                var customdialog = $('<div id="customdialog"></div>')                
                .html('<h2>Hello World</h2><br>Color: <input class="thischeckbox" type="checkbox" name="color" value="checked"> <input class="thatcheckbox" type="checkbox" name="columns" value="checked">')
                .dialog({
                    modal: false,
                    dialogClass: "contentpopup",
                    title: "Here's My Modal",
                    height: 500,
                    width: 300,
                    open: function (event, ui) {
                        //$(this).load('@Url.Action("LoadDialog")');
                        dialogevents();
                    }
                });

                function dialogevents() {
                    $(".thischeckbox").on("click", function () {
                        alert("this clicked!");

                    $(".thatcheckbox").on("click", function () {
                        alert("that clicked!");
                    });
                }
            };
        });
    </script>

这是我在尝试加载局部视图时使用的...

控制器：

public ActionResult LoadDialog()
{
    return PartialView("LoadDialog");
}

LoadDialog.cshtml：

@{
    Layout = null;
}


<div>
        <h2>Hello World</h2><br>Color: <input class="mycheckbox" type="checkbox" name="color" value="checked"> <input class="columncheckbox" type="checkbox" name="columns" value="checked">
</div>

<script>
    $(function dialogevents(obj) {
      //same as above
    });
</script>

Answer 1

为什么您不只是简单地将视图放入div并在其上执行.dialog() ......？

在您的第一个视图中：

<div id="divDialog" style="display:none">
    @Html.Partial("MyPartialView")
</div>

每当你想要对话时：

$("#divDialog").dialog({
    // dialog options...
});

您还可以动态地将任何内容呈现到对话框中：

$("#divDialog").html(jqXHR.responseText); // or any hard coded content

MVC4应用程序中的Jquery UI对话框从局部视图加载对话框内容

1 个答案: