How to hide a div using an ASP.NET Checkbox? - asp.net

i'm trying to do this assigning an method to the event on the checkbox tag like this:
OnCheckedChanged="ShowDiv"
However, i'm not succesfull at all. How to do it? Here's my method:
public void ShowDiv(object sender, System.EventArgs e)
{
var div = FindControl("ListaEmOutrosDocumentos") as HtmlGenericControl;
var checkbox = FindControl("Principal") as CheckBox;
if(checkbox.Checked == true)
{
div.Style.Clear();
div.Style.Add("display","block");
}
else
{
div.Style.Clear();
div.Style.Add("display","none");
}
}

You might consider using an ASP.NET Panel control instead of a div. That will have a Visible property that you can set.

Quick way using server side code only
Aspx
<div id="myDiv" runat="server" style="height:200px;width:100px;background-color:Blue"></div>
<asp:CheckBox ID="chkShowHideDiv" runat="server" AutoPostBack="True"
oncheckedchanged="chkShowHideDiv_CheckedChanged" Text="Hide Div" />
Code behind
protected void chkShowHideDiv_CheckedChanged(object sender, EventArgs e)
{
myDiv.Visible = chkShowHideDiv.Checked ? false : true;
}

I did this and it worked.
<div id="ListaEmOutrosDocumentos" runat="server">
<asp:CheckBox runat="server" ID="Principal" AutoPostBack="True" OnCheckedChanged="ShowDiv"/>
</div>
Code Behind
public void ShowDiv(object sender, System.EventArgs e)
{
var div = ListaEmOutrosDocumentos as HtmlGenericControl;
var checkbox = sender as CheckBox;
if (checkbox.Checked == true)
{
div.Style.Clear();
div.Style.Add("display", "block");
}
else
{
div.Style.Clear();
div.Style.Add("display", "none");
}
}

Related

ASP.Net NPE inside hidden parent container if not asp control

Going back from JSF to ASP.Net I have a problem in following markup:
I get a null pointer exceptin on this.value within the panel component. I even called DataBind() on the panel itself.
<asp:Panel id="pnl" runat="server" visible="<%# this.value != null%>">
<%= this.value.Foo %>
</asp:Panel>
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
if (this.value == null)
return;
this.pnl.DataBind();
}
Must i use an asp control always?
You probably have mistakes here :
You should do inside : <%# this.value.Foo %>
Capital letter : Visible {capital}).
The code inside the panel will still be executed even if the panel is not visible. It will not be rendered into the result but it will be executed. I would recommend that you use control properties and set your values via code behind on controls that are not repeating anything
<asp:Panel id="pnl" runat="server">
<asp:Literal ID="literal" runat="server" />
</asp:Panel>
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
if(this.value != null)
{
pnl.Visible = true;
literal.Text = this.value.Foo;
}
else
{
pnl.Visible = false;
}
}

Why does my button control not display in the code behind?

I have the following code in my aspx page:
<asp:Literal ID="ltPost" runat="server"></asp:Literal>
and this in my code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
BindData();
}
}
protected void BindData() {
str.Append(#"<asp:Button ID=*btnEditReply* runat=*server* CssClass=*button-action m-r-5* Text=*Sửa phản hồi* ValidationGroup=*AddSave*/>");
ltPost.Text = str.ToString().TrimEnd(',').Replace('*', '"');
}
I don't understand this; Why won't the button btnEditReply display?
To add a server control, you have to use Controls.Add(). Also, you can't add a button to a literal, so it's better to use a Placeholder.
C#:
Button editButton = new Button();
editButton.ID = "btnEditReply";
editbutton.Text = "Sửa phản hồi";
// .. etc
placeHolder.Controls.Add(editButton);
HTML:
<asp:Placeholder id="placeHolder" runat="server" />
Reference: http://msdn.microsoft.com/en-us/library/kyt0fzt1(v=vs.100).aspx

C# - Event handler for dynamic buttons

I have a textbox and submit button created using the design mode.
When the submit button is pressed, it will retrieve the user input from the textbox and then make a query to my database.
It will then display a list of dynamic buttons according to the information retrieved from my database.
However, the event handler for the buttons does not fire when clicked. I guess my problem is the postback but I cannot create those buttons in page_load etc. because I need to get the user input (from the textbox when submit button is pressed) before i can load the buttons.
How can i solve this problem?
Thank you.
Edit (codes):
protected void subBtn_Click(object sender, EventArgs e)
{
//database setup codes
.......
while (reader.Read())
{
Button detailsBtn = new Button();
detailsBtn.Text = reader["fName"].ToString();
//doesn't fire
detailsBtn.Click += new EventHandler(detailsBtn_Click);
memPanel.Controls.Add(detailsBtn);
}
}
Main problem is Postback regenerate dynamic controls on each postback if those controls does not exists.
For quick demo see this code
ASPX CODE
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
<asp:Panel ID="pnl" runat="server"></asp:Panel>
</form>
ASPX.CS CODE
protected void Page_Load(object sender, EventArgs e)
{
if(IsPostBack)
{
generate();
}
}
public void generate()
{
if (!pnl.HasControls())
{
for (int i = 0; i < 4; i++)
{
Button detailsBtn = new Button();
detailsBtn.Text = "fName" + i.ToString();
detailsBtn.ID = i.ToString();
detailsBtn.Click += new EventHandler(detailsBtn_Click);
pnl.Controls.Add(detailsBtn);
}
}
}
protected void Button1_Click(object sender, EventArgs e)
{
generate();
}
protected void detailsBtn_Click(object sender, EventArgs e)
{
}
Sound to me like you could easily refactor your page to use a simple <asp:Repeater runat="server" ..></asp:Repeater> instead of dynamically adding controls to a Panel.
Here is a very simple complete sample:
RepeaterTest.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:TextBox ID="theTextBox" runat="server"></asp:TextBox>
<asp:Button ID="theButton" runat="server" OnClick="theButton_Click" Text="Click me" />
<asp:Repeater ID="test" runat="server">
<ItemTemplate>
<asp:Button ID="theRepeaterButton" runat="server" Text='<%# Eval("fName") %>' OnClick="theRepeaterButton_Click" />
</ItemTemplate>
</asp:Repeater>
</asp:Content>
RepeaterTest.aspx.cs
public partial class RepeaterTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void theButton_Click(object sender, EventArgs e)
{
string filter = theTextBox.Text;
// below row simulates fetching data using the filter text in the text box
var data = Enumerable.Range(0, 20).Select(i => new { fName = filter + " " + i });
test.DataSource = data;
test.DataBind();
}
protected void theRepeaterButton_Click(object sender, EventArgs e)
{
var button = (Button)sender;
// do something here based on text/commandname/commandargument etc of the button
}
}

Radio button doesn't get selected after a post back

I have an item template within repeater:
<ItemTemplate>
<li>
<input type="radio"
value="<%# GetAssetId((Guid) (Container.DataItem)) %>"
name="AssetId"
<%# SelectAsset((Guid) Container.DataItem) %> />
</li>
</ItemTemplate>
I have a method that compares ids and decides whether to check the radio button.
protected string SelectAsset(Guid uniqueId)
{
if (uniqueId == GetSomeId())
return "checked=\"checked\"";
return string.Empty;
}
SelectAsset gets hit, but it doesn't select a radio button on a post back, but it does work if I just refresh the page. What am I doing wrong here?
Answer here: How to display "selected radio button" after refresh? says that it's not possible to achieve, is this really the case?
Thank you
Update
It appears that view state isn't available for simple controls if they don't have a runat attribute. I have solved this by using a custom GroupRadioButton control. Thank you for your help.
I'd suggest using a RadioButtonList:
Page Code
<asp:RadioButtonList RepeatLayout="UnorderedList" OnSelectedIndexChanged="IndexChanged" AutoPostBack="true" ID="RadioRepeater" runat="server" />
<asp:Label ID="SelectedRadioLabel" runat="server" />
Code Behind
if (!Page.IsPostBack)
{
/* example adds items manually
- you could iterate your datasource here as well */
this.RadioRepeater.Items.Add(new ListItem("Foo"));
this.RadioRepeater.Items.Add(new ListItem("Bar"));
this.RadioRepeater.Items.Add(new ListItem("Baz"));
this.RadioRepeater.SelectedIndex = this.RadioRepeater.Items.IndexOf(new ListItem("Bar"));
this.RadioRepeater.DataBind();
}
protected void IndexChanged(object sender, EventArgs e)
{
this.SelectedRadioLabel.Text = string.Format("Selected Item Text: {0}", this.RadioRepeater.SelectedItem.Text);
}
I assume you only need to select one item.
As described in the comments, it even works to access the SelectedItem in the Page_Loadevent handler:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// previous code omitted
}
else
{
string foo = this.RadioRepeater.SelectedItem.Text;
}
}
If you are creating all your controls dynamically at run-time (directly from code), then things are a little different. Here is the code that I used:
Page Code
<form id="form1" runat="server">
</form>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
RadioButtonList rbl = new RadioButtonList();
rbl.AutoPostBack = true;
rbl.SelectedIndexChanged += rbl_SelectedIndexChanged;
rbl.Items.Add("All");
// generate your dynamic radio buttons here
for (int i = 0; i<5; i++)
{
rbl.Items.Add(string.Format("Dynamic{0}", i));
}
form1.Controls.Add(rbl);
if (!Page.IsPostBack)
{
rbl.SelectedValue = "All";
PopulateTextBox(rbl.SelectedValue);
}
}
void rbl_SelectedIndexChanged(object sender, EventArgs e)
{
RadioButtonList foo = (RadioButtonList)sender;
PopulateTextBox(foo.SelectedValue);
}
void PopulateTextBox(string selection)
{
TextBox box = new TextBox();
box.Text = selection;
form1.Controls.Add(box);
}

ASP.Net dropdown control loses state after being set dynamically through javascript

I have an asp.net dropdownlist control. There are two ways it can be selected.
The first is through a button that sets the value in the drop-down list via javascript.
The second is by manually selecting the dropdownlist option.
Each of these methods work by themselves.
If I do the first followed by the second and then hit save - the value that is saved is the value set by the javascript. The manual selection did not have any effect.
Does anyone know why this is the case?
EDIT:
In the HTML Head section:
<script>
function Select(allocationId) {
document.getElementById('Accounts').value=allocationId;
}
</script>
In the HTML Body:
<asp:DropDownList ID="Accounts" runat="server"></asp:DropDownList>
<button onclick="Select(<%#"'" + DataBinder.Eval(Container.DataItem, "Associated_AccountId") + "'"%>)" type="button">Select</button>
<asp:Button ID="btn_SaveAndClose" runat="server" Text="Save and Close" OnClick="btn_SaveAndClose_Click"></asp:Button>
In the code behind:
protected void btn_SaveAndClose_Click(object sender, System.EventArgs e)
{
int id = Convert.ToInt32(this.Accounts.SelectedValue);
}
EDIT:
Funnily enough - when I use:
int id = Convert.ToInt32(Request.Form["Accounts"]);
it works. But I don't know why.
The most common mistake that would cause this is that you're likely populating or binding that DropDownList every Page_Load or Init, thus erasing whatever state you entered the page with. Be sure to do a (!IsPostBack) check before populating your DropDownList.
This worked for me: (try removing the !IsPostBack check and see if the behavior is similar to what you're seeing in your app)
page content
<asp:DropDownList ID="ddlTest" runat="server"></asp:DropDownList>
<button onclick="select(3);">Select Three</button>
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" />
<script type="text/javascript" language="javascript">
//<![CDATA[
function select(value) {
var ddlTest = document.getElementById('<%=ddlTest.ClientID%>');
for (var i = 0; i < ddlTest.options.length; i++) {
if (ddlTest.options[i].value == value) {
ddlTest.selectedIndex = i;
return;
}
}
}
//]]>
</script>
<asp:Label ID="lblResult" runat="server"></asp:Label>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
PopulateDropDown();
}
protected void btnSave_Click(object sender, EventArgs e)
{
lblResult.Text = ddlTest.SelectedValue;
}
void PopulateDropDown()
{
Dictionary<int, string> data = new Dictionary<int, string>();
data.Add(1, "One");
data.Add(2, "Two");
data.Add(3, "Three");
ddlTest.DataSource = data;
ddlTest.DataTextField = "Value";
ddlTest.DataValueField = "Key";
ddlTest.DataBind();
}

Resources