Web窗體應用程序中的模式窗口的最佳實踐

在列表頁面上，單擊其中一個項目，可在具有自己功能（如驗證，更新等）的模式彈出窗口中調出詳細信息。實施這個的最佳做法是什麼（不要尋找黑客）。在這裏我看到兩個選項：Web窗體應用程序中的模式窗口的最佳實踐

隱藏的細節標記，直到一個列表項被點擊，此時，做一個Ajax請求，以獲得詳細信息，並填充和顯示細節部分。
將細節部分作爲單獨的頁面。在列表項上單擊，在模式窗口中顯示此頁面（這甚至可能嗎？）這與IFrame方法類似，聽起來像是一種老派的方法。

這些方法的缺點有哪些，或者還有其他的方法嗎？不應該有列表項點擊後的回傳。

編輯：更多的意見表示讚賞。

2010-02-24 DotnetDude

我正在做選項1，它非常輕量級，所有你需要的是一個Ajax後（jQuery或UpdatePanel）和一些模式（我使用jQuery UI）。這比整頁文章要容易得多，另外你還可以操作你所在的頁面作爲結果的一部分。

例如我在頁面中有網格，編輯器是模式的，通常有更多的細節，當你點擊保存時，網格被更新。我已經把它放在一個通用的模板解決方案中，並且它非常容易使用，並且和webforms一樣輕，所以我都贊成選項1。

public class Modal : UpdatePanel 
{ 
    private bool? _show; 
    public string Title 
    { 
    get { return ViewState.Get("Title", string.Empty); } 
    set { ViewState.Set("Title", value); } 
    } 

    public string SaveButtonText 
    { 
    get { return ViewState.Get("SaveButtonText", "Save"); } 
    set { ViewState.Set("SaveButtonText", value); } 
    } 

    protected override void OnPreRender(EventArgs e) 
    { 
    if (_show.HasValue) RegScript(_show.Value); 
    base.OnPreRender(e); 
    } 

    public new Modal Update() { base.Update();return this;}  
    public Modal Show() { _show = true; return this; } 
    public Modal Hide() { _show = false; return this; } 

    private void RegScript(bool show) 
    { 
    const string scriptShow = "$(function() {{ modal('{0}','{1}','{2}'); }});"; 
    ScriptManager.RegisterStartupScript(this, typeof (Modal), 
      ClientID + (show ? "s" : "h"), 
      string.Format(scriptShow, ClientID, Title, SaveButtonText), true); 
    } 
}

在javascript中：讓您的模態控制從UpdatePanel中（濃縮爲簡碼）繼承

function modal(id, mTitle, saveText) { 
    var btns = {}; 
     btns[saveText || "Save"] = function() { 
      $(this).find("input[id$=MySaveButton]").click(); 
     }; 
     btns.Close = function() { 
      $(this).dialog("close"); 
     }; 
     return $("#" + id).dialog('destroy').dialog({ 
      title: mTitle, 
      modal: true, 
      width: (width || '650') + 'px', 
      resizable: false, 
      buttons: btns 
     }).parent().appendTo($("form:first")); 
    }

在您的標記

然後（想不出更好的名字比MyControls [R現在飛行，抱歉）：

<MyControls:Modal ID="MyPanel" runat="server" UpdateMode="Conditional" Title="Details"> 
    //Any Controls here, ListView, whatever 
    <asp:Button ID="MySaveButton" runat="server" OnClick="DoSomething" /> 
</MyControls:Modal>

在你的網頁代碼隱藏，你可以這樣做：

MyPanel.Update().Show();

神父你的方法，我有一個jQuery的行動，使輸入字段並點擊一個按鈕在模式中，觸發更新面板回發，並在該代碼中加載詳細信息到模態中的任何控件，只需調用MyPanel.Update.Show();，並在更新面板ajax請求返回時顯示在屏幕上。

上面的例子中，使用jQuery UI將有2個按鈕的模式，一個收，什麼也不做，一來保存，單擊該MySaveButton的模式裏面，你可以做任何你想要的，然後服務器上，呼籲MyPanel.Hide()如果成功，或者在驗證失敗的情況下在面板中輸入錯誤消息，則不要調用MyModal.Hide()，並且在回發後它將保持爲用戶。

來源

2010-02-24 16:13:06

1）您的詳細部分中的控件 - ASP.NET控件？ 2）你能解釋一下你是如何實現save（ajax或服務器端調用以及你如何進行驗證的）？ – DotnetDude 2010-02-24 16:17:18

@DotnetDude - 在這個例子中，它是一個更新面板，直到我徹底切換到jqGrid，我會用一個例子更新答案。 – 2010-02-24 16:19:51

感謝您的代碼片段。我想在不使用UpdatePanel的情況下實現這一點（這是臃腫的，不推薦）。 JQ模式中的保存按鈕不會觸發回發。 – DotnetDude 2010-02-24 16:50:40

Web窗體應用程序中的模式窗口的最佳實踐

回答

相關問題