Using JavaScript and UpdatePanels in ASP.NET 3.5


Server Intellect


Using JavaScript and UpdatePanels in ASP.NET 3.5

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.

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

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 adds a new entry to an XML file.
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>

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

For this web application, we will need to add three textboxes, a button, and a literal control:

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Name: <asp:TextBox ID="txtName" runat="server" /><br />
City: <asp:TextBox ID="txtCity" runat="server" /><br />
Age: <asp:TextBox ID="txtAge" runat="server" /><br />
<asp:Button ID="butAdd" runat="server" Text="Add" OnClick="butAdd_Click" /><br />
<br />

Time: <%= DateTime.Now.ToString("T") %><br />
<br />

<asp:Literal ID="litResults" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

We add the current time to the UpdatePanel so we know when it refreshes.
Notice that our button has the OnClick event specified to call the butAdd_Click method, which is as follows:

protected void butAdd_Click(object sender, EventArgs e)
{
try
{
XDocument xmlDoc = XDocument.Load(Server.MapPath("People.xml"));

xmlDoc.Element("Persons").Add(new XElement("Person", new XElement("Name", txtName.Text),
new XElement("City", txtCity.Text), new XElement("Age", txtAge.Text)));

xmlDoc.Save(Server.MapPath("People.xml"));
jsCall("Data successfully added to XML file.");
readXML();
}
catch
{
jsCall("Sorry, unable to process request. Please try again.");
}
}

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.

Next, we call the method that will display the contents of the XML file:

protected void readXML()
{
XDocument xmlDoc = XDocument.Load(Server.MapPath("People.xml"));

var persons = from person in xmlDoc.Descendants("Person")
select new
{
Name = person.Element("Name").Value,
City = person.Element("City").Value,
Age = person.Element("Age").Value,
};

litResults.Text = "";
foreach (var person in persons)
{
litResults.Text = litResults.Text + "Name: " + person.Name + "<br />";
litResults.Text = litResults.Text + "City: " + person.City + "<br />";
litResults.Text = litResults.Text + "Age: " + person.Age + "<br /><br />";
}

if (litResults.Text == "")
litResults.Text = "No Results.";
}

Server Intellect offers Windows Hosting Dedicated Servers at affordable prices. I'm very pleased!

Our last method is to call a JavaScript method. We will use it to display an alert to the user:

protected void jsCall(string alert)
{
string script = @"alert('" + alert + "');";
ScriptManager.RegisterStartupScript(this, this.GetType(), "jsCall", script, true);
}


To download this project, enter your email address and a link will be emailed to you.
Email Address:   Download the sample project here


Comments
Evan said:

Can you please explain what these 2 last lines do?

string script = @"alert('" + alert + "');";

ScriptManager.RegisterStartupScript(this, this.GetType(), "jsCall", script, true);

Posted Oct 27, 2008 4:35 PM
redzer0 said:

umm.. i think the first line means that the "@" at the beginning treats the rest characters as valid string in C# because some char especially "/" makes the string invalid. sorry if didnt construct my sentence well.

the second line means that it register..umm whats the right term to that.. it literally means to attached the javascript and execute it on every click of the button.

Posted Oct 28, 2008 6:26 AM
varun said:

Good Code. I am new and finding difficulties in using Nova Editor. If i place the editor in Update Panel - on button click, it dissaperes. I am unable to clear the content of the editor too. WYSWYG1.Content=""; works however it doesn't reflects on the aspx page.

Posted Nov 6, 2008 1:33 AM
varun said:

The code is good. I have used it and works fine, thanks. I want more on using JavaScript in AJAX (i am using VS 2005). I have the above mentioned problem.

Posted Nov 6, 2008 1:38 AM
jsimhan said:

The first line allows verbatim string literals. It means if you precede @ symbol before a string it can permit the string without escape characters.

string script = "\\\\localhost\\welcome.aspx"

instead of that using @

string script = @"\\localhost\welcome.aspx"

Posted Dec 31, 2008 12:27 PM

Leave a Comment