<div class="controls">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<h1>Create a new event
<asp:TextBox ID="EventName_TB" runat="server" CssClass="control-label"></asp:TextBox>
starting on
<asp:TextBox ID="StartDate_TB" runat="server" Style="color: #727272 !important; font-size: 24px; font-weight: 100;" CssClass="span2 input-xlarge datepicker" placeholder="mm/dd/yy"></asp:TextBox>
for
<asp:DropDownList ID="EventDuration_DDL" runat="server" Style="color: #727272 !important; font-size: 24px; font-weight: 100;" CssClass="span1" AutoPostBack="true">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
</asp:DropDownList>
days. </h1>
</ContentTemplate>
</asp:UpdatePanel>
</div>
This is my C# code
private void EventDuration()
{
Labeldiv.Controls.Clear();
DateTime dt = DateTime.Parse(StartDate_TB.Text);
int Duration = Int32.Parse(EventDuration_DDL.SelectedItem.ToString());
UpdatePanel up = new UpdatePanel();
up.ID = "UpdatePanel8";
up.UpdateMode = UpdatePanelUpdateMode.Conditional;
for (int id = 0; id < Duration; id++)
{
Label NewLabel = new Label();
NewLabel.ID = "Label" + id;
var eventDate = dt.AddDays(id);
NewLabel.Text = eventDate.ToLongDateString();
CheckBox newcheck = new CheckBox();
newcheck.ID = "CheckBox" + id;
newcheck.AutoPostBack = true;
newcheck.CheckedChanged += new EventHandler(newcheck_CheckedChanged);
up.ContentTemplateContainer.Controls.Add(NewLabel);
this.Labeldiv.Controls.Add(NewLabel);
up.ContentTemplateContainer.Controls.Add(newcheck);
this.Labeldiv.Controls.Add(new LiteralControl("<br/>"));
}
this.Labeldiv.Controls.Add(up);
}
actually it gives the labels & checkboxes according to my condition before I create the Update Panel dynamically...
It gives only one Label & one checkbox. Is this correct way to create Update Panel dynamically?
Create an UpdatePanel instance then create your "child" controls and add them to the Controls collection of the ContentTemplateContainer property of the UpdatePanel. Finally add the UpdatePanel to the Form and you're done. You'll need a on your page.
Check thisLink : Link that shows a simple example.
It could be that you are adding controls at the wrong page event.
Try to use Init or PreInit event.
Related
How can I refresh a web controller inside a gridview? I have a web controller inside a gridview as you can see here:
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%" style="background: #F5F5F5">
<div id="div<%# Eval("contrato_id") %>" style="overflow: auto; display: none; position: relative; left: 15px; overflow: auto">
<div class="ExpandTableHeader">
</div>
<div class="body">
<div id="tabs-ComponentesSection" class="menusection">
<TWebControl5:WebControl5 ID="Header8" runat="server" />
</div>
</ItemTemplate>
</asp:TemplateField>
I want to refresh the following controller.
<TWebControl5:WebControl5 ID="Header8" runat="server" />
On the following button click.
<asp:Button class="btn btn-primary" ID="btnChooseContract" runat="server" Text="Elegir contrato" OnClick="AddContractToQuote" />
Here is the code behind of the button.
protected void AddContractToQuote(object sender, EventArgs e)
{
}
Used some code that looks like this YEARS ago...
for (int x = 0; x < GridViewName.Rows.Count; x++)
{
GridViewRow row = (GridViewRow) GridViewName.Rows[x];
Control contr = (control) row.Cells[1].FindControl("NameOfYourControl");
contr = //Another similar control that looks like the first, but different
}
I am currently dynamically generating ASP elements on a website. The site displays items for a specific motorcycle based on the make/model/year.
Issue 1: I have all of the items displaying correctly, on the page, but I cannot figure out how to get my CSS styling to apply to the dynamically generated items.
Heres what I have, it querys the items into a datatable first:
try
{
int tempflag = 0;
foreach (DataRow tempRow in dt.Rows)
{
string tempCategory = tempRow[4].ToString();
string tempPartUrl = tempRow[5].ToString();
string tempImageUrl = tempRow[6].ToString();
string tempPartBrand = tempRow[7].ToString();
string tempPartName = tempRow[8].ToString();
string tempPrice = tempRow[9].ToString();
string tempStoreName = tempRow[10].ToString();
//panel to hold an item
Panel pnlItem = new Panel();
pnlItem.ID = "id_pnItem_" + tempflag;
pnlItem.CssClass = "itemDiv";
divSearchResultsBody.Controls.Add(pnlItem);
//image
Image tpImg = new Image();
tpImg.ID = "id_tpImg_" + tempflag;
tpImg.ImageUrl = tempImageUrl;
pnlItem.Controls.Add(tpImg);
Label lblBR = new Label();
lblBR.ID = "frt" + tempflag;
lblBR.Text = "<br />";
pnlItem.Controls.Add(lblBR);
//brand
Label lblBrand = new Label();
lblBrand.ID = "id_lblBrand_" + tempflag;
lblBrand.Text = tempPartBrand;
pnlItem.Controls.Add(lblBrand);
//name
Label lblName = new Label();
lblName.ID = "id_lblName_" + tempflag;
lblName.Text = tempPartName;
pnlItem.Controls.Add(lblName);
//price
Label lblPrice = new Label();
lblPrice.ID = "id_lblPrice_" + tempflag;
lblPrice.Text = tempPrice;
pnlItem.Controls.Add(lblPrice);
//url
HyperLink hyp = new HyperLink();
hyp.ID = "id_link_" + tempflag;
hyp.NavigateUrl = tempPartUrl;
hyp.Text = "View Part";
pnlItem.Controls.Add(hyp);
tempflag++;
}
}
catch (Exception ex)
{
handleTheError(ex);
}
I'm not sure how to access my css sheet from the .aspx.cs. so all the elements are just smashed together one after another each in a panel.
Issue 2: I am also generating checkboxes based on the item's category's so I can create a filter. I grab distinct categories with a query and fill them into a datatable. I have all the checkboxes but I have no idea how to go about generating an event for them because they are dynamic, and I've only used events that are hard coded. The code is similar:
foreach (DataRow tempRow in dt2.Rows)
{
string tempCategory = tempRow[0].ToString();
CheckBox cbCategory = new CheckBox();
cbCategory.ID = "id_cbCategory_" + tempflag2;
cbCategory.Text = tempCategory;
divFilterCategory.Controls.Add(cbCategory);
tempflag2++;
}
Issue 3: There are two divs that are next to each other, one for filter results that are generated, and another for the item results that are generated. As I mentioned they both generate properly at the moment, but for some reason when the items generate it shoots the second div halfway down the page. Pics:Before searching, After searching, Filters halfway down the page
Heres what the initial design looks like
<div runat="server" id="divSearch" class="divCenterItems">
<table class="searchTable">
<tr style="width: 100%">
<td style="width: 29%">
<div runat="server" id="divSearchFiltersHeader" class="divSearchHeaders">
<asp:Label runat="server" ID="lblFilterResults" Text="Filter Results" CssClass="headerLabels"></asp:Label>
</div>
<div runat="server" id="divSearchFiltersBody">
<div runat="server" id="divFilterCategory"></div>
<div runat="server" id="divFilterBrand"></div>
<div runat="server" id="divFilterPrice"></div>
</div>
</td>
<td style="width: 69%">
<div runat="server" id="divSearchResultsHeader" class="divSearchHeaders">
<asp:Label runat="server" ID="lblSearchTitle" Text="Search Results Title" CssClass="headerLabels"></asp:Label>
</div>
<div runat="server" id="divSearchResultsBody">
<div runat="server" id="divItemsMSS"></div>
<div runat="server" id="divItemsRMATVMC"></div>
<div runat="server" id="divItemsDK"></div>
</div>
</td>
</tr>
</table>
</div>
Styles:
.divCenterItems
{
border: 1px solid black;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.searchTable
{
width: 100%;
padding-left: 5px;
padding-right: 5px;
}
.divSearchHeaders
{
border: 1px solid black;
background-image: url('../Resources/header.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 30px;
}
.headerLabels
{
color: white;
font-size: 16px;
line-height: 2em;
padding-left: 10px;
}
Im not sure if any of these styles would be causing the filter div to act like this, but I've been playing around with them with no success. Any tips for tricks for these types of situations would be greatly appreciated, I'm new to dynamically generating elements. Cheers!
Issue 1:
Consider Using the Literal Web Control and putting html elements inside of the text with your desired classes.
var ltl = new Literal();
ltl.ID = "id_ltlName_" + tempFlag;
ltl.Text = $"<div class='class1'>{tempRow[1]}></div><div>{tempRow[2]}";
pnlItem.Controls.Add(ltl);
You could also create an ascx user control, and load instances of that dynamically if you want more functionality inside of the panel.
Issue 2
To add events to a dynamically created control, use the += operator to add a handler to be called when the event is fired. For Example, to handle the CheckChanged event for a checkbox. Remember that with dynamic controls, these event handlers have to be registered on every postback.
var checkbox1 = new CheckBox();
checkbox1.CheckedChanged += ClickedCheckBox;
private void ClickedCheckBox(object sender, EventArgs e)
{
var checkbox1 = sender as CheckBox;
}
Issue 3
You have 2 tds next to each other. Try vertical-align:top on both of them
<div runat="server" id="divSearch" class="divCenterItems">
<table class="searchTable">
<tr style="width: 100%">
<td style="vertical-align:top;width: 29%;">
</td>
<td style="vertical-align:top;width: 69%">
</td>
</tr>
</table>
</div>
I am using a web page which contains a grid view with the list of datas in that. I want to display the selected grid view row details into a popup or dialogue window on row click event.For that I have created one DIV and design it with proper control values. But I am not able to display the DIV on row click event.
Here is my Source code:
<div id="divPopup" runat="server" style="border:1px solid black;display:none ">
<fieldset>
<legend>Disabling User Account</legend>
<table style="height: 112px; font-weight: 700; font-size: medium; font-family: Cambria; color: #000000; width: 316px">
<tr>
<td>
<asp:Label ID="lblGlobalId1" runat="server" Text="Global ID" />
</td>
<td>
</td>
<td>
<asp:Label ID="lblGlobalIdValue1" runat="server" Text="80007929" />
</td>
</tr>
.......
.......
<asp:Button ID="btnContinue1" runat="server" Height="26px" style="font-weight: 700"
Text="Continue" Width="92px" />
</table>
</fieldset>
</div>
.aspx Code is,
protected void grdADActionList_RowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (GridViewRow gvr in grdADActionList.Rows)
{
e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.background='#eeff00';";
e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.background='#ffffff';";
e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.grdADActionList, "Select$" + e.Row.RowIndex);
}
}
protected void grdADActionList_SelectedIndexChanged(object sender, EventArgs e)
{
//lblGlobalIDValue.Text = "278900078";
//lblGivenNameValue.Text = "Surya";
//lblEmailValue.Text = "surya#abc.com";
divPopup.Visible = true;
}
On page load event I am disabling that DIV visibility and on SelectedIndexChanged event I am enabling the DIV control visibility but the DIV control could not appear on the page. Can you please let me know How can i display the DIV popup control on my page? also I want to display it on the page center.
Please suggest me about the problem and tell me the solution for the same.
Thanks.
I am having problems with a button not firing within my asp.net page and I was wondering if anyone can give me in sight to this problem.
First you need to know is that i use modalpopupexntender to pop up panels and on the last panel i start adding controls to an existing panel dynamically.
Here is the panel that exists and controls are added dynamically
<asp:ModalPopupExtender ID="ModalPopupExtender10" runat="server" TargetControlID="hndPage5" OkControlID="imgExitEdit1"
PopupControlID="pnlReview" BackgroundCssClass="LoadingBackground" >
</asp:ModalPopupExtender>
<input type="hidden" runat="server" id="hndPage5" />
<asp:Panel runat="server" ID="pnlReview" CssClass="Modal450h450w" Height="300px">
This is table
</asp:Panel>
I start adding controls to the above panel from this segment of code also this event is from another modalpopupextender with a button :
protected void btnReview_Button_Click(object sender, EventArgs e)
{
HtmlTable table = new HtmlTable();
DataTable tblBillingAddress = Members.MemberBillingAddressSearch(MemberID);
for (int i = 0; i < tblBillingAddress.Columns.Count; i++)
{
CreateRow(tblBillingAddress.Columns[i].ColumnName.ToString(), tblBillingAddress.Rows[0][tblBillingAddress.Columns[i].ColumnName].ToString(), table);
}
Button btn = (Button)sender;
if (btn.ID == "btnIbanReview")
{
CreateRow("thing", thing.Text, table);
CreateRow("other", other.Text, table);
}
else if (btn.ID == "btnrrTReview")
{
CreateRow("this", this.Text, table);
}
Button btnBack = new Button();
Button btnConfirm = new Button();
btnBack.ID = "btnReviewClose";
btnConfirm.ID = "btnReviewConfirm";
btnBack.Text = "Back";
btnConfirm.Text = "Confirm";
btnBack.Click += new EventHandler(this.btnAdd_Close_Click);
btnConfirm.Click += new EventHandler(this.btnConfirm_Click);
HtmlTableCell cell1 = new HtmlTableCell();
HtmlTableCell cell2 = new HtmlTableCell();
cell1.Controls.Add(btnBack);
cell2.Controls.Add(btnConfirm);
HtmlTableRow rr = new HtmlTableRow();
rr.Cells.Add(cell1);
rr.Cells.Add(cell2);
table.Rows.Add(rr);
pnlReview.Controls.Add(table);
pnlReview.Visible = true;
ModalPopupExtender10.Show();
}
Here is the CreateRow() method :
private void CreateRow(string heading, string value, HtmlTable hTable)
{
HtmlTableRow row = new HtmlTableRow();
HtmlTableCell cHeading = new HtmlTableCell();
HtmlTableCell cValue = new HtmlTableCell();
cHeading.InnerText = heading;
cHeading.Style.Add("font-weight", "bold");
row.Cells.Add(cHeading);
cValue.InnerText = value;
row.Cells.Add(cValue);
hTable.Rows.Add(row);
}
And here is the event that I created :
void btnConfirm_Click(object sender, EventArgs e)
{
ModalPopupExtender10.Hide();
}
I have tried creating the button in the Page_Init(), Page_Onit() and Page_Load() and later on i add the control the panel after its created.
Any help or in sight would be appreciated
ModalPopupExtender has a property CancelcontrolID or somthing like this...
if you are spacifying TargetControlID then specify CancelControlID too
<ajaxToolkit:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Button ID="fake2" runat="server" Style="display: none" />
<Ajax:ModalPopupExtender ID="mpe_Mail" runat="server" BackgroundCssClass="modalBackground"
TargetControlID="fake2" PopupControlID="pnl_Mail" CancelControlID="btn_Close">
</Ajax:ModalPopupExtender>
<asp:Panel ID="pnl_Mail" runat="server" Style="display: none;" CssClass="modalBackground1">
<table width="350" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #fff;">
<tr>
<div class="Lecture-Planform-headx">
<asp:Label ID="lbl_Employer" runat="server" />
</div>
</tr>
<tr>
<td align="center">
<div>
--This is table--
</div>
</td>
</tr>
<tr>
<td>
<div align="center">
<asp:Button ID="btn_Close" runat="server" CausesValidation="false" Text="Back" CssClass="activebutton2" OnClick="<--Add Your Function Hear-->" />
</div>
</td>
</tr>
</table>
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:UpdatePanel>
If some one have any suggestion or other way kindly help.
I have
1 Textbox
1 Label
1 LinkButton
when I'll click to lnk_NameEdit button txtUserName will visible and lblusername buttons must unvisible and the text in lable will display in TextBox
<td width="237" class="value_td" style="border: 0; border-top: 1px solid #afc0f3;">
<asp:Label ID="lblusername" runat="server" Text="Santosh"></asp:Label>
<asp:TextBox ID="txtUserName" runat="server" Width="300" Visible = "false">
</asp:TextBox>
</td>
<td width="64" class="epotions_td" style="border: 0; border-top: 1px solid #afc0f3;">
<span>
<asp:LinkButton ID="lnk_NameEdit" runat="server" CommandName="Edit" OnClientClick = 'ControlVisible();'>Edit</asp:LinkButton>
</span>|
</td>
<script language="javascript" type="text/javascript">
function ControlVisible() {
var lbl = document.getElementById("<%= lblusername.ClientID %>");
var txt = document.getElementById("<%= txtUserName.ClientID %>");
lbl.visible = false;
txt.visible = true;
}
</script>
<td width="237" class="value_td" style="border: 0; border-top: 1px solid #afc0f3;">
<asp:Label ID="lblusername" runat="server" Text="Santosh"></asp:Label>
<asp:TextBox ID="txtUserName" runat="server" Width="300" Visible = "false">
</asp:TextBox>
</td>
and I have 1 LinkButton
<td width="64" class="epotions_td" style="border: 0; border-top: 1px solid #afc0f3;">
<span>
<asp:LinkButton ID="lnk_NameEdit" runat="server" CommandName="Edit" OnClientClick = 'ControlVisible();'>Edit</asp:LinkButton>
</span>|
</td>
when I'll click to lnk_NameEdit button txtUserName will visible and lblusername buttons must unvisible and the text in lable will display in TextBox
<script language="javascript" type="text/javascript">
function ControlVisible() {
var lbl = document.getElementById("<%= lblusername.ClientID %>");
var txt = document.getElementById("<%= txtUserName.ClientID %>");
lbl.visible = false;
txt.visible = true;
}
try this,
lbl.style.visibility="visible";
txt.style.visibility="hidden";
Assuming the rest of the code is correct, lbl and txt will be dom elements. Dom elements do not have visible properties, but you can hide them by setting their styles' display properties:
lbl.style.display = "none";
EDIT
Make sure you run this code after your dom is ready. That you were getting null from document.getElementById probably means that you were running this script right in your head section. As a result, your dom had not yet been parsed, and your label and textbox didn't exist yet.
The easiest way to fix this is to put the script section at the very end of your body. Another way would be to call ControlVisible from your body's onload: <body onload="ControlVisible()">
There is a big difference between server executed code and client side code.
In the moment you have a mix.
You can set the visibility of an element in client side (javascript) setting the display property
http://www.w3schools.com/jsref/prop_style_display.asp
Take a look at this tutorial: http://www.javascriptkit.com/javatutors/dom3.shtml
You can change this piece og code from this:
lbl.visible = false;
txt.visible = true;
to this:
lbl.style.display= "none";
txt.style.display= "block";
If you are working with server side code (e.g Load event, asp. net button click, etc) you can use the visible property of your object.
Sample fiddle: http://jsfiddle.net/WzTSR/
Your Textbox with ID txtUserName has Visible = "false" which means it's not being sent to the browser - thus you get client side error.
Change this to:
<asp:TextBox ID="txtUserName" runat="server" Width="300" style="display: none;">
Which will still make it invisible by default, then change the lines to:
lbl.style.display = "none";
txt.style.display = "";