我用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按鈕,以便我可以調用我的模式窗口。
誰能告訴我如何做到這一點?假設我是一個白癡(因爲我是那種),請在你的解釋中明確。
我知道這可能是很多返工,但如果你創建了真正的控件(HtmlTable,HtmlRow,HtmlCell),然後在該控件集合中添加Button,不應該更容易嗎?因爲那會給你你想要的asp.net魔法。通過使用字符串concat(順便說一下,StringBuilder)沿着路線走下去,你是獨立的,整合是一個真正的噩夢。 – rene
你可以嘗試使用'Content + =' VDWWD
VDWWD - 我試着將它改爲按鈕,它仍然回發我休息一下我的頁面加載,並有一個小的「if(Page.IsPostback)」,它進入該塊,無論我是否將它作爲一個按鈕或提交 –