Control scope within Repeater, with and without UpdatePanel - asp.net

Why does the following give me a compilation error for line B (Label2, outside UpdatePanel) but not for line A (Label1, inside UpdatePanel)? I would have expected both lines to give an error since both controls are within the same Repeater and should therefore not be directly accessible outside the repeater, since there is no one unique instance.
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = Label1.ClientID; // Line A - compiles fine
Label2.Text = Label2.ClientID; // Line B - "The name 'Label2' does not exist in the current context"
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Repeater runat="server" ID="Repeater1">
<ItemTemplate>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label1" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label2" runat="server" Text="Label2" />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>

I'm betting if you comment out line B you'll get a run-time error on execution. Label1 is going to be a null reference.
When you create controls in the ASPX page Visual Studio tries to help you out by adding the controls to the code behind in the designer file which extends the class for the page. In this case it's adding one when it shouldn't be.
Short answer is it's a bug. You should submit it but it shouldn't be a blocking issue.

Real question is why are you creating multiple update panels in a repeater ? Put one outside of the repeater and call it good. Or if you just want to refresh some text dont use an update panel, use a call back with some client side script to set the dom element. Check out this http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/

Neither of those is proper anyway. You shouldn't be trying to directly reference a control that's contained within the ItemTemplate.
If you want to modify those Labels at runtime, you should be using OnItemDataBound and FindControl. To "find" the Label in the UpdatePanel, you'll need to use UpdatePanel.ContentTemplateContainer.FindControl().

Related

Partial update doesn't work with master pages

I am working on a C# asp.net web forms project. It has two master pages. I
have an user control which reads data from database,
creates an un-ordered list in html string and populates a placeholder with
it. This user control has to be automatically
refreshed every 2 minutes. I have included this usercontrol on the parent
master page. I have the following code to refresh the
user control, which I have obtained through another stackoverflow answer.
The problem is that the entire master page refreshes, and I am not sure why.
Is there a way to make that only the user control which has the UpdatePanel
refreshes?
Outer Master Page:
<body>
<form id="frmMain" role="form" method="post" runat="server">
<div>
<uc2:PendingOrders runat="server" ID="PendingOrders" />
</div>
<asp:ContentPlaceHolder ID="MainBodyContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
User Control:
<asp:ScriptManager ID="myScriptManager" runat="server"
EnablePartialRendering="True"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode = "Conditional"
runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="20000"
OnTick="Timer1_Tick"></asp:Timer>
<asp:PlaceHolder runat="server" id="lblMyOrders"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
User Control Code behind:
protected void Timer1_Tick(object sender, EventArgs e)
{
//This method creates the html string with data as an unordered list
and
//populates asp:PlaceHolder inte updatepanel
GetData();
}
UpdatePanel1's Content will be update by Timer1_Tick.
"entire master page refreshes" means master page's Page_Load will be call while Timer1 been trigger?
UpdatePanel always post entire page back server and only render UpdatePanel1's Content.
I had the same problem, but in our project the EnablePartialRendering was set to false on the Master Page, if set to true the whole project breaks.
To fix the problem, I defined another master page without ScriptManager and added the ScriptManager to the page in which I wanted to use UpdatePanels with the EnablePartialRendering attribute set to True.
This fixed the problem.
<asp:ScriptManager ID="myScriptManager" runat="server" EnablePartialRendering="True"></asp:ScriptManager>

Submit button in ASP.net

I am new to .NET and I am trying out basic functionalities. I got an error when I placed submit button. Please go through the code and let me know if the Submit button syntax I used is wrong.
Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>My First web page</title>
</head>
<body>
<form id="form1" runat="server" >
<div style="position:absolute">
First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br/>
Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button OnClick="submit" Text="submit" runat="server" />
</div>
</form>
</body>
</html>
Error is :
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'ASP.webform1_aspx' does not contain a definition for 'submit' and no extension method 'submit' accepting a first argument of type 'ASP.webform1_aspx' could be found (are you missing a using directive or an assembly reference?)
Thank You.
You have to provide the server side OnClick handler to OnClick and probably submit is not defined as handler. This MSDN Button.OnClick documentation tell how OnClick event handler is attached with button. You also need to provide the ID to your button.
Remove the OnClick attribute from button. Open the form in VS designer Double click the button in VS designer it will generate handler for you. You can find mode in How to: Create Event Handlers in ASP.NET Web Forms Pages
After generating event handler you would have something like.
Code behind
void yourButtonId_Click(Object sender, EventArgs e)
{
}
HTML (aspx)
<asp:Button ID="yourButtonId" OnClick="yourButtonId_Click" Text="submit" runat="server" />
<script runat="server">
Sub submit(sender As Object, e As EventArgs)
lbl1.Text="Your name is " & txt1.Text
End Sub
</script>
<!DOCTYPE html>
<html>
<body>
<form runat="server">
Enter your name:
<asp:TextBox id="txt1" runat="server" />
<asp:Button OnClick="submit" Text="Submit" runat="server" />
<p><asp:Label id="lbl1" runat="server" /></p>
</form>
</body>
</html>

Update Panel and triggers from a repeater control

Hi I found code similiar to the following online. It's seems really great for getting a button buried in a repeater control to trigger a full cycle back to the server.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="HiddenButton" />
</Triggers>
</asp:UpdatePanel>
<!--Make a hidden button to treat as the postback trigger-->
<asp:Button ID="HiddenButton" runat="server" Style="display: none" Text="HiddenButton" />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<!--when cick the button1, it will fire the hiddenButton-->
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('HiddenButton').click();return false;"
runat="server" />
</ItemTemplate>
</asp:Repeater>
It uses a hiddenButton to achieve this by hooking the click event of the original button to this one. However my addition to this was the setting of the CommandArgument for the button. I would also need it to be set for the HiddenButton.
Does anyone know a way of going about this?
First I will like to explain the Disadvantage of using the Update Panel using the very same example posted by you.
Below is the Original Code
Output
To display the 22 character string you can check how much data is being received and sent to server. Just imagine following
If you would consider send each request to Database using Update Panel and your GridView is in Update Panel!!!!!!
Suppose you would use ViewState data for each request and with GridView Inside the Update Panel.
Both the above techniques are worst as per my understanding.
Now I will describe you Page Methods
Page Method over Update panel
Page Methods allow ASP.NET AJAX pages to directly execute a Page’s Static Methods, using JSON (JavaScript Object Notation). Instead of posting back and then receiving HTML markup to completely replace our UpdatePanel’s contents, we can use a Web Method to request only the information that we’re interested.
Sample Code
Output
Hope this clearly explains the difference of usage.
Answer to the original Query
You have to register the ItemDataBound event of the below Repeater and use below code for it.
Code Behind
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
Button btn = (Button)e.Item.FindControl("Button1");
btn.OnClientClick = string.Format("SubmitButton('{0}');return false;"
, HiddenButton.ClientID);
}
}
JavaScript
<script type="text/javascript">
function SubmitButton(btn)
{
$("#" + btn).click();
}
</script>
//Alternative
<script type="text/javascript">
function SubmitButton(btn)
{
document.getElementById(btn).click();
}
</script>
Reference & Here
Your HiddenButton control is a server control but you are trying to access it in JQuery using it's ASP.Net ID,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('**HiddenButton**').click();return false;"
runat="server" />
A quick way to fix it is to make a separate function,
<script type="text/javascript">
function SubmitButton(btn)
{
$get("#" . btn).click();
}
</script>
and change your button code to ,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>'
runat="server" />
In code behind, in repeater's ItemDataBound event, find the button and HiddenControl and set Button1's OnClientClick property,
Button1.OnClientClick= string.Format("SubmitButton('{0}');return false;",HiddenButton.ClientID);

How to make UpdatePanel inside ListView work?

I have a page with a listview that shows something like posts. On each post there should be a "rate box" which works similar to the "Like" button in facebook. The rate box is a User Control, that has an update panel inside it.
If I put the control with some random values in the page it works great - but when I put it inside the ListView, where it should be located, it won't work. The method is being called, but nothing happens.
I simplified the code a bit to make it easier to understand:
The "rate box" control:
protected void OnRateClick(object sender, ImageClickEventArgs e)
{
Rate++;
RateAmountLiteral.Text = Rate.ToString();
RateButton.Visible = false;
FeedbackLiteral.Visible = true;
rateButtonPanel.Update();
}
ascx:
<div class="rate_div">
<asp:UpdatePanel ID="rateButtonPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
Rate:
<asp:Literal ID="RateAmountLiteral" runat="server"></asp:Literal>
<asp:ImageButton ID="RateButton" runat="server" ImageUrl="icn_rate.png"
OnClick="OnRateClick" />
<asp:Literal ID="FeedbackLiteral" runat="server" Visible="false">Thanks for rating!</asp:Literal>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
aspx (using the control):
<asp:ListView ID="PostsView" runat="server" ItemPlaceholderID="itemPlaceHolder2"
<LayoutTemplate>
<div class="posts_div">
<asp:PlaceHolder ID="itemPlaceHolder2" runat="server" />
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="post_div">
<div class="post_body">
<%# CurrentPost.Body %>
</div>
<UC:RatingBox id="RatingBox" runat="server"
PostID="<%# CurrentPost.ID %>"
Rate="<%# CurrentPost.Rate %>"/>
By: <a href="<%# CurrentPost.Author.LinkToProfile %>">
<%# CurrentPost.Author.DisplayName %>
</a> |
<%# CurrentPost.LiteralTime %>
</div>
</ItemTemplate>
</asp:ListView>
While debugging I noticed the controls in the method "OnRateClick" are empty and don't contain the right values. Please advice.
Also if you have any comments about the way I did things, don't hold yourself.
Thanks
There are a lot things that you may not have set up, I cannot tell from just the code snippet you have given. But make sure you do the following: -
1) Place a ScriptManager "" on the page.
If you are using master page in your application and your web page uses the master page, place script manager in master page. Or alternatively,you can also place script manager on specific web pages anyway.
2) Add a Triggers for the button RateButton in your Update panel.

.net Accordion Causing me Problems

I had a bunch of controls that I displayed, hid, enabled and disabled based on actions in the web page. Everything worked until i put them into an accordian. Now I can't get the Javascript to be able to update their state. I have a small example
this is the Javascript
<script type="text/javascript">
var ctrl = document.getElementById('<%= btmRocp.ClientID %>');
function ShowPanel(control)
{
alert('<%= btmRocp.ClientID %>');
ctrl.disabled = true;
}
</script>
This is the Accordian
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="MyAccordion"
runat="Server"
SelectedIndex="0"
>
<Panes>
<cc1:AccordionPane ID="accordianPane0" runat=server>
<Header>Create New Report </Header>
<Content>a
<asp:Button ID="Button1" onmouseup="ShowPanel('') " runat="server" Text="Button" />
<asp:Button ID="btmRocp" runat="server" Text="Button" />
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="accordianPane1" runat=server>
<Header>Create New Report </Header>
<Content>b</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
I would love to know what i am doing wrong here the Alert prints out the right ID.
If i do something where i pass the "this" Object to the function i can disable that button but I truly need it to disable, or hide like 10 objects
Does anyone have an idea?
Sample Code at http://www.riconllc.com/accordian.zip
What is the default state of the Accordion? collapsed? I have no idea how the Accordion works, but I'm suspecting that it is modifying the HTML DOM such that when the page first loads "btmRocp" is not actually present on the page itself, until it becomes "visible". That is, it might be injecting controls into and out of the page, based on the accordion status.
Your best bet in figuring out this behavior is to insert "debugger;" statements into your page at appropriate points, to inspect the live DOM at those points in time.
<textbox id="debugbox" onblur="this.value = eval(this.value);"></textbox>
Is a good way to monkey with script on your page as well.

Resources