Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery ajax load aspx page

Suggested Videos
Part 51 - Increase decrease font size using jquery
Part 52 - jquery floating div
Part 53 - jquery ajax load

In this video we will discuss how to load HTML data from the server from an aspx page using load function. This is continuation to Part 53. Please watch Part 53 from jQuery tutorial before proceeding.

When a text box receives focus, the help text associated with that field should be loaded from the server and displayed. When the focus is lost the help text disappears. The help text is stored in the database.
jquery ajax load aspx page

We will be using the jquery ajax load function to achieve this. Here is how this is going to work
1. The ASPX page loads data from the SQL Server database using ADO.NET and C#
2. The HTML page loads HTML data from the ASPX page using jQuery AJAX load function
jquery ajax load html from page

Step 1 : Create SQL Server table and insert helptext data

Create table tblHelpText
     HelpTextKey nvarchar(50) primary key,
     HelpText nvarchar(250)

Insert into tblHelpText values
('firstName','Your fisrt name as it appears in passport')
Insert into tblHelpText values
('lastName','Your last name as it appears in passport')
Insert into tblHelpText values
('email','Your email address for communication')
Insert into tblHelpText values
('income','Your annual income')

Step 2 : Create stored procedure that the ASPX page will call to get helptext data from the database

Create procedure spGetHelpTextByKey
@HelpTextKey nvarchar(50)
     Select HelpText from tblHelpText where HelpTextKey=@HelpTextKey

Step 3 : Create new web application project. Name it Demo. 

Step 4 : Include a connection string in the web.config file to your database.
<add name="DBCS"
      connectionString="server=.;database=SampleDB;integrated security=SSPI" />

Step 5 : Add a new WebForm. Name it GetHelpText.aspx. Copy and paste the following HTML in the WebForm.

<%@ Page Language="C#" AutoEventWireup="true"
         CodeBehind="GetHelpText.aspx.cs" Inherits="Demo.GetHelpText" %>
<div id="divResult" runat="server"></div>

Step 6 : Copy and paste the followng code in the code-behind file

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace Demo
    public partial class GetHelpText : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            string helpTextKey = Request["HelpTextKey"];
            divResult.InnerText = GetHelpTextByKey(helpTextKey);

        private string GetHelpTextByKey(string key)
            string helpText = string.Empty;

            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
                SqlCommand cmd = new SqlCommand("spGetHelpTextByKey", con);
                cmd.CommandType = CommandType.StoredProcedure;
                SqlParameter parameter = new SqlParameter("@HelpTextKey", key);
                helpText = cmd.ExecuteScalar().ToString();

            return helpText;

Step 7 : Add an HTML page to the ASP.NET project. Copy and paste the following HTML and jQuery code
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            var textBoxes = $('input[type="text"]');
            textBoxes.focus(function () {
                var helpDiv = $(this).attr('id');
                $('#' + helpDiv + 'HelpDiv').load('GetHelpText.aspx', { HelpTextKey: helpDiv });

            textBoxes.blur(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).html('');
<body style="font-family:Arial">
            <td>First Name</td>
            <td><input id="firstName" type="text" /></td>
            <td><div id="firstNameHelpDiv"></div></td>
            <td>Last Name</td>
            <td><input id="lastName" type="text" /></td>
            <td><div id="lastNameHelpDiv"></div></td>
            <td><input id="email" type="text" /></td>
            <td><div id="emailHelpDiv"></div></td>
            <td><input id="income" type="text" /></td>
            <td><div id="incomeHelpDiv"></div></td>

jQuery tutorial for beginners


  1. Hi,

    What i dont understand here is that you assign the value from database t div in aspx page in codebehind,but then how its reflecting in html page div?

  2. In load function, the first parameter is URL and we are specifying the URL of aspx page.The second parameter is data and supplying key Value by using JSON object.

  3. creating table throws this error.

    "Only one statement is allowed per batch. A batch separator, such as 'GO', might be required between statements."

  4. I am Browsing Same Example in IE and i attached debugger in html page .
    "its showing error JavaScript critical error at line 1, column 1 in about:jquery-2.2.2.js

    SCRIPT1002: Syntax error"
    mean while its working in chrome. could u give me explanation ???


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.