Step 1 : Create SQL Server table and insert helptext data
Create table tblHelpText
(
HelpTextKey nvarchar(50) primary key,
HelpText nvarchar(250)
)
GO
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)
as
Begin
Select HelpText from tblHelpText where HelpTextKey=@HelpTextKey
End
Step 3 : Create new asp.net 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);
cmd.Parameters.Add(parameter);
con.Open();
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
<html>
<head>
<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('');
});
});
</script>
</head>
<body style="font-family:Arial">
<table>
<tr>
<td>First Name</td>
<td><input id="firstName" type="text" /></td>
<td><div id="firstNameHelpDiv"></div></td>
</tr>
<tr>
<td>Last Name</td>
<td><input id="lastName" type="text" /></td>
<td><div id="lastNameHelpDiv"></div></td>
</tr>
<tr>
<td>Email</td>
<td><input id="email" type="text" /></td>
<td><div id="emailHelpDiv"></div></td>
</tr>
<tr>
<td>Income</td>
<td><input id="income" type="text" /></td>
<td><div id="incomeHelpDiv"></div></td>
</tr>
</table>
</body>
</html>
Comments
Post a Comment