I have an ASP.NET listbox, lstActivities. To edit an item in the list, users can either click lnkButton or double-click on the listbox. I achieve this with:
protected void Page_Load(object sender, EventArgs e) {
if (IsPostBack) return;
var refDblClick = ClientScript.GetPostBackEventReference(lnkButton, "dblClick");
lstActivities.Attributes.Add("ondblclick", refDblClick);
}
protected override void Render(HtmlTextWriter writer)
{
ClientScript.RegisterForEventValidation(lnkButton.UniqueID, "dblClick");
base.Render(writer);
}
I would like to change this so that the postback is asynchronous, using AJAX. At the moment, the listbox and button are in an UpdatePanel so there is an async postback when the button is clicked. But when the listbox is double-clicked, a full postback occurs.
<asp:UpdatePanel ID="up" UpdateMode="Conditional" ChildrenAsTriggers="true"
runat="server">
<ContentTemplate>
<asp:ListBox ID="lstActivities" runat="server"></asp:ListBox>
<asp:LinkButton ID="lnkButton" runat="server" OnClick="lnkButton_Click">
Edit</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
How can I make the double-click refresh only the UpdatePanel?
A few things to try:
<asp:UpdatePanel ID="up" UpdateMode="Conditional" ChildrenAsTriggers="true"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lstActivities" />
<asp:AsyncPostBackTrigger ControlID="lnkButton" />
</Triggers>
.........
</asp:UpdatePanel>
or
protected void Page_Load(object sender, EventArgs e) {
if (IsPostBack) return;
var refDblClick = ClientScript.GetPostBackEventReference(lnkButton, "dblClick");
lstActivities.Attributes.Add("ondblclick", refDblClick);
ScriptManager1.RegisterAsyncPostBackControl(lstActivities);
}
I just a ran a quick test with the code you provided and I do get "partial postbacks" (for lack of a better term since updatepanels always do full postbacks) on both, the clicking of the button and the double clicking of the list.
If you set other panels in that page to UpdateMode="Conditional" as you are doing with your UpdatePanel "up", then only elements inside "up" will be updated. If you don't specify the update mode on the other panels, then they will always be updated on postback, because, again, update panels ALWAYS do full postbacks; what they really do is partial refreshes of the page.
Linking MSDN documentation regarding UpdatePanel as I think is a very helpful read.
I tried the solutions suggested, but with no luck. It's quite a complicated page with lots of UpdatePanels so hard to work out the exact problem.
In the end I went for jQuery:
$(document).ready(function () {
$(document).delegate('#ctl00_body_lstActivities', 'dblclick', function () {
eval($('#ctl00_body_lnkButton').attr('href'));
});
});
Related
I'm having issues with the asp.net textbox within an update panel. It works perfectly fine when adding or removing each individual character but if I highlight all of the text within the textbox, and then remove it a full postback occurs, not a partial postback which is expected.
Why is this happening? I haven't found anything related to this particular problem so it's likely I'm doing something wrong.
Example aspx:
<asp:UpdatePanel ID="updExample" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Repeater ID="rptExample" runat="server" .... >
<ItemTemplate>
<asp:TextBox ID="txtExample" runat="server" ClientIDMode="static" Text='<%# Eval("Example") %>' OnTextChanged="txtExample_TextChanged" AutoPostBack="true"></asp:TextBox>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
Example TextChanged Event:
protected void txtExample_TextChanged(object sender, EventArgs e)
{
updExample.Update();
}
Additional Notes:
Switching UpdateMode to 'Always' doesn't work.
Karthikeyan Nagaraj pointed out in the comments to try adding triggers alongside what I already had. I did in fact already have this, however, I was assigning the trigger in the ItemDataBound event which I realized was incorrect after reinvestigating. The ItemCreated event was much more suited.
I had no issues finding the control in the ItemCreated event, however adding a new async postback trigger to the update panel gave me grief and said the control couldn't be found when changing the text. To resolve this, I used the script managers RegisterAsyncPostBackControl(); method as shown below.
protected void rptExample_ItemCreated(object sender, RepeaterItemEventArgs e)
{
var input = e.item.FindControl("txtExample");
if (input != null) {
ScriptManager sm = ScriptManager.GetCurrent(this);
sm.RegisterAsyncPostBackControl(input);
}
}
I need to have UpdatePanel with asyncpostback, but in my case it seems that no partial postback happens, but fullpostback. I am new to web forms, please, check the code:
<%# Register TagPrefix="Cust" TagName="CompanyInformationView" Src="~/CustomControls/CompanyInformationView.ascx" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick= "Button1_Click" Text="test" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<Cust:CompanyInformationView ID="CompanyInformationView" runat="server" />
</asp:Content>
So I have Test Button. OnClick it should do "nothing" for test. Also there is custom control on web form. Here is server side code for this form:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// fill in custom control
CompanyInfo c = GetInfo();
CompanyInformationView.Company = c;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
var i = 1;
}
CompanyInformationView is custom control with property "Company". There is no ViewState added for this property (so it cannot be loaded properly if postback is done). When I click on Test Button, the page fails, because "CompanyInformationView.Company" is not set (it is not set, because it cannot be loaded from ViewState, I guess).
Instead, I think that it should not work like this. AsynPostback should deal only with UpdatePanel.
Why it wants to reload custom control? Doesn't it mean that Full postback happen or maybe I do not understand Asyncpostback?
PageLoad and all other events are raised on every get\postback, no matter if it's async or full,
In asyncpostback, the response which the server renders includes only the content inside the updatepanel.
Try to Put <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
Before
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true" UpdateMode="Conditional">
Async post back in web forms still proceeds the whole page life cycle as if it's a traditional post. the difference is only the updated content inside target update panel that will be sent in response. so in this case, async post back will still give you exception unless you populate the custom control no matter get/post.
you need to also put the custom control inside another update panel or in the same update panel as the button in order see partial update to happen.
Situation:
Checkbox inside a updatepanel
multiline textbox inside a different updatepanel.
if the user checks the checkbox, the multiline text box gets a name... this works fine.
HTML:
<asp:UpdatePanel ID="upTraveling" runat="server"
UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:CheckBox ID="cbRUTraveler" runat="server" Text="I am a Traveler" AutoPostBack="True"
oncheckedchanged="cbRUTraveler_CheckedChanged1" />
</ContentTemplate>
</asp:UpdatePanel>
<td>
<asp:UpdatePanel ID="upTravelers" runat="server" ondatabinding="cbRUTraveler_CheckedChanged1"
UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="tbTravelers"
Class="textwidth" runat="server" TextMode="MultiLine"
placeholder="FName LName, FName LName" required="required">
</asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="cbRUTraveler" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
C#:
protected void cbRUTraveler_CheckedChanged1(object sender, EventArgs e)
{
tbTravelers.Text =
RequesterBPL.RequesterTraveling(cbRUTraveler.Checked, tbTravelers.Text);
going = cbRUTraveler.Checked;
}
I also have 2 other updatepanels on the same page... a dropdown list in one updatepanel and a label in another updatepanel. When a user selects a value in the dropdown list... it's suppose to trigger a name placement in the label.
HTML:
<td>
<asp:UpdatePanel ID="upManager" runat="server"
ondatabinding="ddlTeam_SelectedIndexChanged"
UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlTeam"
EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblManager" runat="server" > </asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
C#:
protected void ddlTeam_SelectedIndexChanged(object sender, EventArgs e)
{
//upManager.Update();
lblManager.Text =
ManagerBPL.ReturnManagerName(ddlTeam.SelectedIndex);
}
However, when a user makes a selection in the dropdown, nothing happens.
until the user checks the checkbox which has nothing to do with the label and the dropdown. Once the user checks (or unchecks) the checkbox... the label gets populated with the selection from the dropdown.
All controls are in a table for structure. I have the scriptmanager in place.
From what I've been reading on the net this maybe a bug... If not a bug does anyone see where I may be going wrong...?
Thanks
Honestly you could do this all Client-Side. A simple example:
$(function () {
$('#<%= drpContent.ClientID %>').blur(function () {
var content = $('#<%= drpContent.ClientID %> option:selected').val();
$('#lblContent').text(content);
}
});
I've provided the initial example with the value declared. The second example is with a text representation.
$(function () {
$('#<%= drpContent.ClientID %>').blur(function () {
var content = $('#<%= drpContent.ClientID %> option:selected').text();
$('#lblContent').text(content);
}
});
An example with a Fiddle. The example though is simple, is far easier then dealing with an Update Panel. That particular control can be a nightmare to deal with, it can be quite painful. Though you asked about the server issue, this option is more viable and more common.
Update Panel (Drawback):
Creates pandomonium between Client / Server Side Events.
Stores your entire page in memory, then recreates (Performance Heavy)
Often breaks Page-State quickly in the Asp.Net Page Life Cycle.
Hopefully this helps.
I have a case that I'm using an update panel that when updated it will load a user control containing a child update panel, and its code is as follows:
<asp:UpdatePanel runat="server" ID="Parent" UpdateMode="Conditional" ChildrenAsTriggers="false" >
<ContentTemplate>
<asp:PlaceHolder runat="server" ID="ChildUPNL"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
In the code behind I got an object then use the Update method to refresh the parent update panel
Then It' should have my user control filled with data
in the user control I have an update panel also like:
<asp:UpdatePanel runat="server" ID="Child" OnLoad="ChildLoad">
<ContentTemplate>
<asp:LinkButton Text="Link button" runat="server" />
<asp:Button Text="Button" runat="server" OnClick="ButtonClick"/>
</ContentTemplate>
</asp:UpdatePanel>
When I click on the link button the full page reloaded even the parent and my user control disappered as it not in the page direct
and if I click on the normal button nothing done !
didn't go to the update panel on load event nor the button click event !
Any idea why this action done !
I need when click on button to change some values or save values to database so I need to go throw the server side code without post back the page
You have to load every time usercontrol on page_init or page_load. You can use MultiView to achieve your goal.
You can also use Events and delegate and call custom event and bind parent control after click on child panel button.
**//On Page Behind Code**
protected void Page_Load(object sender, EventArgs e)
{
UserControl11.EventCallfromOtherUserControl += new UserControl1.CallfromOtherUserControl(CallEvent);
}
public void CallEvent()
{
//Load Parent Control
}
**//On User Control Behind Code**
public delegate void CallfromOtherUserControl();
public event CallfromOtherUserControl EventCallfromOtherUserControl;
protected void Button1_Click(object sender, EventArgs e)
{
if (EventCallfromOtherUserControl != null)
{
EventCallfromOtherUserControl();
}
}
I want to do page load every 5 sec so I have this in my head content
<meta http-equiv="refresh" content="5" />
Because of this the whole page refreshes. I just want to refresh the gridview and the graph that I have in the page. How can I do that without refreshing the whole page.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnablePageMethods="true" EnablePartialRendering="True"
runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div id="pie">
<canvas width="125" height="450" id="progress1">[No canvas support]</canvas>
<canvas id="pie1" position="relative" width="400" height="400">[No canvas support]</canvas>
</div>
<asp:Panel runat="server" ID="Panel_Users">
<asp:GridView ID="Grid_UserTable" runat="server"
OnRowDataBound="MyGrid_RowDataBound">
<Columns> </Columns>
</asp:GridView>
</asp:Panel>
<asp:Timer ID="TimerClickEvent" runat="server" Interval="4000" ontick="TimerClickEvent_Tick"></asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
protected DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void TimerClickEvent_Tick(object sender, EventArgs e)
{
if (LastUpdate.AddSeconds(5.0) < DateTime.Now)
{
UpdatePanel1.Update();
LastUpdate = DateTime.Now;
}
}
protected void Page_Load(object sender, EventArgs e)
{
ToolkitScriptManager1.RegisterAsyncPostBackControl(TimerClickEvent);
if (!IsPostBack)
{
LastUpdate = DateTime.Now;
}}
Doesn't reload. where am I going wrong
Place the panel inside an UpdatePanel and use method updatePanelID.Update() to update the update the Panel containing GridView. See this for more details
Instead of button click event you can use a timer for that.
If you only want to refresh a region, there are 2 options:
load that into an <iframe> and let it do whatever it wants (via meta-refresh on the document inside the <iframe>
reload the implacted region via javascript, perhaps jQuery's .load() method, i.e. $('#id').load(url);
A meta-refresh on the entire page will, by necessity, reload the entire page.
For a built in asp.net solution, use an <asp:UpdatePanel> along with an <asp:Timer> control.
Set the update panel to update based on the Timers Tick event. This will then only update the content within the update panel.
HOWEVER, this is a quick and dirty solution (in my opinion) because even though the content on the page only updates within the update panel, the whole page is actually posted back each time, and anything within the Page_Load method will be processed again.
Another solution would be to use some javascript ajax, and only update what you need to update. A great javascript library which will help you with this is jQuery, and then use the AJAX features of this. This will allow you to reload on the areas that you need, and give you far greater control over what is happening.
I would forget about the AJAX Control Toolkit, and look more into jQuery Ajax and jQuery UI.