Call jQuery From Code Behind in ASP.Net Application

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:

<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

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 my Popup Window to have deleted 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 the 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:

<script>
$(function () {
$('#btn').click(function () {
if (confirm('Are You Sure You want to Delete!!'))
{
return true;
}
else
return false;
});
});
t;/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 whether to delete. If you click on the "Ok" button then .aspx will run and its 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).

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".

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.

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.

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:

The record will be deleted.
The user will be returned to the parent window.
The Grid will be refreshed.

6 Comments

Join the conversation! Your thoughts help the community grow.

kalu singh rao10y ago
Nice
sss11y ago
hi... thanks for your article . i write this code in my project . i receive alert for confirm but my code don't work ( i want set a text in textbox ) . how can i sent my code for you to help me ?
- Anubhav Chaudhary11y ago
  Put a debugger at code where you are deleting the record. then you will get the problem. Also put the code in try catch block
Anubhav Chaudhary11y ago
Hey Kanish, It's my personal suggestion to you that either use jquery in full or don't use it, because in this way you will get stuck at one or other point, if you want to use jquery then you can try jQGrid (you can find my article on this) but if you doesn't want to use this then create a click event for button using the jquery which will show the popup, you can either create it by creating script from code behind or by writing the script in html section. In this way bot code behind and script will get executed but you have to check which one is calling first. If you want to use complete jQuery then AJAX calls will help you to create a click event at code behind using Script. I hope one of these solutions will help you, if you face any problem then msg me once again.
Kanish Mishra11y ago
hey anubhav bro, I have a gridview where i want to show leave request of employee and in this gv i added button field to get the employee id of that request . and i have one jquery popup which will be call when i click on gridview button and that popup has two button(Accept and Reject). so when i click on that button its show popup but it will close after postback. so is there any option to solve this problem. Is this possible when i click on button it will get id and then when page is post back it will show popup message where i can accept or reject the leave request.
K P Singh Chundawat11y ago
good..