jquery ajax load aspx page

this is part 54 of jQuery tutorial in this video we'll discuss how to load HTML data from the server from an aspx page using take very load function this is continuation to part 53 so please watch part 53 before proceeding here is what we want to achieve this is same as what we did in the previous video session in the previous video session we loaded the health text from an HTML file in this video we will be loading the help text from an aspx page but we are actually going to store the health text data in a database table so this is how it's going to work the sequel server database is going to have a table which will contain our help text data and this aspx page will load the data from the sequel server database using ad or dotnet and c-sharp and then this HTML page is going to call this aspx page and load the help text using jQuery AJAX load function so let's look at this in action the first step here is to create the required database table to store the help text data so let's flip to sequel server management studio here we have the create table script so we're creating this table TBL help text with these two columns help text key and help text and here we have the insert script I've already executed this clip and look at this we have the help text key and help text columns the help text key contains the key that is if the help text is for first-name the key is first name if it's for last name the key is last name and within this column being we have the help text associated with that field and I have also created strewed procedure so the name of the stored procedure is SP get health text by key so if we give the stored procedure a key name this stored procedure is going to return us the health text that is associated with that key and if you look at the implementation of the stored procedure this is straightforward select health text from TBL health text where health text key equals whatever parameter we are passing to this procedure so if we pass first name as the key when we execute the stop SIA notice that we get the help text associated with that key your first name as it appears in passport alright so that's the first step the next step is to add a connection string to the web config file in our dotnet project so let's go to the web config file and under configuration section I'm going to add a section for connection strings and we want a connection string that points to our database sample dB so let's copy this and paste it right here so here the name of the connection string is TBC s and this is pointing to a server that's local to this machine and the database name is sample DB we are using windows authentication and now let's add a web form to this project so we want to add a web form and the name of this wave form is going to be get help text dot aspx now you know we are actually going to get the help text data from the database table so in the previous video session we actually stored the help text in this help dot HTML file now since we are loading the help text from the database table we don't need this helped or HTML file anymore so I am going to delete this help dot HTML file all right and within this get help text dot aspx page we don't require any of this HTML so I'm going to delete that and I'm going to include it development here let's give it an ID let's call this div result and I'm also going to set this run at equals server so basically I am turning this div element into a server-side control so since we have provided this run at equals server attribute we should be able to access this control within the code-behind file all right so here we are going to write some ad or dotnet code to retrieve the health text data from sequence of a database table so the first thing that you need to do is import some ad or dotnet namespaces so we need system configuration we need system data and we need system dot data dot sequel client so here we are going to have a function which is going to retrieve that help text from sequence of a database now in the interest of time I have already typed the required code required ad or or net code so I'm going to copy this and paste this function right here so what is this function doing so notice first of all the name of the function get help text by key so we provided the help text key and it's going to written as the help text associated with that key so we're passing the key as a parameter here we have a variable health text which is initialized to an empty string and then we are reading the connection string from web config file storing it in this variable and then we are constructing a sequel connection object using the connection string that we have read from web config file and then we are building a sequel command object and we want the sequel command object to actually execute this stored procedure so we are passing that to the command object and we want this command object to use this connection object so we are passing that connection object to the command object since this command is actually executing store procedure we are telling that it is a stored procedure and then if you notice the stored procedure has got a parameter and the name of the parameter is at help text key so here we are building a sequel parameter object this is the name of the parameter and this sequel parameter is going to get its value from this function parameter key and then we are associating this parameter object with this command object opening the connection and executing the command so whatever result we get back we are storing that in this variable help text and finally we're returning that variable so pretty straightforward ad or net code and within our page load function I'm going to create a variable let's actually create a string variable and this is going to contain our help text key equals we are going to get that from the request object okay and let's actually specify the name of the key as help text key now you can give this key any meaningful name you want okay so once we have the help text key we can pass that to this function and this function is going to return the help text associated with that key right so let's call this function get help text key and to this we need to pass the key value and whatever result we are going to get back we want to set that you know within this development and this development has got an ID div result so the result dot inner text equals whatever we get from this function all right so we have our aspx page now now this HTML page is going to use the jQuery AJAX load function and load that data all right so the next modification is for this HTML page one dot HTML now we are not going to modify this HTML in any way we are going to change this jQuery code okay so this is going to stay the same way if I still want to find all the text boxes on this page and whenever a text box receives focus we want to execute this code I'm going to make one change here I'm actually going to remove this hard-coded string from there and move it here and I will explain shortly why and then on this we are calling the load function in a previous video session we loaded the health text from an HTML file but now we want to load the health text from this get help text or aspx page so the name of the you are I this is the URI github text dot aspx so we are going to pass that here okay and if you look at this get help text dot aspx page you know it actually expects help text key to be passed right to the request so we need to pass help text key now if you recollect from the previous video session this load function has got three parameters the URI to which we want to make the request the second parameter is data the data that we want to pass to the request to the URI and the third parameter is callback function the function that gets called when the request successfully completes right so now I'm going to use that second parameter the data parameter and pass the data to the request okay so and I'm going to pass the data using a JSON object so the key that we want to pass is this help text key so let's copy that and the value is actually going to come from this variable help there okay so what's going on here so let's understand this now this blood function is not going to change in any way it's going to stay the same way now when we run the page and when first name textbox receives focus what happens you know this piece of code will be executed so this keyword here refers to the element that received focus in our example first name textbox received focus and what are we doing here with it dreaming the ID attribute value and if you look at the ID attribute value it is first name so we are going to get that value in this variable help div is going to contain first name and look at what we are doing here so to that first name we are appending help their first name help there so that's the ID of the development that is associated with first name field and we are using the ID selector here so this entire expression is going to evaluate to name help do and on that we are calling the load function and the URI is get help text so this page is present in the same pay same folder as HTML page one dot HTML so that's a relative address so that's the URI get help text dot aspx and to this page we have to pass the help text key and the value is nothing but first name in this case right so when we pass first name as the help text key to our get help text or aspx page what is that doing it's passing actually here look at this we are creating a variable and then we are passing that variable to this get help text by key function right instead of doing that we can actually pass this directly to the function right so we are passing the help text key so here we are passing first name right to this function when we pass first name as the key to the function what is this function going to do it's actually going to call the stored procedure and pass that key as the parameter to the stored procedure the stored procedure is going to be executed so when we pass first name the stored procedure will return the help text associated with that field so sequel server is going to send that data to our aspx page and our aspx page is going to send that data to HTML page right so let's look at this in action so let's save all these changes HTML page 1 let's load that and look at this when the first name textbox receives focus you know look at that we get that data your first name as it appears in passport and then it loses focus look at that it disappears similarly even last name you see is focus we have it an email and income this data is actually coming from the database and to prove that I'm actually going to fire up secret profiler and let's run a new trace and within events elections make sure you select this column checkbox show all columns and I'm going to set a column filter database name like our database name is sample DB so sample DB and I'm going to click OK so and let's run the trace so we are running trace on sample DB now let's go ahead and look at this as soon as first name text-box receives focus look at that when we go to sequel profiler look at that it's calling the stored procedure SP get help text by key and first name is passed as the parameter value similarly when last name receives focus look at that so here help text is last name okay so this proves that the stored procedure is called and the stored procedure is returning that data to the aspx page and the aspx page is sending that data to our HTML page thank you for listening and have a great day

Channel: kudvenkat

Views: 65,354

Keywords:

Id: xPk6f0SoHyQ

Length: 14min 18sec (858 seconds)

Published: Fri May 29 2015