2016-08-04 4 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 (btw lookup StringBuilder)를 사용하여 경로를 따라 가면 통합 자체가 진짜 악몽입니다. – rene

+0

당신은'Content + = "<입력 유형 = \"버튼 \ "ID = ..."를 시도 할 수 있습니다.이 버튼을 클릭하면 다시 게시가 발생하지 않습니다 – 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을 수정하고 창 버그를 수정했습니다. (정적 0을 사용하도록 변경됨 'i' ...) – rene

+0

이것은 훌륭하게 작동합니다. 그리고 나는 너를 괴롭히지 않을 것이다. 내 코드에서 테이블에 할당 한 클래스가 있습니다 (

). basicalls는 CSS를 추가하여 위를 가리키고있는 행이 색상을 변경합니다. 이 코드를 사용하여 테이블에 클래스를 할당 할 수 있습니까? 그렇다면 어떻게해야할까요? –

관련 문제