I'm trying to update controls outisde the update panel with the ref. of below link . but its not working. i want to know what i'm missing.in my application can't use these labels inside the update panel.
http://msdn.microsoft.com/en-us/library/bb301423(v=vs.110).aspx
HTML
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Updatepaneltest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PageLoadingHandler);
function PageLoadingHandler(sender, args) {
var dataItems = args.get_dataItems();
if ($get('Label1') !== null)
$get('Label1').innerHTML = dataItems['Label1'];
if ($get('Label2') !== null)
$get('Label2').innerHTML = dataItems['Label2'];
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
UpdatePanel content.
<asp:Button ID="Button1" Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
</div>
</asp:Content>
code behind
protected void Page_Load(object sender, EventArgs e)
{
// ScriptManager ScriptManager1 = ScriptManager.GetCurrent(this.Page);
if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
{
ScriptManager1.RegisterDataItem(Label1, DateTime.Now.ToString());
ScriptManager1.RegisterDataItem(Label2, DateTime.Now.Year.ToString());
}
}
Control updates inside of updatepanel,
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" Text="Submit" runat="server" />
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Control updates outside of updatepanel,
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>
<ContentTemplate>
<asp:Button ID="Button1" Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
Later, write below lines in client side.
var pageInstance = Sys.WebForms.PageRequestManager.getInstance();
pageInstance.add_pageLoaded(UpdateLabelHandler);
function UpdateLabelHandler(sender, args)
{
var ControldataItems = args.get_dataItems();
if ($get('Label1') !== null)
$get('Label1').innerHTML = ControldataItems ['Label1'];
if ($get('Label2') !== null)
$get('Label2').innerHTML = ControldataItems ['Label2'];
}
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterDataItem(Label1, DateTime.Now.ToString());
ScriptManager1.RegisterDataItem(Label2, DateTime.Now.Year.ToString());
}
Hope this may help you.
Related
I wish to have 3 gridviews on a single aspx page fed by individual DB queries (displaying static data, no manipulation) and based on a 10 second timer, refresh the tables. I have the code to return the datatables sorted. I can make it update one gridview which is in one of my update panels, but the other two dont render.
Code is:
<%# Page Title="Index" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Admin.aspx.cs" Inherits="Test.Admin" %>
<script runat="server" type="text/c#">
protected void Page_PreRender(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
FullAccessSession.DataSource=GetStatus("FullAccess");
FullAccessSession.DataBind();
Label2.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LimitedAccessSession.DataSource=GetStatus("LimitedStatus");
LimitedAccessSession.DataBind();
Label3.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LogData.DataSource = GetLog() ;
LogData.DataBind();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
FullAccessSession.DataSource=GetStatus("FullAccess");
FullAccessSession.DataBind();
}
protected void Timer2_Tick(object sender, EventArgs e)
{
Label3.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LogData.DataSource = GetLog() ;
LogData.DataBind();
}
protected void Timer3_Tick(object sender, EventArgs e)
{
Label2.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
LimitedAccessSession.DataSource=GetStatus("LimitedStatus");
LimitedAccessSession.DataBind();
}
</script>
<div class="row">
<div class="col-md-7">
<asp:UpdatePanel ID="UpdateFullAccessStatus" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick">
</asp:Timer>-->
<asp:Label ID="Label7" runat="server" Font-Bold="True" Text="Full Access Logged In Users"></asp:Label>
<br />
<asp:Label ID="Label1" runat="server" Text="Panel not refreshed yet."></asp:Label>
<br />
<asp:GridView ID="FullAccessSession" runat="server">
</asp:GridView>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdateLimitedAccessStatus" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer3" runat="server" Interval="10000" OnTick="Timer2_Tick">
</asp:Timer>-->
<asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Limited Access Logged In Users"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Panel not refreshed yet."></asp:Label>
<br />
<asp:GridView ID="LimitedAccessSession" runat="server">
</asp:GridView>
<br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdateLog" runat="server" UpdateMode="Always">
<ContentTemplate>
<!--<asp:Timer ID="Timer2" runat="server" Interval="10000" OnTick="Timer2_Tick">
</asp:Timer>-->
<asp:Label ID="Label5" runat="server" Font-Bold="True" Text="General Log"></asp:Label>
<br />
<asp:Label ID="Label3" runat="server" Text="Panel not refreshed yet."></asp:Label>
<asp:GridView ID="LogData" runat="server">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I cant work out why one of my update panels are working. As you can see i've tried using the PreRender function as well as (currently commented out) timers. The labels are updating with the current time but only one gridview displays.
Any help would be appreciated
Thanks
The issue here is that the script of timer is lost after the post back inside the UpdatePanel - the solution is to take it out of the update panel and use Triggers
Here is an example that I test it and works.
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="2800"></asp:Timer>
<asp:Timer ID="Timer2" runat="server" ontick="Timer2_Tick" Interval="2500"></asp:Timer>
<div>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
<ContentTemplate>
<asp:Literal runat="server" ID="txtTest1"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer2" />
</Triggers>
<ContentTemplate>
<asp:Literal runat="server" ID="txtTest2"></asp:Literal>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
and on code behind the ontick is the trigger, eg:
protected void Timer1_Tick(object sender, EventArgs e)
{
txtTest1.Text += "1.";
}
I have this checkbox that I need to be AutoPostBack="True" so that I can trigger OnCheckedChanged="chkCompany_OnCheckedChanged". The problem is that I dont want the page to be refreshed and redirected, I want the user to stay put exactly where they are.
ASPX:
<asp:CheckBox OnCheckedChanged="chkCompany_OnCheckedChanged" AutoPostBack="True" CssClass="chkCompany" ClientIDMode="Static" ID="chkCompany" runat="server" />
C#:
protected void chkCompany_OnCheckedChanged(object sender, EventArgs e)
{
if (chkCompany.Checked)
{
txtName.Visible = false;
}
else
{
txtName.Visible = true;
}
}
You should use UpdatePanel control to do this
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:CheckBox OnCheckedChanged="chkCompany_OnCheckedChanged" AutoPostBack="True" CssClass="chkCompany" ClientIDMode="Static" ID="chkCompany" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Keep your code inside update pannel.
you can use javascript to do this,if Update panel does not work.
<!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">
<script type=text/javascript>
function CheckedChanged()
{
if((document.getElementById('chkCompany').checked))
`{`
document.getElementById('txtname').Visible=false;
}
`else`
{
document.getElementById('txtname').Visible=false;
`}`
}
</script>
</head>
<body>
<asp:CheckBox OnCheckedChanged="CheckedChanged" AutoPostBack="false" CssClass="chkCompany" ClientIDMode="Static" ID="chkCompany" runat="server" />
<asp:TextBox ID="txtname" runat="server"/>
</body>
</html>
-----------------------------------------------------------------------------
Here is another solution but for DropDownCheckList.
The same works for CheckBox.
<asp:UpdatePanel runat="server">
<ContentTemplate>
<cwc:DropDownCheckList runat="server" ID="myId" AutoPostBack="True" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="myId" />
</Triggers>
</asp:UpdatePanel>
I have a button in asp.net to clear textboxes and I used ajax as below:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button2" runat="server" Font-Bold="False" Font-Names="Tahoma" Font-Size="16px" ForeColor="DarkRed" Height="40px" OnClick="Button2_Click" Text="Clear Form" Width="165px" />
</ContentTemplate>
</asp:UpdatePanel>
As well, this button has following C# code:
protected void Button2_Click(object sender, EventArgs e)
{
txtFirstName.Text = string.Empty;
txtLastName.Text = string.Empty;
txtEmail.Text = string.Empty;
txtSubject.Text = string.Empty;
txtMessage.Text = string.Empty;
}
However, foregoing C# code doesn't work when I execute this program!; In other words, textboxes don't clear after I click on button!
Please tell me why it happens?!
I have tried and the button code is working
.aspx code
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
<asp:TextBox ID="txtMessage" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Font-Bold="False" Font-Names="Tahoma" Font-Size="16px" ForeColor="DarkRed" Height="40px" OnClick="Button2_Click" Text="Clear Form" Width="165px" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
.aspx.cs page coding
protected void Button2_Click(object sender, EventArgs e)
{
txtFirstName.Text = string.Empty;
txtLastName.Text = string.Empty;
txtEmail.Text = string.Empty;
txtSubject.Text = string.Empty;
txtMessage.Text = string.Empty;
}
You need to modify your updatepanel.Kindly place all your Label and TextBox Control inside Update Panel and Button Events outside your UpdatePanel and add Trigger of your button ID.
AsyncPostBackTrigger or PostBackTrigger
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
// HERE YOUR TEXTBOX AND LABEL CONTROLS
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2"
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button2" runat="server" Font-Bold="False" Font-Names="Tahoma" Font-Size="16px" ForeColor="DarkRed" Height="40px" OnClick="Button2_Click" Text="Clear Form" Width="165px" />
You should place the Textboxes inside update panel as
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox>
<asp:TextBox ID="txtMessage" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Font-Bold="False" Font-Names="Tahoma" Font-Size="16px" ForeColor="DarkRed" Height="40px" OnClick="Button2_Click" Text="Clear Form" Width="165px" />
</ContentTemplate>
</asp:UpdatePanel>
I have a problem with my 3 radiobuttons in c# at Visual Studio 2012 - when i run this application in browser and check first radiobutton, then check second the both of them are marked.
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
if (RadioButton1.Checked)
{
ListBox1.Items.Add(TextBox1.Text);
TextBox1.Text = "";
}
else if (RadioButton2.Checked)
{
ListBox2.Items.Add(TextBox1.Text);
TextBox1.Text = "";
}
else if (RadioButton3.Checked)
{
ListBox3.Items.Add(TextBox1.Text);
TextBox1.Text = "";
}
}
protected void Button2_Click(object sender, EventArgs e)
{
{
ListBox1.Items.Clear();
ListBox2.Items.Clear();
ListBox3.Items.Clear();
}
}
}
}
.
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<section class="featured">
<div class="content-wrapper">
<asp:TextBox ID="TextBox1" runat="server" Width="195px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Height="32px" Text="Button" OnClick="Button1_Click1" />
<br />
<asp:RadioButton ID="RadioButton1" runat="server" />
<asp:RadioButton ID="RadioButton2" runat="server" />
<asp:RadioButton ID="RadioButton3" runat="server" />
<br />
<br />
<asp:ListBox ID="ListBox1" runat="server" Height="123px" Width="126px"></asp:ListBox>
<asp:ListBox ID="ListBox2" runat="server" Height="123px" Width="126px"></asp:ListBox>
<asp:ListBox ID="ListBox3" runat="server" Height="123px" Width="126px"></asp:ListBox>
<br />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
</div>
</section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
</asp:Content>
Make sure you set the GroupName attribute of the radiobuttons to the same value ( a name for that group of radio buttons).
eg:
<asp:RadioButton id="Radio1" Text="something" GroupName="RadioGroup1" runat="server" />
<asp:RadioButton id="Radio2" Text="another thing" GroupName="RadioGroup1" runat="server" />
<asp:RadioButton id="Radio3" Text="something else" GroupName="RadioGroup1" runat="server" />
Here's my situation. I have a web forms page, and it's getting annoying when the entire page scrolls to the top every time you click a control, so I'm trying to apply update panels to my page.
The submit button may or may not be click-able depending on whether or not the contents of individual update panels are in a proper state.
When the submit button is clicked, It can potentially affect any of the controls on the page.
I understand that I can do some of this with the <triggers> tag element of the update panel, but I don't want to have to put everything on the page into an update panel with it's own trigger, I'd rather that the submit button just reload the entire page.
For the sake of simplicity I've put together a sample project to represent my page. It has a "reset" button, to represent the "submit" button.
The Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" />
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
The default page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Label runat=server Text="This lable represents things not in update panels" ID="label1"></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat=server>
<ContentTemplate>
<table>
<tr>
<td><asp:Button ID="button1" runat="server" OnClick="Button1_click" Text="Button 1" /></td>
<td><asp:TextBox ID="textBox1" runat="server" Text="StartText" Enabled="false" /></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat=server>
<ContentTemplate>
<table>
<tr>
<td><asp:Button ID="button2" runat="server" OnClick="Button2_click" Text="Button 2" /></td>
<td><asp:TextBox ID="textBox2" runat="server" Text="StartText" Enabled="false" /></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanelReset" runat=server>
<ContentTemplate>
<asp:Button ID="reset" runat="server" OnClick="Reset_click" Text="reset" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="button1" EventName="click" />
<asp:AsyncPostBackTrigger ControlID="button2" EventName="click" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
The code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;
namespace WebApplication1
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_click(object sender, EventArgs e)
{
textBox1.Enabled = !textBox1.Enabled;
reset.Enabled = !textBox1.Enabled && !textBox2.Enabled;
}
protected void Button2_click(object sender, EventArgs e)
{
textBox2.Enabled = !textBox2.Enabled;
reset.Enabled = !textBox1.Enabled && !textBox2.Enabled;
}
protected void Reset_click(object sender, EventArgs e)
{
textBox1.Text = "StartText";
textBox2.Text = "StartText";
label1.Text = "reset button clicked";
}
}
}
Just add a PostBackTrigger to the last UpdatePanel.
<asp:PostBackTrigger ControlID="reset" />