MVC4 应用程序中的 Jquery UI 对话框从部分 View 加载对话框内容

Question

这个问题实际上是在寻求有关如何继续扩展这个简单示例的指导，并看看我是否以正确的方式解决问题。

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

1) 您将看到我正在为对话框元素建立单击事件，该事件在dialog() 的打开事件中被调用。会有很多这样的东西，所以我想知道这是否是执行此操作的正确位置。

2)对话框可能会变得复杂，所以我不想使用 .html() 加载内容，我想使用部分 View (或类似的 View )。我尝试添加 $(this).load( '@Url.Action("controllername")') 到启动操作。内容加载正常，但点击事件丢失。因此，我将dialogevents()移至部分 View ，但它仍然不起作用，而且当我单击复选框时，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>

这是我尝试加载部分 View 时使用的...

Controller :

public ActionResult LoadDialog()
{
    return PartialView("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

为什么你不只是简单地将 View 放入 div 中并对其执行 .dialog()...？!

在您的第一个 View 中:

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

每当您需要对话框时:

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

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

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