I wish to group some data by month (stored in an SQL Database), with collapsible DIVs, no doubt with jQuery. I don't particularly want to use to GridView, as I'd like to stay away from tables for simplicity when writing the jQuery.
What is the best method to do this in ASP.NET, which control would I use?
Please see the following example, for an idea of what I am trying to describe:
I've created a project which displays data by month using nested repeaters, it's uploaded on Google Docs (just click File->Save to download the .zip).
Here's a brief overview of how it works:
Assuming you have a simple Orders table in the db with the following columns
OrderId
Product
Quantity
DateOfSale
Process
Execute a stored procedure to get the months for a given year (I used EntityFramework functions, you could change this to ADO.NET,LINQ etc)
Bind the returned months to a label in the master repeater(These will be your headings)
Handle the OnItemDataBound event of the master repeater, this event runs every time an item is bound to the repeater.
Inside OnItemDataBound execute a stored procedure to get all the records for the specific month and year and simply bind the returned data to the child repeater
Add little jQuery to show and hide divs and you're set.
Code
Stored procedures:
CREATE PROCEDURE dbo.GetMonthsByYear
#Year INT
AS
BEGIN
SELECT DISTINCT DATENAME(Month,DateOfSale) AS [Month] FROM Orders
WHERE Year(DateOfSale) = #Year
END
CREATE PROCEDURE dbo.GetOrdersByMonth
#Month NVARCHAR(15),
#Year INT
AS
BEGIN
SELECT * FROM Orders
WHERE (Year(DateOfSale) = #Year) AND DATENAME(MONTH,DateOfSale) = #Month
END
ASPX:
<head runat="server">
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
var showHide;
$(document).ready(function () {
showHide = function (control) {
var parent = $(control).next();
var display = parent.css('display');
if (display == "none") { parent.fadeIn('slow'); }
else { parent.fadeOut('slow'); }
};
});
</script>
<style type="text/css">
.detail
{
height:300px;
display:none;
width: 100%;
border: 1px solid black;
}
.header
{
vertical-align: top;
padding: 3px;
height: 30px;
background: black;
color: White;
font-weight: bold;
}
</style>
<title>Nested Repeater</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Select year: <asp:TextBox ID="txtYear" runat="server" /><br />
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="Search" /><br />
<asp:Repeater ID="masterRepeater" runat="server" OnItemDataBound="ItemDataBound">
<ItemTemplate>
<div id='<%# Container.DataItem %>' class="header" onclick="showHide(this);">
<asp:Label ID="lblMonth" runat="server" Text='<%# Container.DataItem %>' />
</div>
<div class="detail">
<asp:Repeater ID="detailRepeater" runat="server">
<HeaderTemplate>
<span style="text-decoration: underline">Product</span><br />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Bind("Product") %>' />
<asp:Label ID="lblQuantity" runat="server" Text='<%# Bind("Quantity") %>' />
<asp:Label ID="lblDateOfSale" runat="server" Text='<%# Bind("DateOfSale") %>' /><br />
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
Code behind:
protected void Search(object sender, EventArgs e)
{
int year = 0;
if (Int32.TryParse(txtYear.Text, out year))
{
orderEntities orders = new orderEntities();
List<string> months = orders.GetMonthByYear(year).ToList();
masterRepeater.DataSource = months;
masterRepeater.DataBind();
}
}
protected void ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
int year = 0;
if (Int32.TryParse(txtYear.Text, out year))
{
Label lblMonth = e.Item.FindControl("lblMonth") as Label;
if (lblMonth != null)
{
string month = lblMonth.Text;
Repeater detailRepeater = e.Item.FindControl("detailRepeater") as Repeater;
if (detailRepeater != null)
{
orderEntities orders = new orderEntities();
var ordersByMonth = orders.GetOrdersByMonth(month, year).ToList();
detailRepeater.DataSource = ordersByMonth;
detailRepeater.DataBind();
}
}
}
}
}
Result:
Related
I have file upload and label control in a repeater. The problem is whenever a file is uploaded, I want to assign name of the uploaded file to a label inside repeater.
<asp:Repeater ID="Repeater1" runat="server" ClientIDMode="AutoID">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text=""><img src="../images/upload.png" alt="" style="position:absolute;cursor:pointer;"/></asp:Label>
<asp:FileUpload ID="PhotoUpload" runat="server" CssClass="uplodfile" Style="padding: 0px; position: relative; left: 0px; top: 0px; width: 20px;" />
<asp:Label ID="lblFilePath" Text="" runat="server" Style="vertical-align: inherit; padding: 0px 5px;"></asp:Label>
</ItemTemplate>
</asp:Repeater>
Can anybody assist me how to achieve this?
You can use FindControl.
protected void PhotoUpload_Click(object sender, EventArgs e)
{
Label lbl = Repeater1.Items[0].FindControl("Label1") as Label;
lbl.Text = "Label found!";
}
i have a code ,where i want to change the lable text and visible mode in code behind file.my page is .ascx page
<asp:UpdatePanel ID="upnlTrvLogin" runat="server">
<ContentTemplate>
<div id="divErrMsg" runat="server" style="padding-left: 11px;">
<asp:Label ID="lblErrMsg" runat="server" ForeColor="Red" Visible="False"
CssClass="errorIcon" meta:resourcekey="lblErrMsgResource2"></asp:Label>
<br />
</div>
<div style="display: inline; float: right; text-align: right; margin-top: 10px; margin-right: 13px;">
<asp:Button ID="lnkSubmit" runat="server" CausesValidation="False"
CssClass="font1_2em bolder inButton showHand" OnClick="lnkSubmit_Click"
Text="Sign In" UseSubmitBehavior="False" meta:resourceKey="lnkSubmitResource2" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
code behind file
protected void lnkSubmit_Click(object sender, EventArgs e)
{
string User = GetUserDetail(txtUsername.Text.Trim(), txtPass.Text.Trim(),out personGuid, false);
if (string.IsNullOrEmptyUser (User )
{
lblErrMsg.Text = "Invalid email / password";
lblErrMsg.Visible = true;
return;
}
}
but in the button click event when i an try to change the Label text but is not changing . please tell why text of label is not changing.
Looking at you code, seems it is incorrect.
string.IsNullOrEmpty(User) was the correct statement, but you are using string.IsNullOrEmptyUser (User ).
Another tip, don't use variables with first letter on upper case, let it only for class.
I have a Listbox with some items stored
and from a textbox's key up event i select my choice
the problem i am facing is that
once i select my choice Listbox1_selectIndexchanged event (which sets my choice to another textbox ) not firing properly, it fires only when i hit some button or some page postback event something...
[i have used JQuery and updatepanel]
Here is my Code
<%# Page Language="vb" AutoEventWireup="false" MasterPageFile="~/Main.Master" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication2.WebForm1"
title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="uppnl" runat="server">
<ContentTemplate>
<script type="text/javascript" >
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('select[id$=ListBox1]').filterByText($('input[id$=TextBox1]'), true);
});
</script>
<asp:Panel ID="Panel1" runat="server" Style="border-right: thin groove; border-top: thin groove; border-left: thin groove; border-bottom: thin groove; vertical-align: middle; width: 100%; text-align: center; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px;">
<br />
<asp:Label ID="Label1" runat="server" Text="Type"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Text="SelectedText"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:ListBox ID="ListBox1" runat="server" Height="119px" Width="126px">
<asp:ListItem Text="Apple" Value="1"></asp:ListItem>
<asp:ListItem Text="Orange" Value="2"></asp:ListItem>
<asp:ListItem Text="Peache" Value="3"></asp:ListItem>
<asp:ListItem Text="Banana" Value="4"></asp:ListItem>
<asp:ListItem Text="Melon" Value="5"></asp:ListItem>
<asp:ListItem Text="Lemon" Value="6"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="7"></asp:ListItem>
<asp:ListItem Text="Pomegranate" Value="8"></asp:ListItem>
<asp:ListItem Text="Mulberry" Value="9"></asp:ListItem>
<asp:ListItem Text="Apricot" Value="10"></asp:ListItem>
<asp:ListItem Text="Cherry" Value="11"></asp:ListItem>
<asp:ListItem Text="Blackberry" Value="12"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="Button1" runat="server" Text="Refresh" />
<br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
if (selectSingleMatch === true && $(select).children().length === 1) {
$(select).children().get(0).selected = true;
}
});
});
};
$(function() {
$('select[id$=ListBox1]').filterByText($('input[id$=TextBox1]'), true);
});
</script>
</asp:Content>
and in my code behind i have
Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ListBox1.SelectedIndexChanged
TextBox2.Text = ListBox1.SelectedItem.ToString()
End Sub
Your event did fire.
Control properties are loaded during the Page_Load method, and your event will fire after the Page_Load method so your page will not reflect its results. All events will fire after the Page_Load method as per the page life cycle.
Try this:
Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ListBox1.SelectedIndexChanged
TextBox2.Text = ListBox1.SelectedItem.ToString()
Page_Load(sender, e)
End Sub
To learn more about the page life cycle check out http://msdn.microsoft.com/en-us/library/ms178472(v=vs.100).aspx
EDIT:
You also need to bind your listbox to your event:
<asp:ListBox ID="ListBox1" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" runat="server">
I have a gridview with certain boxes that are highlighted in green. These boxes should fill the entire box, but I can't seem to trash this 1px border around the edges. I'm using IE7, but FF does it too.
Rendered html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title><link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" /><link href="App_Themes/Contoso/Style.css" type="text/css" rel="stylesheet" /></head>
<body>
<form name="form1" method="post" action="GridViewColoring.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJODIyMTgxMzQxZBgBBQh0ZXN0R3JpZA88KwAMAQgCAWR6Qz5BuXEoalr4HjsTfYqqKPrdwd2ICIXpeNacwdi46w==" />
</div>
<div>
<div>
<table class="cssTable" cellspacing="0" rules="all" border="1" id="testGrid" style="border-collapse:collapse;">
<tr>
<th scope="col">Description</th><th scope="col">Serial#</th>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl02_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl02_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;height:100%;width:100%;">0</span>
</td>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl03_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl03_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;background-color:#CCFFCC;height:100%;width:100%;">1000</span>
</td>
</tr><tr style="background-color:Yellow;">
<td class="NoMargin NoPadding" style="font-size:Smaller;">
<span id="testGrid_ctl04_descriptionLbl">Some desc 1/25/2011 9:51:27 AM</span>
</td><td style="font-size:Smaller;">
<span id="testGrid_ctl04_serialNumberLbl" class="NoMargin NoPadding MaxHeightAndWidth NoBorder" style="display:inline-block;background-color:#CCFFCC;height:100%;width:100%;">2000</span>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
test case
CSS
body {
}
.NoMargin
{
margin:0 0 0 0;
}
.NoPadding
{
padding:0 0 0 0;
}
.BgColor
{
background-color:Aqua;
}
.MaxHeightAndWidth
{
height:100%;
width:100%;
}
.NoBorder
{
border:0px;
}
ASP.NET
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewColoring.aspx.cs" Inherits="WebApplication1.GridViewColoring" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView id="testGrid" runat="server" CssClass="cssTable"
AutoGenerateColumns="False"
OnRowDataBound="SetStatusColors" >
<Columns>
<asp:TemplateField HeaderText="Description" SortExpression="description" ItemStyle-CssClass="NoMargin NoPadding">
<ItemTemplate>
<asp:Label ID="descriptionLbl" runat="server" Text='<%# Bind("description") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="Smaller" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Serial#" SortExpression="serial">
<ItemTemplate>
<asp:Label ID="serialNumberLbl" runat="server" Text='<%# Bind("serial") %>' CssClass="NoMargin NoPadding MaxHeightAndWidth NoBorder" Height="100%" Width="100%"></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="Smaller" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# backend
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace WebApplication1
{
public partial class GridViewColoring : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
testGrid.DataSource = MakeTable();
testGrid.DataBind();
}
protected void SetStatusColors(object sender, GridViewRowEventArgs e)
{
for (int i = 0; i < testGrid.Rows.Count; i++)
{
string serialNumber = ((Label)testGrid.Rows[i].FindControl("serialNumberLbl")).Text;
if (serialNumber != "0")
{
//GREEN HIGHLIGHTS
((Label)testGrid.Rows[i].FindControl("serialNumberLbl")).BackColor = System.Drawing.Color.FromArgb(204, 255, 204);
}
testGrid.Rows[i].BackColor = System.Drawing.Color.Yellow;
}
}
//mock db
private DataSet MakeTable()
{
var table = new DataTable("ParentTable");
DataColumn column;
DataRow row;
// Create new DataColumn, set DataType,
// ColumnName and add to DataTable.
column = new DataColumn();
column.DataType = System.Type.GetType("System.Int32");
column.ColumnName = "serial";
column.ReadOnly = true;
// Add the Column to the DataColumnCollection.
table.Columns.Add(column);
//// Create second column.
column = new DataColumn();
column.DataType = System.Type.GetType("System.String");
column.ColumnName = "description";
column.AutoIncrement = false;
column.Caption = "Description";
column.ReadOnly = false;
column.Unique = false;
// Add the column to the table.
table.Columns.Add(column);
// Instantiate the DataSet variable.
var dataSet = new DataSet();
// Add the new DataTable to the DataSet.
dataSet.Tables.Add(table);
// Create three new DataRow objects and add
// them to the DataTable
for (int i = 0; i <= 2; i++)
{
row = table.NewRow();
row["serial"] = i * 1000;
row["description"] = "Some desc " + DateTime.Now;
table.Rows.Add(row);
}
return dataSet;
}
}
}
Update
Changed the Serial# template's itemstyle and it fixed the problem. I have no idea why, but thanks to your tips, I was able to reduce the problem down enough to try it:
<ItemStyle Font-Size="Smaller" CssClass="NoMargin NoPadding" />
Try setting border-collapse: collapse; on the cssTable css class.
Okay I was able to get it working. I took the css classes off of the first template item and created the following css.
table.cssTable
{
border-collapse: collapse;
}
table.cssTable tr td
{
background: Yellow;
font-size:Smaller;
margin: 0;
padding: 0;
}
By the way, you should be able to get rid of the ItemStyle with font-size as well with this CSS.
I've created a fiddle but can't really see the problem I'm afraid - http://jsfiddle.net/5rBYb/1/
You might want to try adding this to your CSS though, which will set the borders to a single pixel (which I suspect is what's causing your problem).
table, th, td { border: 1px solid #000; }
Just change it to border: 0 if you want to hide borders.
Hi I need to intercept server callback after udate panel async post back and determine which panel initiated the request. The code is pretty simple:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InterceptUpdateCallback);
function InterceptUpdateCallback(sender, args)
{
var updatedPanels = args.get_panelsUpdated();
for (idx = 0; idx < updatedPanels.length; idx++) {
if (updatedPanels[idx].id == "myUpdatePanel") {
StartSmth();
break;
}
}
}
And it works when UpdatePanel is not inside another UpdatePanel. But when it is inside another UpdatePanel updatedPanels[idx].id has parent Updatepanel id. So how can I get the id of UpdatePanel which initiated the request (the inner UpdatePanel)? Thanx
Here you go:
function InterceptUpdateCallback(sender, args) {
if (sender._postBackSettings)
alert(sender._postBackSettings.panelID);
else
alert('first load');
}
Update:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void LinkButtons_Click(object sender, EventArgs e)
{
LabelMain.Text = LabelSub1.Text = LabelSub2.Text = LabelSub3.Text = string.Format("{0} Updated By {1}", DateTime.Now, ((Control)sender).ID);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
body { font-family: Tahoma;}
fieldset { padding: 15px; }
fieldset a
{
float: right;
clear: none;
display: block;
margin: 10px;
}
fieldset span
{
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
function pageLoaded(sender, args) {
if (sender._postBackSettings) {
var panelId = sender._postBackSettings.panelID.split('|')[0];
if (panelId == sender._scriptManagerID) {
var updatedPanels = args.get_panelsUpdated();
var affectedPanels = "Affected Panels:\n";
for(var x=0;x<updatedPanels.length;x++)
affectedPanels+= updatedPanels[x].id + "\n";
alert("Request initiated by ScriptManager\n\nMight be an async trigger, or child of an update panel with children as triggers set to false.\n\n"+affectedPanels);
}
else
alert("Request initiated by: " + panelId);
}
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
</script>
<asp:LinkButton ID="UpdateMain" runat="server" Text="UpdateMain" OnClick="LinkButtons_Click"></asp:LinkButton>,
<asp:LinkButton ID="UpdateSub1" runat="server" Text="UpdateSub1" OnClick="LinkButtons_Click"></asp:LinkButton>,
<asp:LinkButton ID="UpdateSub2" runat="server" Text="UpdateSub2" OnClick="LinkButtons_Click"></asp:LinkButton>,
<asp:LinkButton ID="UpdateSub3" runat="server" Text="UpdateSub3" OnClick="LinkButtons_Click"></asp:LinkButton>
<br />
<br />
<asp:UpdatePanel ID="Main" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton1" runat="server" Text="LinkButton1" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Main - Update Mode:Conditional, Children As Triggers:False</legend>
<asp:Label ID="LabelMain" runat="server" Text="LabelMain"></asp:Label>
<asp:UpdatePanel ID="Sub1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton2" runat="server" Text="LinkButton2" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Sub1 - Update Mode:Always, Children As Triggers:True</legend>
<asp:Label ID="LabelSub1" runat="server" Text="LabelSub1"></asp:Label>
<asp:UpdatePanel ID="Sub2" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton3" runat="server" Text="LinkButton3" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Sub2 - Update Mode:Always, Children As Triggers:True</legend>
<asp:Label ID="LabelSub2" runat="server" Text="LabelSub2"></asp:Label>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateSub2" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateSub1" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="Sub3" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<fieldset>
<asp:LinkButton ID="LinkButton4" runat="server" Text="LinkButton4" OnClick="LinkButtons_Click"></asp:LinkButton>
<legend>Sub3 - Update Mode:Conditional, Children As Triggers:False</legend>
<asp:Label ID="LabelSub3" runat="server" Text="LabelSub3"></asp:Label>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateSub3" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UpdateMain" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
I will have a guess at this one.
Does setting UpdateMode = Conditional on the outer (or both) UpdatePanels help? I think the problem is that you only get the "outermost" updated panel and if you do not set UpdateMode to Conditional the outer Panel is updated as well (even if you click something in the inner panel; see second reference).
For reference see
Note that, if I remove the property
UpdateMode=Conditional for the
UpdatePanel1 (parent), both the labels
will get refreshed.
from ASP.NET 2.0 AJAX Extensions Update Panel - Nested Update Panel
and
When set to Always, the UpdatePanel is
updated on every postback raised from
anywhere in the page, so from controls
inside the panel, inside other panels
or just on the page.
from Remember to set UpdatePanel's UpdateMode to Conditional
Finally I came to solution: the problem was that I had trigger control (Button) for child UpdatePanel which actually was outside this Update panel and inside parent UpdatePanel (sorry I hadn't noticed that). If you put Button inside child UpdatePanel - everything works fine.