Introduction:
In this tutorial, we'll explore the power of jQuery in enhancing the interactivity of your ASP.NET web pages. Specifically, we'll focus on hiding a div tag dynamically when an ASP.NET button is clicked. Before diving into this tutorial, it's recommended to go through my previous articles on jQuery, covering topics like validating textbox values and comparing passwords.
Method 1: Quick and Simple
HTML Markup: Create Button and Div in ASP.NET Page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryExample1.aspx.cs" Inherits="JQUERY_TUTORIALS_JQueryExample1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
Add JQUERY CODE HERE
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Hide" />
<div id="divhide" style="background:#000000; width:350px; height:350px;">
</div>
</form>
</body>
</html>
JQuery : Button Click
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
$('#divhide').hide();
return false;
});
});
</script>
Simply copy and paste this jQuery code into your ASP.NET page, and you're ready to run your application. Clicking the button will dynamically hide the specified div.
Method 2: Adding a Smooth Transition
For a more refined user experience, let's add a smooth transition effect when hiding the div.
Updated HTML Markup:
<div id="divhide" style="background:#000000; width:350px; height:350px; display:none; ">
Updated jQuery Code:
<script type="text/javascript">
$(document).ready(function () {
$('#divhide').show();
$('#Button1').click(function () {
$('#divhide').hide();
return false;
});
});
</script>
//Below javscript code is another way to implement.
<script type="text/javascript">
$(document).ready(function () {
$('#divhide').show(1000);
$('#Button1').click(function () {
$('#divhide').hide(1000);
return false;
});
});
</script>
By setting the initial display of the div to none and adding the show and hide functions with a transition duration, we create a more visually appealing hide effect.
Conclusion:
Congratulations! You've successfully implemented jQuery to hide a div on an ASP.NET button click. These techniques not only enhance the user experience but also demonstrate the simplicity and effectiveness of jQuery in web development. Experiment with these methods and integrate them into your projects to create more interactive and engaging web applications.
0 Comments