partial page postback using javascript/jquery - c#

I have two asp.net updatepanels on my page. One of them has a checkbox and other one has some labels. I want to update the contents of second updatepanel when checkbox is checked/unchecked. I am using following code:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._doPostBack('UpdatePanel2', '');
but it is doing full page post back.
Please suggest a solution.

You can set checkbox's AutoPostback to True and make it a trigger of the second UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CheckBox1" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
And then you can add label changing code in checkbox's "CheckedChanged" event handler, e.g.
protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
{
Label2.Text = DateAndTime.Now;
}

It seems you are looking for update panel triggers, you don't need to trigger it by javascript...

Related

Add Items To ListBox In UpdatePanel

I have a Listbox that exists in an UpdatePanel on an ASP.NET webform. Also inside the UpdatePanel, exists a Button that adds a bunch of ListItem's to the Listbox, this PostBackTrigger as shown below:
<asp:UpdatePanel ID="updSection6" runat="server">
<ContentTemplate>
<asp:LinkButton Text="Run Scan" ID="btnEditSectionStory6" runat="server" OnClick="btnRunScan_Click" />
<br />
<asp:ListBox ID="lbLog" runat="server" Height="263px" Width="747px"></asp:ListBox>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnEditSectionStory6" />
</Triggers>
</asp:UpdatePanel>
I add items in the click event:
protected void btnRunScan_Click(object sender, EventArgs e)
{
lbLog.Items.Add("Scan Beginning...");
.....hundreds of other items
}
The items are added to the ListBox, however it is after the entire btnRunScan_Click method is run, rather than adding them as each event occurs (So the user can receive messages as the actions occur). Am I missing an attribute or something on the UpdatePanel?
TIA
To Add Items without refreshing page or prevent from calling the cyclic events use following code and eliminate postBackTrigger inside the Trigger.Use following code that is tested working for me.Also use the scriptManager to prevent from exception over to use the updatePanel
.aspx design file
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="updSection6" runat="server">
<Triggers>
</Triggers>
<ContentTemplate>
<asp:LinkButton Text="Run Scan" ID="btnEditSectionStory6" runat="server" OnClick="btnRunScan_Click" />
<br />
<asp:ListBox ID="lbLog" runat="server" Height="263px" Width="747px"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
.cs file
protected void btnRunScan_Click(object sender, EventArgs e)
{
lbLog.Items.Add("Scan Beginning...");
}
As other also mention you can also use jquery with ajax to code over the client side to do this one.

How to set UpdatePanel to automatically update while registering AsyncPostBackTrigger programmatically?

I have a Button which will trigger an UpdatePanel, but it is in a different container so if I put my code like below :
<asp:UpdatePanel ID="uptxtQuickSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="height: 100%;">
<ContentTemplate>
<asp:TextBox ID="txtQuickSearch" CssClass="textinput" onmouseover="this.select()" onfocus="this.select()" onkeydown="QuickSearch()" runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearchFilter" />
</Triggers>
</asp:UpdatePanel>
There will be a runtime server error : "A control with ID 'btnSearchFilter' could not be found for the trigger in UpdatePanel 'uptxtQuickSearch'."
So I've to register it on the Page_load event with ScriptManager :
ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
scriptManager.RegisterAsyncPostBackControl(btnSearchFilter);
but in this case, I still have to update the UpdatePanel manually by using Update() method on the end of btnSearchFilter_click event.
Is there any way to update the panel automatically while registering the trigger on the code-behind?
I've found a solution for this issue. It turns out that you don't really need to register the control using RegisterAsyncPostBackControl method.
you just need to add the trigger on Page_Init event and use the control.UniqueID if the control cannot be found on the runtime.
So the aspx will be like this :
<asp:UpdatePanel ID="uptxtQuickSearch" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false" style="height: 100%;">
<ContentTemplate>
<asp:TextBox ID="txtQuickSearch" CssClass="textinput" onmouseover="this.select()" onfocus="this.select()" onkeydown="QuickSearch()" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
and in code-behind :
protected void Page_Init(object sender, EventArgs e)
{
uptxtQuickSearch.Triggers.Add(new AsyncPostBackTrigger() { ControlID = btnSearchFilter.UniqueID });
}

upload file not working in updatepanel

I DONT WANNA GET MY PAGE TO BE GET REFRESH OR POSTBACK
So I am trying uploading file in updatepanel but onclicking upload button the validation check shows that there is no file
my html code is
<asp:UpdatePanel ID="UpdatePanel16" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:FileUpload ID="fp_upload" runat="server" />
<asp:Button ID="btn_browse" runat="server" Text="Upload" OnClick="btn_browse_Click" />
</ContentTemplate>
</asp:UpdatePanel>
It seems to be
my .cs code is
protected void btn_browse_Click(object sender, EventArgs e)
{
if (fp_upload.HasFile)
{
Response.Write("contains file");
}
else
{
Response.Write("no file");
}
}
when I used to browse the file and click on upload button every times it goes in else condition. Whats the problem.
ALSO I DONT WANNA GET MY PAGE TO BE GET REFRESH OR POSTBACK
To use a FileUpload control inside an UpdatePanel control, set the postback control that submits the file to be a PostBackTrigger control for the panel.
just add PostBackTrigger after </ContentTemplate> for the FileUploader as below:
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="FileUpload1" />
</Triggers>
</asp:UpdatePanel>
and add the below code in page load :
ScriptManager.GetCurrent(this).RegisterPostBackControl(FileUpload1);
or if you want to make it async, you can use this :
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnAsyncUpload" runat="server"
Text="Async_Upload" OnClick = "Async_Upload_File" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick = "Upload_File" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "btnAsyncUpload"
EventName = "Click" />
<asp:PostBackTrigger ControlID = "btnUpload" />
</Triggers>
</asp:UpdatePanel>
Write trigger will instruct the button that we are using for the upload to perform a full postback
<asp:UpdatePanel ID="UpdatePanel16" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btn_browse" />
</Triggers>
<ContentTemplate>
<asp:FileUpload ID="fp_upload" runat="server" />
<asp:Button ID="btn_browse" runat="server" Text="Upload" OnClick="btn_browse_Click" />
</ContentTemplate>
</asp:UpdatePanel>

Checkbox does not get checked/unchecked when used as control for CollapsiblePanelExtender

Has anyone else tried to use checkbox as control to collapse/expand the AJAX CollapsiblePanelExtender?
The panel collapses/expands fine when I am clicking the checkbox. But the checkbox itself won't get checked.
Did that happen to you too?
I know there's a work around this, but I can't rest until I understand why.
Here's the code just in case someone wants to see:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="standard">
<asp:UpdatePanel ID="UpdatePanelBespokeRates" runat="server">
<ContentTemplate>
<asp:CheckBox ID="checkbespoke" runat="server" AutoPostBack="False" Checked="false" Text="Click and unclick this checkbox" />
</p>
<asp:UpdatePanel ID="UpdatePanelBespoke" runat="server">
<ContentTemplate>
<asp:CollapsiblePanelExtender ID="CollapsibleExtender2" runat="server"
TargetControlID="PnlBespokeRates" CollapseControlID="checkbespoke"
CollapsedSize="1" ExpandControlID="checkbespoke" SuppressPostBack="True"
Enabled="True" Collapsed="True"></asp:CollapsiblePanelExtender>
<asp:Panel ID="PnlBespokeRates" runat="server" Visible="True" Height="300px" Width="200px" BackColor="White">
<p>Another Hello World text</p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="checkbespoke" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<p>
</div>
in the Code behind it is:
protected void Page_Load(object sender, EventArgs e)
{
CollapsibleExtender2.ClientState = "true";
CollapsibleExtender2.Collapsed = true;
}
Try removing Checked="false" from the asp:CheckBox declaration. I suspect that the postback trigger may be reloading the checkbox and re-initialising it.
What worked was:
SuppressPostback="false" in the CollapsiblePanelExtender attribute
and
Autopostback="true" in the checkbox control
remove all manual C#
And then voila.

Updateprogessbar is not working when Setting AssociatedUpdatePanelID?

I have two updatepanel and a progressbar on the page. If I set the AssociatedUpdatePanelID, then progressbar is not working, without setting AssociatedUpdatePanelID progress bar is working but the problem is working for both updatepanel. But I need to work on one updatepanel.
<asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />
<asp:UpdateProgress runat="server" ID="prg" AssociatedUpdatePanelID="upnl">
<ProgressTemplate>
<img src="Images/progressbar.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<br />
<asp:UpdatePanel runat="server" ID="upnl" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" ID="upnl1" UpdateMode="Conditional">
<ContentTemplate>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Code Behind - C#
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
protected void Button2_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
In this video, he also not set AssociatedUpdatePanelID
http://www.asp.net/learn/ajax-videos/video-123.aspx
Excellant Article: Explaining every thing in very simple manner..........
http://www.codedigest.com/Articles/ASPNETAJAX/125_Using_UpdateProgress_Control_Effectively.aspx
By Design External triggers for an UpdatePanel do not fire an associated UpdateProgress, since the implementation of enabling the UpdateProgress control searches the control hierarchy for the calling control; an external trigger will not be present in the control hierarchy.
AssociatedUpdatePanelID property in the UpdateProgress control will not work if the event that triggered the UpdatePanel is also external.

Categories

Resources