Call jQuery From Code Behind in ASP.Net Application

Anubhav Chaudhary
Nov 07, 2013
96.8k
0
2
Article

Introduction

In my last articles I told you about:

In today's article you will learn how to call jQuery from Code Behind in an ASP.NET Application.

This article is one step ahead from our last article, this article will use the same application that was used in the last article but has additional functionalities that will help you to call jQuery functions from Code Behind.

Step 1

First of all you need to add two jQuery files to your applications, you can either download them from the internet or can simply write these lines to use them in your application like I did:

These should be added in the head section of your application.

Step 2

Now to work on the functionality of the application. If you remember, I was using two buttons in my last application, one was for saving the data and the other to close the Popup and refresh the Grid automatically. This application has the same buttons but now the Close button is named a Delete Button.

<tr >

<td >

<asp:Button runat="server" Text="Delete" ID="btn" OnClick="btn_Click" />

</td>

<td>

<asp:Button runat="server" ID="savebtn" Text="Save Data" OnClick="savebtn_Click" />

</td>

</tr>

Previously I was working on the Code Behind for the Save Button only but in this application the Delete Button also has it's own functionality since it will delete the data depending on the name provided. So let's see the .aspx.cs page and see what I had done.

using System.Web.UI.WebControls;

using System.Data.SqlClient;

namespace WebApplication26

{

public partial class WebForm2 : System.Web.UI.Page

{

SqlConnection x;

SqlCommand y;

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btn_Click(object sender, EventArgs e)

{

x = new SqlConnection(@"Data Source=.;Initial Catalog=test;User ID=sa;Password=password@123");

x.Open();

y = new SqlCommand("delete from Popup where [First Name]='"+TextBox1.Text+"'",x);

y.ExecuteNonQuery();

x.Close();

}

protected void savebtn_Click(object sender, EventArgs e)

{

x = new SqlConnection(@"Data Source=.;Initial Catalog=test;User ID=sa;Password=password@123");

x.Open();

            y = new SqlCommand("insert into Popup values('"+ TextBox1.Text +"','" + TextBox2.Text + "','" + TextBox3.Text
        + "','" + TextBox4.Text + "'," + TextBox5.Text + ",'" + TextBox6.Text + "','" + TextBox7.Text + "','" + TextBox8.Text
        + "'," + TextBox9.Text + ")", x);

y.ExecuteNonQuery();

x.Close();

}

You can see that I had added functionality for the delete button also. The delete button will delete the data depending on the first name of the user.

Step 3

Now I want that my Popup Window has delete and save buttons and should get closed and the Grid should be refreshed every time the user enters a new record or deletes an old record. For that we need jQuery.

As you can see in my previous article, I am using jQuery on the .aspx page that was helping me to close the Popup and refresh the Grid automatically, Now I want to change this functionality and want to execute this jQuery from code behind. For that you need to make small changes on the delete and save button click events.

Modify your code with this code:

protected void btn_Click(object sender, EventArgs e)

{

x = new SqlConnection(@"Data Source=.;Initial Catalog=test;User ID=sa;Password=password@123");

x.Open();

y = new SqlCommand("delete from Popup where [First Name]='"+TextBox1.Text+"'",x);

y.ExecuteNonQuery();

x.Close();

Page.ClientScript.RegisterStartupScript(this.GetType(), "func", "window.top.location = ('WebForm1.aspx');", true);

}

protected void savebtn_Click(object sender, EventArgs e)

{

x = new SqlConnection(@"Data Source=.;Initial Catalog=test;User ID=sa;Password=password@123");

x.Open();

y = new SqlCommand("insert into Popup values('"+ TextBox1.Text +"','" + TextBox2.Text + "','" + TextBox3.Text

+ "','" + TextBox4.Text + "'," + TextBox5.Text + ",'" + TextBox6.Text + "','" + TextBox7.Text + "','" + TextBox8.Text

+ "'," + TextBox9.Text + ")", x);

y.ExecuteNonQuery();

x.Close();

Page.ClientScript.RegisterStartupScript(this.GetType(), "func", "window.top.location = ('WebForm1.aspx');", true);

}

You can see that I had used:

Page.ClientScript.RegisterStartupScript(this.GetType(), "func", "window.top.location = ('WebForm1.aspx');", true);

Whenever you want to execute the jQuery from your code behind then you need to write this code. The name "func" is some name given to this function, you can change this name when you need to provide the function that is to be executed on the click of this button. This function can be a function name of an already existing jQuery or you can write the function directly here also as I had written. For example "window.top.location = ('WebForm1.aspx');".

What this will do is, whenever you click on the Save or Delete button, it will execute both the Code Behind and the jQuery as well. The "window.top.selection" is used to navigate to some specified page.

Step 4

Still I want some more functionalities to be added to this application. I want that whenever user clicks on the Delete button an Alert Box should be shown to the user that should confirm that he wants to delete this record since it might be possible that he can click on the Delete button by mistake.

So, for that I am adding one more jQuery function to the Delete button but I am adding this function in the .aspx.cs page. So I now have one function in the .aspx page (the coding part) and the other at the .aspx.cs page (the design part). Write this code in the head section of your application:

$(function () {

$('#btn').click(function () {

if (confirm('Are You Sure You want to Delete!!'))

{

return true;

}

else

return false;

});

</script>

This code will work on the Id of the button and will open a Confirm box on the Button click. Now the question arises, Why did I add this code to the design page? The answer is, it will execute faster than the .aspx page code so it will execute first and will confirm whetehr to delete. If you click on the "Ok" button then .aspx will run and it's functionality will execute.

NOTE: I could have used the function that I added to the .aspx page in the design page as well as I have used in my last application, but using that function on the design page will create a great problem since that function will transfer the page to some other page and the .aspx code will not get time to be executed. So no data will be deleted or added, just navigation will occur.

Output

On debugging the application your browser will show the data in the Grid (if you have some).

call jquery from code behind

Now if I click on the "Fill Form in Popup" then a Popup will be shown where I need to add some entries and then I need to click on the "Save Data".

call jquery from code behind

You can see that as I click on the save button the Popup is closed and the Grid is automatically refreshed showing the currently added data.

call jquery from code behind

Now if I again go to the Popup Menu and enter the first name of one of the existing entries and then click on the Delete button then a Confirm Box will be shown on the top of the page.

call jquery from code behind

If I click "Cancel" then we will go back to the Popup Page without deleting the details but If I click on the "Ok" button then three functionalities will occur: