Using UpdatePanels inside of a ListView - c#

I'm wondering if anybody has run across something similar to this before. Some quick pseudo-code to get started:
<UpdatePanel>
<ContentTemplate>
<ListView>
<LayoutTemplate>
<UpdatePanel>
<ContentTemplate>
<ItemPlaceholder />
</ContentTemplate>
</UpdatePanel>
</LayoutTemplate>
<ItemTemplate>
Some stuff goes here
</ItemTemplate>
</ListView>
</ContentTemplate>
</UpdatePanel>
The main thing to take away from the above is that I have an update panel which contains a listview; and then each of the listview items is contained in its own update panel.
What I'm trying to do is when one of the ListView update panels triggers a postback, I'd want to also update one of the other ListView item update panels.
A practical implementation would be a quick survey, that has 3 questions. We'd only ask Question #3 if the user answered "Yes" to Question #1. When the page loads; it hides Q3 because it doesn't see "Yes" for Q1. When the user clicks "Yes" to Q1, I want to refresh the Q3 update panel so it now displays.
I've got it working now by refreshing the outer UpdatePanel on postback, but this seems inefficient because I don't need to re-evaluate every item; just the ones that would be affected by the prerequisite i detailed out above.
I've been grappling with setting up triggers, but i keep coming up empty mainly because I can't figure out a way to set up a trigger for the updatepanel for Q3 based off of the postback triggered by Q1.
Any suggestions out there? Am I barking up the wrong tree?

To be honest, this would probably be better done in pure javascript, hide the elements initially and show them when the question is answered. You might not be keen on that though. I've just found that the UpdatePanel is great for simple adding ajax effects, but once you start trying to do hard stuff, it gets too complex and clunky. Also, the update panel does a post back to the server each time, if you are simply turning stuff on and off in the DOM it may be better to just do javascript.
Sorry if this isn't the answer you were after, just thought I'd let you know based on my experiences (I've spent too much time fiddling with update panels when I could have just done things in Javascript)

Related

MaintainScrollPositionOnPostback not working on Chrome?

I know there have been alot of similar questions (I've checked Google) as the one I'm asking now. I've tried all the options/suggestions I've read about on Google, but still does not work for me. I've tried adding "maintainScrollPositionOnPostBack=true" to the top of my page, tried adding it to my web.config file, also I've commented out all of the .Focus on my controls because I read somewhere that it will override the maintainScrollPositionOnPostback. Nothing works for me for some reason.
Just a little context:
I have a drop down list that has a corresponding textbox that appears when the list item is selected by the user. With maintainScrollPositionOnPostback=true; when I select that particular list item choice, the page scrolls to the top of the page then scrolls back to where the drop down list and textbox is located. It's a little annoying because I have a bunch of drop down lists on this one page and every time the users selects an item, it would behave the way it is now..
when I select that particular list item choice, the page scrolls to the top of the page then scrolls back to where the drop down list and textbox is located.
Then you back to the correct scoll position and it works - just not all that great.
You don't mention how many combo (drop down list (ddl)) boxes you have.
Two solutions.
Use client side JavaScript for the ddl to hide/show the text box. Had you posted some of your markup, I could have posted some simple JavaScript code that hides/shows the text box. But, without us here seeing the markup, it beyond hard to do so.
The next idea? Use a update panel.
So, drop in right after the form tag a scrip manager control.
Then where your 3-4 ddl''s are?
Do this, so right after form tab, add script manager.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Then down in the page where the 3-4 dll's are, do this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
----> your 3-4 ddl's and text boxes go here.
</ContentTemplate>
</asp:UpdatePanel>
So, try the above - a update panel will do what we call a "partial" page post-back - the screen will not jump. And in fact, you can remove the maintainScrollPositionOnPostback.

Optimizing post backs in asp.net

I am looking for a way to speed up post backs in asp.net. My issue here is that I have a decent amount of items displayed in a telerik RadGrid (a few hundred or so). Each of these items has a detail table. Each parent item and its items in its detail table have checkboxes. When the parent item's checkbox is clicked, it performs a postback and checks or unchecks all of its detail table's items. When I do this, I'm getting about a 1-2 second delay.
A couple limitations:
-Has to be performed server-side: My customer would prefer to keep client-side scripting at a minimum.
-Paging is not an option
There are only a couple things I can think of that would cause a performance hit:
-ViewState size: Although I'm not explicitly storing any values in the viewstate, I think my main issue is the number of items I'm displaying in my grid.
-Hits to the database: When the postback is performed, (aside from membership queries and other business logic) there are no additional calls to the database.
What other options do I have to speed up my postbacks?
EDIT
I forgot to mention that all of my controls are already ajaxified using Telerik's RadAjaxManagerProxy. I have them wrapped in a Panel called pnlContainer, and I'm doing the following:
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="pnlContainer">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="pnlContainer" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
Maybe there's a better approach?
You can try the following items if you have a big postback happening:
If you have deep control hierarchy (many levels of controls) your IDs will take up a lot of space since each child control's ID is a concatenation of all its parents. Therefore your control IDs should be as small as possible.
When not necessary, dont use .NET controls. For example, if you have a static label, dont use asp:Label but plain SPAN tag.
Use UpdatePanels with ChildrenAsTriggers=true and UpdateMode=Conditional
Minify your javascript and CSS files.
Disable viewstate on items that dont need it.
Enable compression on web server
Try UpdatePanels. You can post back only part of the page that needs it, instead of reprocessing the whole page.

.Net form controls drop by one "line" after selection

Yes, I realize that's a bit of a vague title but I'm having a hard time stating the problem. I have a .Net .aspx page that has a Master page, some Ajax, and an updatepanel. My problem occurs on 2 different pages but in both cases I'm either selecting a radio button or a checkbox when the behavior occurs. Immediately after selection the entire page moves down. It does not scroll but instead it is like an extra tag was inserted into the source. I have done HTML source comparisons before and after this change and nothing is different. I can only assume it is related to the updatepanel but I cannot determine where this may be happening.
I'd be happy to provide more information if you can direct me towards a solution.
Thanks!
I am not entirely sure if this will do it and there is not enough detail here to be sure, but have you tried setting RenderMode to inline on the UpdatePanel? Maybe that will do the trick. Otherwise go take a look at Fiddler and see what is coming back from the server. Alternate recommendation (if none of the above work) is to just get your result in Json and change the markup yourself with jQuery or something like it.
Incredible. This was exactly the problem. I've modified my code as follows and form stays in place after selection. This was a simple case of selecting a radio button and having it auto-populate a dropdownlist.
[asp:UpdatePanel ID="panelValidation" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Inline"]
[ContentTemplate]
[asp:ValidationSummary ID="ValidationSummary1" runat="server"]
[ContentTemplate]
[asp:UpdatePanel]
Thanks!

Page lifecycle stops after command from ListView

I have a ListView in a web form (c#/.net 4.0). There is an ImageButton in the ItemTemplate.
After a postback, the ItemCommand event fires... and then everythings stops. No other page events occur. (Actually there is one other thing: Dispose() from ExtenderControlBase runs right after the event code finishes - this site has some AjaxControltoolkit controls, though there are none on this particular page).
There are a lot of things involved here so it's not really practical to post all the code, but generally, is there anything that could cause this?
I am rebinding the ListView on each postback, because I'm handling paging on the server side. When I assign the data source to the ListView, it's initially going to have no rows. So at the time the command event fires, the DataSource has no data in it, since it hasn't yet been loaded from the database and rebound. I can't think why this would cause the entire page to just stop loading, though.
The template is just this:
<ItemTemplate>
<tr>
<td class="DataListRow"><asp:ImageButton ID="edit" runat="server" ImageUrl="~/images/nav/datagrid_edit.gif" CommandName="edit" />
</td>
// a few orther cells
</tr>
</ItemTemplate>
Thoughts?
Doesn't sound right to me.
In these situations, I take an approach like this:
First, make sure the page is checked into source control or otherwise backed up.
If possible, create an new page and copy in just the controls and associated code that is blowing up. See if it works in isolation. If it doesn't work in isolation, well, you've isolated the problem.
If you can't do that due to complexity, or if the code works fine in isolation, go to your problem page and start ripping out all the other functionality. Seriously. Systematically remove controls and features on by one, starting with whatever is the most complex.
Eventually, after one of your changes the abberant behavior will stop, and whatever you removed last is in some way the culprit. See if you can get a fix together.
Roll back and apply the fix.
This hasn't failed me yet.

Listview not fully updating on databind() after postback

I have a ListView control which is exhibiting an odd behaviour - rows are only partially updating after a postback. I'm hoping someone here can shed some light on why this might be occuring.
My listview DataSource is bound to a List of items which is stored in the page session state. This is intentional, partially to timeout out-of-date views since multiple users view the data. On a plain resort operation, the sorting is handled on page via javascript, and the list/session data order is kept in sync via callbacks. Callback also checks for permissions levels. On a particular resort operation that is more complicated, the javascript on the page makes a postback to the page to handle the sorting logic. The List/Session is updated as in the callback, then the listview control is rebound to the data. The page loads again, and the rows show the new order. No problem, right?
The problem is that some of the elements in the listview do not change value in accordance with the new order. While the hyperlinks and text that is processed on page (ie like <%# Eval("ProjectAbbrev") %>) are updated appropriately, checkboxes, literals, and dropdowns that have their values set via the OnItemDataBound event method are not - they stay "frozen" in place, even though stepping through the code reveals that the method is run during the postback, and that the controls SHOULD be set to their new values. If I go and manually truncate the list to say, half the original size, sure enough only those items are repopulated, but the checkboxes and such still retain their original values.
So my question is: Why aren't these elements updating along with the rest of the listview control elements on the postback? I have the feeling that I'm either misunderstanding the page lifecycle in ASP.NET or that I've encountered a bug of some kind.
At this point I'm thinking I will have to move the more complicated sorting operation to the page in javascript, but that will be rather tricky and I'd like to avoid doing so if possible.
UPDATE: I have tried setting EnableViewState to false and it does not fix this. I couldn't use that tactic in any case because other parts of the page (save) rely on reading the viewstate in the end.
UPDATE: I'm providing some code snippets in the hope that they might shed some light on this issue:
Page: The HyperLink element will update properly after postback, but the CheckBox which has its value assigned in the OnQueueRepeater_ItemDataBound method, will stay the same.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="TextProcessorProjects.ascx.cs" Inherits="ETD.UI.Controls.TextProcessorProjects" %>
<asp:ListView ID="QueueListView" runat="server" OnItemDataBound="OnQueueRepeater_ItemDataBound">
<ItemTemplate>
<tr>
<td><asp:HyperLink runat="server" ID="ProjectIDLink"><%# Eval("ProjectAbbrev") %></asp:HyperLink></td>
<td><asp:CheckBox runat="server" ID="ScannedCheckBox" BorderStyle="None" /></td>
</tr>
</ItemTemplate>
</asp:ListView>
Code behind: On postback, the following code executes:
protected List<Book> QueueDataItems
{
get { return (List<Book>)Session["Queue"]; }
set { Session["Queue"] = value; }
}
else if (IsPostBack && !Page.IsCallback)
{
// resort QueueDataItems List appropriately
ResortQueue(Request.Params)
// rebind
QueueListView.DataSource = QueueDataItems;
QueueListView.DataBind();
}
protected void OnQueueRepeater_ItemDataBound(object sender, ListViewItemEventArgs e)
{
// ...
// ... other controls set
CheckBox scannedCheckBox = e.Item.FindControl("ScannedCheckBox") as CheckBox;
scannedCheckBox.Checked = book.Scanned;
}
UPDATE: I've given up on getting this to work and moved my sorting logic to the client side with javascript. If anyone has any ideas as to why this odd behaviour was happening though, I'd still be very interested in hearing them!
out of interest, what point on the page are you databinding on? Page_Load?
Try it on OnPreRender - might help out.
Sounds like the ViewState is kicking in and repopulating the data.
In any case, if you are Databinding in every postback anyways, you should probably set the EnableViewState of your ListView to false to reduce page size.
I think this is related to the order of when the different events are triggered during the page lifecycle. See ASP.NET Page Life Cycle Overview. You should do databinding in Page_OnPreRender to make sure the replopulating is done after control events (that will cause data updating) on the page.
Maybe your QueueListView is getting re-bound for some reason.
Try resetting the DataSource value after the DataBind() to see what happens
QueueListView.DataBind();
QueueListView.DataSource = null;
Any chance this could be a caching issue? I ran into a similar issue using a listview with an XMLDatasource. I tried turning off all the viewstate. I would bind the listview in the code behind and use XPath to write it all out to the screen on my aspx page. This was used in a search....the next time I did a search, none of the new information showed up. The reason is because an XMLDatasource has caching enabled by default. In my case I was hitting the DB every time and had no need to cache it. I turned off the caching on the datasource and all my problems were fixed.
I only mention this because the error I was having sounds identical to yours. I can't see how you're retrieving book in the itemdatabound - and you're not using an XML Datasource by the looks of things.....but I thought the comment might trigger something for you. Good luck....though it sounds like you've already moved on :-).
Is the checkbox control ReadOnly=true or Enabled=false?
I have had trouble with controls with one of these properties set as above not updating no matter how I try to manhandle the control in the code behind. I would think disabling the viewstate would also bypass that little "feature" of ASP.NET, but it's worth a shot.
Also, if the items are sorted via clientside code, is that ordering preserved on the postback? I don't think that you can alter the CLR object you have in session via javascript.
Not sure if this helps, replace <%# Eval("ProjectAbbrev") %> with the Hyperlink.Text assigned in the OnQueueRepeater_ItemDataBound method and see if all rows get populated correctly.
This probably won't solve your problem, but will be interesting to know the result.

Categories