Using JavaScript and UpdatePanels in VB.NET


V4 Ajax Tutorials
Server Intellect Cloud Hosting

Using JavaScript and UpdatePanels in VB.NET

This tutorial was created with Visual Studio.NET 2008. 2005 can be used, but Microsoft's ASP.NET AJAX Extensions, which can be downloaded at this link, must be installed.

Server Intellect assists companies of all sizes with their hosting needs by offering fully configured server solutions coupled with proactive server management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.

We all know that AJAX utilizes JavaScript, but what if we want to use our own JavaScript calls in conjunction with AJAX? This tutorial will show you how we can call JavaScript ourselves whilst using AJAX. We will be making use of the Alert method in JavaScript when the user clicks a button.
We will start off by creating our ASPX page with a ScriptManager and an UpdatePanel, as normal:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

</ContentTemplate>
</asp:UpdatePanel>

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

For this web application, we will need to add a textbox and a button:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Name: <asp:TextBox ID="txtName" runat="server" /><br />
<asp:Button ID="butJScall" runat="server" Text="Call JS" /><br />
<br />

Time: <%= DateTime.Now.ToString("T") %>
</ContentTemplate>
</asp:UpdatePanel>

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.

We add the current time to the UpdatePanel so we know when it refreshes.
Our button will call the following method when clicked:

Protected Sub butJScall_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles butJScall.Click
Dim script As String = "alert('Hi, " + txtName.Text + ". This is a JavaScript call within an UpdatePanel.');"
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "jsCall", script, True)
End Sub

Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!

The entire code-behind will look something like this:

Partial Class _Default
Inherits System.Web.UI.Page

Protected Sub butJScall_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles butJScall.Click
Dim script As String = "alert('Hi, " + txtName.Text + ". This is a JavaScript call within an UpdatePanel.');"
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "jsCall", script, True)
End Sub
End Class

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!
 


Comments
sashi said:

hi ,

I am new to ajax and this site is very much helpful to learn about AJAX .

regards,

sashi

Posted Sep 25, 2008 3:36 AM
senthil said:

thanks. This site is very helpful to learn ajax

Posted Oct 17, 2008 3:01 AM
Vinit said:

I don't think this is a better use of the updatepanel, because if you can't separate your UI and code then you might be making mistake or overlooking something. I would suggest to not include UI in the code behind and if anyone does than you might be end with a code which is hard to manage. Sorry for the negative comment but this is what I feel when come to this kind of code which will make everyone's life miserable except the one who is writing.

Posted Oct 18, 2008 11:46 AM
Joe said:

What about if I want to add onclick attribute to a button inside update panel !

Posted Oct 19, 2008 5:20 AM
john said:

Another alternative way is to use the RegisterDataItem. Please see the following code..

ASPX code

---------

<script type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(

function (sender, args)

{

try

{

// Retrieve the data item

var data = args.get_dataItems()['<%= lblDataItem.ClientID %>'];

if(data)

{

alert('Hi, ' + data.userName + 'This is a JavaScript call within an UpdatePanel.')

}

}

catch(e)

{

alert(e.description)

}

}

);

</script>

<asp:Label ID="lblDataItem" runat="server"></asp:Label>

ASPX.cs code

---------

protected void btnButton_Click(object sender, EventArgs e)

{

ScriptManager.GetCurrent(this).RegisterDataItem(lblDataItem, "dataItem = { userName:'yourName' }", true);

}

Posted Oct 19, 2008 11:06 PM
Varun said:

Ok, i have the same code in c#. It is good. Could you please help me on how to use the same code in Web User Control.

I know the name needs to be concatenated with wuc name !! However, its not working (no code error). Please provide code in c#.

Thanks in advance.

Posted Mar 26, 2009 2:40 AM
Freelance SEO India said:

India’s leading Freelance SEO India services provider with main competency in Search Engine Optimization of websites.

Posted Dec 29, 2010 10:15 PM
ads said:

asdasd

Posted Jan 27, 2011 9:03 PM
Wedding Rings said:

wow this looks complicated as hell.. i tried the first part of it and then gave p..but i believe it works.. its just me..

Posted May 24, 2011 9:21 PM
www.outlet-louisvuitton.co.uk said:

www.outlet-louisvuitton.co.uk

Posted Aug 6, 2011 3:29 AM
International Background said:

Good day I am so grateful I found your blog, I really found you by mistake, while I was researching on Askjeeve for something else, Nonetheless

Posted Oct 28, 2011 3:47 PM
SUNY Cortland Student Housing said:

I am going to share your blog on Google group. It is indeed very interesting.

Posted Nov 9, 2011 3:36 PM
furniture in india said:

it is very helpful information on Vb.net.

Posted Nov 24, 2011 2:16 AM
Dog Walking said:

I love using server intellect. Thanks for sharing a post about it.

Posted Nov 25, 2011 9:12 AM

Leave a Comment