MVC4應用程序中的Jquery UI對話框從部分視圖加載對話框內容

這個問題確實要求我們如何繼續擴展這個簡單示例，並且看看我是否正確地接近問題。MVC4應用程序中的Jquery UI對話框從部分視圖加載對話框內容

這是我第一次使用JQuery UI。我在點擊事件中調用下面的jQuery UI對話框（工作正常）。該對話框將包含許多元素（複選框等），單擊它們時會首先對調用對話框的元素執行操作。（showdialog（this）中的'this'）

1）您將看到我正在爲在dialog（）的打開事件中調用的對話框元素建立點擊事件。會有一些這樣的，所以我想知道這是否是正確的地方做到這一點。

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>

來源

2013-08-25 Joel

爲什麼你不是活得你只需簡單地把你的視圖變成一個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

來源

2013-08-26 09:05:09 AminSaghi

感謝您的答覆。我同意使用@ Html.Partial（），否則它是以相同的方式做一個稍微不同的方式。唯一的區別是div是否已經存在或者是否動態創建。令人費解的事情是爲什麼點擊事件導致瀏覽器崩潰（我的意思是處理器使用率達到50％，我必須殺死該進程） – Joel

我轉移到部分視圖的問題是點擊功能不再具有首先調用對話框的元素的上下文。或者說更加謙虛，我是個白癡。 – Joel

MVC4應用程序中的Jquery UI對話框從部分視圖加載對話框內容

回答

相關問題