2016-08-04 86 views
0

我用AJAX Accordion窗格獲得了非常嚴格的表單。我使用的是母版頁,但ASPX頁面孩子看起來像這樣:在代碼隱藏中添加ASP.Net按鈕

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <link rel="stylesheet" href="Content/themes/base/jquery-ui.css"> 
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script> 

</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="FeaturedContent" runat="server"> 
</asp:Content> 
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server"> 

    <asp:UpdatePanel ID="MyUpdatePanel" runat="server"> 
     <ContentTemplate> 
      <asp:panel ID="MyContent" runat="server"> 

    <!-- ************************************ --> 
        <ajaxtoolkit:modalpopupextender id="MdlCommentsExtender" runat="server"  
         targetcontrolid="MyContent" popupcontrolid="pnlComments" 
         popupdraghandlecontrolid="PopupHeader" drag="True" 
         backgroundcssclass="ModalPopupBG" Enabled="False" > 
        </ajaxtoolkit:modalpopupextender> 

        <asp:panel id="pnlComments" style="display: none" runat="server" BackColor="White" CssClass="modalPopup"> 
         <div class="HellowWorldPopup"> 
          <div class="PopupHeader" id="Div3" style="border: thin solid #000000; vertical-align: middle; text-align: center; background-color: #C0C0C0; color: #000000; font-weight: bold; height: 40px;" ><br />Pend Comment</div> 
           <div class="PopupBody" style="background-color: #FFFFFF"> 
            <table style="width: 300px"> 
             <tr style="text-align:left"> 
              <td style="padding:4px"><asp:Label ID="lblCommentBox" runat="server" Text="Comment:"></asp:Label></td> 
             </tr> 
             <tr> 
              <td style="padding:4px"> 
              <!--  <asp:TextBox ID="txtCommentBox_Old" runat="server" CssClass="textbox" TextMode="multiline" Wrap="True" Height="70px" Width="270px" Font-Size="Small"></asp:TextBox> --> 
               <asp:TextBox ID="txtCommentBox" TextMode="MultiLine" CssClass="textbox" Wrap="True" Height="70px" Width="270px" Font-Size="Small" Rows="3" runat="server" onkeyup="textCounter(this, this.form.remLen, 50);" onkeydown="textCounter(this, this.form.remLen, 50);" onpaste="textCounter(this, this.form.remLen, 50);" /> 
              </td> 
             </tr> 
             <tr> 
              <td> 
               <input readonly="readonly" type="text" id="remLen" name="remLen" size="2" maxlength="3" value="50" /> characters left 
              </td> 
             </tr> 
            </table> 
           </div> 
           <div class="Controls"> 
            <table style="width: 300px"> 
             <tr> 
              <td style="vertical-align: middle; text-align: center"> <asp:Button ID="mdlCmntsOk_Click" runat="server" Text="OK" CssClass="textbox" Height="28px" Width="75px" OnClick="mdlCommentsOk_Click" /></td> 
             </tr> 
            </table> 
           </div> 
          </div> 
         </div> 
        </asp:panel> 
      </asp:panel> 
     </ContentTemplate> 
    </asp:UpdatePanel> 

    <!-- ************************************ --> 

</asp:Content> 

這種形式包含了我想從一個「編輯」按鈕調用modalpopupextender。 Accordion是通過代碼隱藏動態添加的。我的整個代碼如下所示:

public partial class frmBenefitSummaryList : System.Web.UI.Page 
{ 
    string ConnStr = System.Configuration.ConfigurationManager.ConnectionStrings["ConnCST"].ConnectionString; 


    protected void Page_Load(object sender, EventArgs e) 
    { 

     BindAccordions(); 
     if (Page.IsPostBack) 
     { 
      MdlCommentsExtender.Show(); 
     } 
    } 

    private void BindAccordions() 
    { 
     #region Get the value from the database 

     DataTable dt = new DataTable(); 
     try 
     { 

      using (SqlConnection connection = new SqlConnection()) 
      { 
       connection.ConnectionString = ConfigurationManager.ConnectionStrings["ConnCST"].ToString(); 
       connection.Open(); 
       SqlCommand cmd = new SqlCommand(); 
       cmd.Connection = connection; 
       string CmdTxt = "Select CBL.ID, CBL.[Category], CBL.[Provision], CTL.MarkForReview, CTL.IssueType, CTL.Resolution, CTL.Feedback, CTL.TemplateID"; 
       CmdTxt = CmdTxt + " from [tblCSTBenefitList] CBL"; 
       CmdTxt = CmdTxt + " LEFT JOIN tblCSTTemplateList CTL"; 
       CmdTxt = CmdTxt + " ON CBL.ID = CTL.BenefitID"; 
       CmdTxt = CmdTxt + " where CBL.ID > '0'"; 
       CmdTxt = CmdTxt + " ORDER BY CBL.[Category], CBL.[Provision] ASC"; 

       cmd.CommandText = CmdTxt; 
       cmd.CommandType = CommandType.Text; 
       SqlDataAdapter da = new SqlDataAdapter(cmd); 

       da.Fill(dt); 
       cmd.Dispose(); 
       connection.Close(); 
      } 
     } 
     catch (Exception ex) { Response.Write(ex.Message); } 

     #endregion 

     #region Create accordion with properties 

     Accordion acrDynamic = new Accordion(); 
     acrDynamic.ID = "MyAccordion"; 
     acrDynamic.SelectedIndex = -1;//No default selection 
     acrDynamic.RequireOpenedPane = false;//no open pane 
     acrDynamic.HeaderCssClass = "accordionHeader";//Header class 
     acrDynamic.HeaderSelectedCssClass = "accordionHeaderSelected";//Selected herder class 
     acrDynamic.ContentCssClass = "accordionContent";//Content class 

     #endregion 

     #region Create the panes 

     Label lbTitle; 
     Label lbContent; 
     AccordionPane pane; 
     string Content = ""; 


     for (int i = 0; i < dt.Rows.Count; i++) 
     { 
      if (Content == "") 
       Content += "<table class='hoverTable'><tr><th bgcolor='#5D7B9D' width='440px'><font color='#fff'>Provision</th><th bgcolor='#5D7B9D' width='120px'><font color='#fff'>Mark For Review</th><th bgcolor='#5D7B9D' width='120px'><font color='#fff'>Issue Type</th><th bgcolor='#5D7B9D' width='120px'><font color='#fff'>Resolution</th><th bgcolor='#5D7B9D' width='120px'><font color='#fff'>Feedback</th><th bgcolor='#5D7B9D' width='60px'><font color='#fff'>Edit</th></tr>"; 

      string BranchName = dt.Rows[i]["Category"].ToString(); 
      string Next_Branch = ""; 

      if (i != dt.Rows.Count - 1) 
       Next_Branch = dt.Rows[i + 1]["Category"].ToString(); 

      Content += "<tr>"; 
      Content += "<td>" + dt.Rows[i]["Provision"].ToString() + "</td>"; 
      Content += "<td>" + dt.Rows[i]["MarkForReview"].ToString() + "</td>"; 
      Content += "<td>" + dt.Rows[i]["IssueType"].ToString() + "</td>"; 
      Content += "<td>" + dt.Rows[i]["Resolution"].ToString() + "</td>"; 
      Content += "<td>" + dt.Rows[i]["Feedback"].ToString() + "</td>"; 
      Content += "<td><input type=\"submit\" ID=\"btnEdit\" name=\"ctl00$MainContent$btnEdit_OnClick\" onserverclick=\"btnEdit_OnClick()\" UseSubmitBehavior=\"False\" value=\"Edit\" /></td>"; 
      Content += "</tr>"; 

      if (BranchName != Next_Branch) //if last row of branch 
      { 
       Content += "</table>"; 
       pane = new AccordionPane(); 
       lbTitle = new Label(); 
       lbContent = new Label(); 
       pane.ID = "Pane_" + BranchName.ToString(); 
       lbTitle.Text = BranchName; 
       pane.HeaderContainer.Controls.Add(lbTitle); 
       lbContent.Text = Content; 
       pane.ContentContainer.Controls.Add(lbContent); 
       acrDynamic.Panes.Add(pane); 
       Content = ""; 
      } 
     } 

     #endregion 

     #region Add the accordion to the page 

     MyContent.Controls.Add(acrDynamic); 

     #endregion 

    } 

    protected void btnEdit_OnClick(object sender, EventArgs e) 
    { 
     MdlCommentsExtender.Enabled = true; 
     MdlCommentsExtender.Show(); 
     ScriptManager.GetCurrent(this).SetFocus(this.txtCommentBox); 
    } 

    protected void mdlCommentsOk_Click(object sender, EventArgs e) 
    { 
     MdlCommentsExtender.Hide(); 
    } 
} 

就是這樣。這就是我的全部代碼。它像冠軍一樣運行。除了一兩件事:在當前編輯按鈕由該線路在#region Create the panes部分創建:

Content += "<td><input type=\"submit\" ID=\"btnEdit\" name=\"ctl00$MainContent$btnEdit_OnClick\" onserverclick=\"btnEdit_OnClick()\" UseSubmitBehavior=\"False\" value=\"Edit\" /></td>"; 

這將導致回傳,而否定我的模式窗體。所以,我需要做的是將其更改爲一個asp:Button按鈕,以便我可以調用我的模式窗口。

誰能告訴我如何做到這一點?假設我是一個白癡(因爲我是那種),請在你的解釋中明確。

+1

我知道這可能是很多返工,但如果你創建了真正的控件(HtmlTable,HtmlRow,HtmlCell),然後在該控件集合中添加Button,不應該更容易嗎?因爲那會給你你想要的asp.net魔法。通過使用字符串concat(順便說一下,StringBuilder)沿着路線走下去,你是獨立的,整合是一個真正的噩夢。 – rene

+0

你可以嘗試使用'Content + ='​​ VDWWD

+0

VDWWD - 我試着將它改爲按鈕,它仍然回發我休息一下我的頁面加載,並有一個小的「if(Page.IsPostback)」,它進入該塊,無論我是否將它作爲一個按鈕或提交 –

回答

1

我總是試圖阻止在代碼隱藏中創建html標記,特別是如果您仍然計劃利用ASP.NET管道。如果你能確保你的controltree再生在頁面加載,你改變的代碼應該是這樣的:

Table table = null; 

string BranchName = null; 

for (int i = 0; i < dt.Rows.Count; i++) 
{ 
    TableRow tr; 
    if (BranchName != dt.Rows[i]["Category"].ToString()) 
    { 
     BranchName = dt.Rows[i]["Category"].ToString(); 
     // setup pane 
     pane = new AccordionPane(); 
     // add pane to accordion 
     acrDynamic.Panes.Add(pane); 

     // pane content 
     lbTitle = new Label(); 
     pane.ID = "Pane_" + BranchName; 
     lbTitle.Text = BranchName; 
     pane.HeaderContainer.Controls.Add(lbTitle); 

     // pane container will have the table 
     table = new Table(); 
     // set properties like class, height .. etc 
     table.CssClass = "hoverTable"; 
     // add it to a container 
     pane.ContentContainer.Controls.Add(table); 

     // top row 
     tr = new TableRow(); 
     // cells 
     TableHeaderCell th = new TableHeaderCell(); 
     th.Width = 440; 
     th.Text = "Provision"; 
     // set other properties 
     tr.Controls.Add(th); 
     // create next control 
     th = new TableHeaderCell(); 
     th.Width = 120; 
     th.Text = "Mark for Review"; 
     // set other properties 
     tr.Controls.Add(th); 
     // etc for other columns 
     table.Controls.Add(tr); 

    } 

    tr = new TableRow(); 
    TableCell tc = new TableCell(); 
    tc.Text = dt.Rows[i]["Provision"].ToString(); 
    tr.Controls.Add(tc); 
    tc = new TableCell(); 
    tc.Text = dt.Rows[i]["MarkForReview"].ToString(); 
    tr.Controls.Add(tc); 
    // etc for other columns 
    // add the button 
    tc = new TableCell(); 
    Button button = new Button(); 
    button.Text = "Edit"; 
    button.UseSubmitBehavior = false; 
    button.Click += new EventHandler(btnEdit_OnClick); 
    tc.Controls.Add(button); 
    tr.Controls.Add(tc); 

    table.Controls.Add(tr); 
} 

我是不知道的名稱和ID。我期望控件在Button控件的Render方法中會得到一個合適的名稱和id。

+0

這對1窗格工作,但沒有其他人出現。當我嘗試添加按鈕時出現錯誤.Click line:不能隱式地將類型'void'轉換爲'System.EventHandler'。任何想法如何解決這些問題? –

+0

我修復了button.Click for你並修復了窗格bug ....(更改了靜態0以使用'我'...) – rene

+0

這很好用。最後一個questi我不會讓你感到煩惱;我有一個我在代碼中分配給表的類(

)。它基本上增加了一些CSS,以便你在上面盤旋的任何一行都會改變顏色。你可以使用這段代碼給一個表分配一個類嗎?如果是這樣,我該怎麼做? –