SimpleModal打破了ASP.Net Postbacks

Question

我在ASP.Net項目中使用jQuery和SimpleModal來為Web應用程序創建一些不錯的對話框。 不幸的是，模態對話框中的任何按鈕都不能再執行回發，這是不可接受的。

我找到了一個解決方法的來源 ，但對於我的生活，我無法讓它工作，主要是因為我沒有完全理解所有必要的步驟。

我也有一個解決方法，即替換回發，但它很難看，可能不是最可靠的。 我真的想讓回發再次運作。 有任何想法嗎？

更新：我應該澄清，回發不起作用，因為用於執行回發的Javascript在某種程度上已經破壞，所以當點擊按鈕時根本沒有任何反應。

Answer 1

你們兩個都在正確的軌道上。 我意識到SimpleModal將對話框附加到正文，該正文位於ASP.Net的<form> ，這會破壞功能，因為它無法找到元素。

為了解決這個問題，我只修改了SimpleModal源，將eveything追加到'form'而不是'body' 。 當我創建對話框時，我還使用persist: true選項，以確保按鈕保持打開和關閉。

謝謝大家的建議！

更新：版本1.3在配置中添加了一個appendTo選項，用於指定應將模式對話框附加到哪個元素。 這是文檔 。

Answer 2

所有標准的ASP.NET回發都可以通過在頁面上調用__doPostBack javascript方法來工作。 該函數提交表單（ASP.NET每頁真的只喜歡一個表單），其中包含一些隱藏的輸入字段，其中所有的viewstate和其他善良都存在。

從表面上看，我在SimpalModal中看不到任何會搞砸頁面形式或任何標准隱藏輸入的內容，除非該模式的內容恰好來自HTTP GET到ASP.NET頁面。 這將導致兩個ASP.NET表單呈現為一個DOM，幾乎肯定會搞砸__doPostBack函數。

您是否考慮過使用ASP.NET AJAX ModalPopup控件 ？

Answer 3

Web瀏覽器不會POST任何禁用或隱藏的表單元素。

所以發生的事情是：

1. 用戶單擊對話框中的按鈕。
2. 該按鈕調用SimpleModal的close（）方法，隱藏對話框和按鈕
3. 客戶端POST表單（沒有按鈕的ID）
4. ASP.NET框架無法確定單擊了哪個按鈕
5. 您的服務器端代碼未執行。

解決方案是在客戶端上做任何你需要做的事情（在這種情況下關閉對話框），然后自己調用__doPostback（）。

例如（其中“dlg”是客戶端SimpleModal對話框引用）：

btn.OnClientClick = string.Format("{0}; dlg.close();",
                        ClientScript.GetPostBackEventReference(btn, null));

這應該隱藏對話框，提交表單，並調用您對該按鈕的任何服務器端事件。

@擔

所有標准的ASP.NET回發都可以通過在頁面上調用__doPostBack javascript方法來工作。

asp：按鈕不調用__doPostback（），因為HTML輸入控件已經提交了表單。

Answer 4

被這一個抓住了 - 非常感謝tghw和其他貢獻者在附加形式而不是身體修復。 （由1.3版本的屬性解決）

順便說一句：如果有人需要以編程方式從.net關閉對話框 - 您可以使用這種類型的語法

private void CloseDialog()
{
    string script = string.Format(@"closeDialog()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

在哪里，閉路的javascript是這樣的....

    function closeDialog() {
        $.modal.close();
    }

Answer 5

新的Jquery.simplemodal-1.3.js有一個名為appendTo的選項。 所以添加一個名為appendTo的選項：'form'，因為默認是appendTo：'body'，它在asp.net中不起作用。

Answer 6

有同樣的問題，但{appendTo:'form'}導致模式彈出窗口完全錯誤（好像我有一個CSS問題）。

原來我正在建立的模板包括在頁面上放置其他表單。 一旦我設置{appendTo:'#aspnetForm'} （默認的Asp.net表單ID），一切都很好（包括回發）。

Answer 7

除了tghw的答案之外，這篇優秀的博客帖子幫助了我： jQuery：用模態形式修復你的回發 - 特別是BtnMike的評論：“你也不能在你的asp：按鈕上設置CssClass =”simplemodal-close“。” 在課堂上取消這一點對我來說是不明顯的解決方案。

-約翰

Answer 8

我沒有修改simplemodal.js就找到了以下工作：

function modalShow(dialog) {

    // if the user clicks "Save" in dialog
    dialog.data.find('#ButtonSave').click(function(ev) {
        ev.preventDefault();

        //Perfom validation                

        // close the dialog
        $.modal.close();

        //Fire the click event of the hidden button to cause a postback
        dialog.data.find('#ButtonSaveTask').click();
    });

    dialog.data.find("#ButtonCancel").click(function(ev) {
        ev.preventDefault();
        $.modal.close();
    });
}          

因此，不是使用對話框中的按鈕來導致回發，而是阻止他們提交，然后在表單中找到隱藏按鈕並調用其click事件。

Answer 9

FWIW，我已經更新了您指向的博客文章，並進行了澄清，轉貼在此處 - 推理和其他詳細信息在博文中：

解決方案（截至我午餐前的最后一次檢查）：

1. 覆蓋對話框的onClose事件，並執行以下操作：
   1. 調用對話框的默認關閉功能
   2. 將對話框div的innerHTML設置為單個＆nbsp;
   3. 劫持__doPostBack，將其指向一個新函數newDoPostBack

從我在網上看到的一些評論來看，第1點需要一些澄清。 不幸的是，我不再和同一個雇主在一起，也無法訪問我使用的代碼，但我會盡我所能。 首先，您需要通過定義一個新函數並將對話框指向它來覆蓋對話框的onClose函數，如下所示：

 $('#myJQselector').modal({onClose: mynewClose}); 

• 調用對話框的默認關閉功能。 在您定義的函數中，您應該首先調用默認功能（對於您通常覆蓋的任何內容，這是最佳實踐）：
• 將對話框div的innerHTML設置為單個＆nbsp; - 這不是必需的步驟，如果您不理解，請跳過它。
• 劫持__doPostBack，將其指向一個新函數newDoPostBack

 function myNewClose (dialog) 

 { 

  dialog.close(); 

   __doPostBack = newDoPostBack; 

 } 

1. 編寫newDoPostBack函數：

  function newDoPostBack（eventTarget，eventArgument）\n { 

  var theForm = document.forms [0]; 

  if（！theForm） 

  { 

  theForm = document.aspnetForm; 

  } 

  if（！theForm.onsubmit ||（theForm.onsubmit（）！= false）） 

  { 

  document.getElementById（“__ EVENTTARGET”）。value = eventTarget; 

  document.getElementById（“__ EVENTARGUMENT”）。value = eventArgument; 

  theForm.submit（）; 

  }\n }\n    

Answer 10

如果你不想修改SimpleModal源。 試試這個..

調用modal（）方法后添加：

$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');

SimpleModal插件將兩個加到你的標記中。

1. 'simplemodal-overlay'用於背景
2. 'simplemodal-container'包含你作為彈出模式的div。