Update panel and javascript - asp.net

I have a user control whose structure is -
<updatepanel UpdateMode="Always">
<ContentTemplate>
<asp:FormView>
<EditItemTemplate>
<table>
<tr id='tr1'>
<td>
Textbox1
btn1
</td>
</tr>
<tr id='tr2'>
<td>
textbox2
</td>
</tr>
<table>
</EditItemTemplate>
</asp:FormView>
</ContentTemplate>
</updatepanel>
On page load I use following to hide tr2
ClientScriptManager cs = Page.ClientScript;
csText.AppendLine("");
csText.AppendLine("if(document.getElementById('tr2')!=null)
document.getElementById('tr2').style.display = 'none';");
csText.AppendLine("");
cs.RegisterStartupScript(this, this.GetType(), csName, csText.ToString(), false);
This part is working fine. Now on click of the btn1 I am popping up the modal popup extendar control. This causes the tr2 to show again. I know that the script needs to be inline with the updatePanel. I tried using ScriptManager.RegisterStartupScript(....); but does not work. Also the updateMode needs to be always so that the data from pop extendar can be put inside the Textbox1
All the help is appreciated.
Thank you

Since you're using an UpdatePanel, you don't really need any javascript for this.
If you change your tr2 element to ...
<tr id="tr2" runat="server">
this will allow you to control it in your server side code. To hide your tr2 row, simply do...
tr2.Style["display"] = "none";
this should keep things in sync nicely on callbacks.

Related

Using TextBox TextChanged event to enable or disable a button control in asp.net

I am using an asp TextBox control with its TextChanged event and my goal is to capture text as a user enters it. If there are one or more characters entered, I would like a button control to be enabled without the user having to leave the TextBox control.
My source code for the TextBox on the aspx page is
<asp:TextBox ID="NewSpendingCategoryTextBox" MaxLength="12" runat="server"
AutoPostBack="True"
OnTextChanged="NewSpendingCategoryTextBox_TextChanged"
ViewStateMode="Enabled" >
</asp:TextBox>
and my source code on the code behind page is
Protected Sub NewSpendingCategoryTextBox_TextChanged(sender As Object, e As System.EventArgs) Handles NewSpendingCategoryTextBox.TextChanged
Dim strSpendingCategoryTextBox As String = Nothing
strSpendingCategoryTextBox = NewSpendingCategoryTextBox.Text
If strSpendingCategoryTextBox.Length <= 0 Then
Me.NewSpendingCategoryInsertButton.Enabled = False
Else 'strSpendingCategoryTextBox.Length > 0
Me.NewSpendingCategoryInsertButton.Enabled = True
End If 'strSpendingCategoryTextBox.Length <= 0
End Sub
So it appears I have to use javascript to enable or disable the insert button. Can someone guide me on how to get an element within a table? The table sits in a Panel as well.
below is the aspx code...
<asp:Panel ID="AddSpendingCategoryPanel" Visible="false" runat="server">
<table class="AddNewTable">
<tbody>
<tr>
<td>
<asp:Label ID="lblSpend" runat="server"
Text="Spending Category:">
</asp:Label>
</td>
<td>
<asp:TextBox ID="txtSpend" MaxLength="12"
runat="server"
AutoPostBack="True"
OnTextChanged="txtSpend_TextChanged"
OnKeyDown="return CheckSpendTextBoxValue()"
ViewStateMode="Enabled" >
</asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button CssClass="frmbtn" ID="btnInsertSpend"
runat="server" Text="Insert" />
</td>
<td>
<asp:Button CssClass="frmbtn" ID="btnCancelSpend"
runat="server" Text="Cancel"
CausesValidation="False" />
</td>
</tr>
</tbody>
</table>
</asp:Panel>
Run this code in the OnKeyPress event or consider JavaScript. The textbox does not fire the Text_Changed event til Tab or Enter are used.
Simplify the boolean check.
Me.NewSpendingCategoryInsertButton.Enabled = (NewSpendingCategoryTextBox.Text.Length <> 0)
I'm not sure exactly how you would do it. But the ASP.NET code is executed on the server that is hosting the web page.
I'd highly recommended doing it on JavaScript which can be run client side. Hopefully this article is of use to you.
How to check if a textbox is empty using javascript

Placeholder inside an UpdatePanel

A little pseudo code to provide some background:
I have an ASPX with a placeholder and a button
When the button is clicked it adds a web user control (uc1) to my placeholder
The uc has a button
When clicked it adds a different user controls (uc2) to the placeholder
Stepping through the code, if I look at the placeholder.controls.count before and after the button-click in #4 the count increases by one, as you would expect.
The problem is that the uc2 added in #4 doesn't appear on the screen. So, I wrapped my placeholder in an UpdatePanel. I've never used one before. So, I could refresh the placeholder after the uc2 was added.
relevant ASPX code
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server></ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:TabContainer ID="tcNavigation" runat="server" ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="tpWebMerchandising" runat="server" HeaderText="WEB">
<ContentTemplate>
<table cellpadding="3" cellspacing="0" border="0">
<tr>
<td valign="top" class="label">Attributes</td>
<td>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="phAttributes" runat="server"></asp:PlaceHolder><br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnAddAttribute" runat="server" Text="Add Attribute" /> | <asp:Button ID="btnCreateAttribute" runat="server" Text="Create Attribute" />
</td>
</tr>
</table>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
relevant ASCX code
For Each ctrl As Control In Parent.Page.Controls
For Each ctrl2 As Control In ctrl.Controls
For Each ctrl3 As Control In ctrl2.Controls
For Each ctrl4 As Control In ctrl3.Controls
For Each ctrl5 As Control In ctrl4.Controls
If InStr(ctrl5.GetType.ToString(), "UpdatePanel") > 0 Then 'UPDATE PANEL
up = ctrl5
End If
For Each ctrl6 As Control In ctrl5.Controls 'CONTENT TEMPLATE
For Each ctrl7 As Control In ctrl6.Controls 'PLACE HOLDER
If ctrl7.GetType.ToString() = "System.Web.UI.WebControls.PlaceHolder" Then
phAttributes = ctrl7
End If
Next
Next
Next
Next
Next
Next
Next
Dim ctrlAttributes As New AttributeControl
ctrlAttributes.AttributeName = attrName
ctrlAttributes.AttributeValue = attrValue
ctrlAttributes.ID = "ctrlAttribute-" & attrName
phAttributes.Controls.Add(ctrlAttributes)
I tried this...
up.Update()
and this...
Me.Page.RegisterStartupScript("AutoPostBackScript", "__doPostBack('UpdatePanel1', '');")
The goal is to refresh the placeholder so the new ctrlAttributes is displayed on screen.
First of all, use Parent.FindControl instead of this mess of foreach-es.

ListView programmatically adding row after databind

What I would like to achieve:
I would like a user to be able in insert a row into the listview. BUT not into a database.
What I am stuck on:
Currently I am stuck on the OnItemCommand, i dont seem to be entering the method. Any help would be great Code below.
<LayoutTemplate>
<table>
<th>
</th>
<th class="grayHeader">
<asp:Label ID="lblHeader" runat="server" />
</th>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Button runat="server" ID="btnDeletePerson" Text="-" CommandName="deletePerson"/>
</td>
<td>
<asp:Label ID="lblPerson" runat="server" Text='<% #Eval("Person") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
<InsertItemTemplate>
<tr>
<td>
<asp:Button ID="btnAddUser" runat="server" CommandName="Insert" ext="+" />
</td>
<td>
<asp:TextBox runat="server" ID="txtInsert"></asp:TextBox>
</td>
</tr>
</InsertItemTemplate>
Protected Sub ListGrantee_OnItemCommand(ByVal sender As Object, ByVal e As ListViewCommandEventArgs)
Select Case e.CommandName
Case "Insert"
Dim test As ListViewItem
test = New ListViewItem("test")
listGrantee.Items.Add(test)
Case ""
Case Else
End Select
End Sub
I would save you temporarily created Users in the ListView's Datasource flagged as temporary(add a new DataColumn). Afterwards you have to DataBind the Listview. Store the flag in an invisible control(label) so that it is saved in the ViewState on Postbacks.
Further to my comment - as I understand your problem, your OnItemCommand event handler is not getting triggered. Here's how I set up event handlers (using VS2008).
In the design view for the aspx file, I highlight the control that I am interested in. Then, in the "Properties" window, I click on the Event's button (the little lightning flash), and scroll down the list of events until I find the one I am interested in.
Double click in the column next to the event name - this will bring up the code behind page, with the shell of the event handler in place - including the all important "handles ...." clause.
Now enter your event handling code....
I had viewstate turned off. Which disabled the event mechanism, flipped view state back on problem solved.

Gridview with TextBox

i have an gridview control with a comment text, link button, and an
invisible (text box and a button to post to database.)
when i click on the link button i want to show the textbox.
can any one help me how to do this.
my gridview code:
<asp:GridView ID="grdComments" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table width="500px" cellpadding="3" cellspacing="3">
<tr/>
<td/>
<asp:Label runat="server" ID="lblLeftPad"></asp:Label>
<asp:Label runat="server" ID="lblComment" Text='<%# container.dataitem("CommentText") %>'></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:LinkButton ID="lbtnReply" Text="Reply" runat="server" CommandName="CommentReply"></asp:LinkButton>
</td>
</tr>
<tr>
<td>
</asp:TextBox ID="txtReply" runat="server" Height="50px" Width="500px" Visible="false"></asp:TextBox>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
If you are not using Javascript / AJAX then on the link button's click event set the textbox's visible value to true. The link button automatically sends a postback so this would work unless you have the link button set to not auto postback.
EDIT: To access link button
There are a few ways depending on how you setup your grid. If this is a Command Field or a button field that you are using then you can use the RowCommand and the e.CommandArgument to now which row you are on and then set the textbox to true. Below is a sample:
row = Integer.Parse(e.CommandArgument)
GridView1.Rows(row).Cells(1).Controls(1).Visible = True
The cell is set to the column you are wanting to work on and the controls # is set to the control you want to work with in the cell. There is more than one control created in a cell even if you only put a textbox. You can use the FindControl syntax to more reliably get at your control.
If you created a templated field with the link button then on the command argument for the link button set it's value to: =<%# CType(Container,GridViewRow).RowIndex %>
and the above code in the gridview's rowcommand will work.
OR you can set the link buttons click event to something like:
gridview1.rows(directcast(sender,LinkButton).CommandArgument).cells(1).Controls(1).visible = true
You can get to the link buttons click event in a templated field by editing the template from the GUI and double clicking on the link button.
I would recommend using the RowCommand option and using the FindControl Syntax to make your app more readable and easier to maintain.

Label not becoming visible inside of repeater inside an updatepanel

I have an UpdatePanel that contains a Repeater. in the ItemTemplate of the repeater there is a button and a label.
When the button gets pressed, it performs some functionality, and then sets the label to visible and disables the button.
However none of the UI changes are being made to the webpage.
Here is the code, which when stepping through in debugger appears to work fine:
protected void CommentRepeater_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "report")
{
(e.Item.FindControl("btnReportComment") as ImageButton).Enabled = false;
Label thanksLabel = (Label)e.Item.FindControl("lblReportedComment");
thanksLabel.Visible = true;
}
pnlCommentsUpdater.Update();
}
and the page's code (excluding code outside of the repeater)
<asp:UpdatePanel UpdateMode="Conditional" ID="pnlCommentsUpdater" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkPhoto1Comments" runat="server" Text="0 Comments" OnClick="lnkPhoto1Comments_Click" CssClass="dark-gray regular bold"></asp:LinkButton>
<asp:Panel ID="pnlPhoto1Comments" runat="server" Visible="False">
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="CommentRepeater_ItemCommand">
<ItemTemplate>
<br />
<hr width="100%" size="1" color="#CCCCCC" />
<table width="534" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="150" align="left" valign="top">
<span class="blue small bold"><%# Eval("PostedBy") %>,</span><br />
<span class="light-gray small bold"><%# Eval("DateCreated", "{0:g}") %></span>
</td>
<td width="20"></td>
<td width="252" align="left" valign="top">
<div STYLE="word-wrap:break-word;width:252px;left:0">
<span class="dark-gray small bold"><%# Eval("CommentText") %></span>
</div>
</td>
<td width="20"></td>
<td width="92" valign="bottom">
<asp:ImageButton ID="btnReportComment" runat="server" ImageUrl="../images/inappropriate_off.png" CssClass="domclickroll images/inappropriate_on.png images/inappropriate_on.png" AlternateText="Inappropriate" CommandName="report" CommandArgument='<%#Eval("CommentId") %>' /><br />
<asp:Label ID="lblReportedComment" runat="server" Visible="false" CssClass="Regular bold blue" Text="Thanks. We'll check it out!"></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
As I said, the debugger shows it to be working fine, however it simply doesn ot show the label in the browser after clicking the button.
Anyone know what I'm doing wrong?
The error is: "Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled."
And I am calling
ScriptManager.GetCurrent(Page).RegisterPostBackControl(Repeater1);
in the page load, which I read in some sites is the solution, but it did not help.
Check out this blog post...
http://weblogs.asp.net/leftslipper/archive/2007/02/26/sys-webforms-pagerequestmanagerparsererrorexception-what-it-is-and-how-to-avoid-it.aspx
It contains a number of approaches to fixing this. With respect to your call...
ScriptManager.GetCurrent(Page).RegisterPostBackControl(Repeater1);
... I think you're supposed to pass the button to RegisterPostBackControl, and not the repeater. i.e pass it btnReportComment instead. From the reference above...
3.Call ScriptManager.RegisterPostBackControl()
and pass in the button in question.
This is the best solution for controls
that are added dynamically, such as
those inside a repeating template.
First step is to narrow down your problem. If you take out the UpdatePanel altogether, does it work OK?
Also, right off the bat I see that pnlPhoto1Comments.Visible is set to false... ? This is getting set correctly somewhere I suppose, otherwise you wouldn't even get the ItemCommand event. So probably not a problem.

Resources