Tuesday, November 26, 2013

Labels: ,

How to call jquery function from code behind in asp.net with C#

Posted by Abhay Makadiya at 11/26/2013
There many situations where you want to call jquery functions from code behind. Here is the example where i want one notification box with sliding up and sliding down effect which can be call from code behind when some notification message is required.
we all knows that the we can call jquery function if we have id and event of any element or tag. this example is useful when you cant define the controls on which you want to call a jquery function.

Here I had used one div "notificationpan" which has simple label to display Notification message which can be set from code behind and one image to close notification box, i has created one notification style class to display it on top of the form and which is always visible otherwise you can set it's position as per your choice. when i call scriptmanager from code behind with my script in which i had called slideDown(interval) with proper message which you have provided in label, and when you click close image it will call slideUp(interval) function which i had set in aspx page.
Here is the screenshot of this notification box.

Code in Aspx page:-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .notificationpan {
           display:none;
            width: 100%;
            background-color: rgb(0, 148, 255);
            position: absolute;
            top:0px;
            padding: 17px;
        }
        .closenotificationpan {
         
           padding-left:100px;
        }

    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
            <div id="pan" class="notificationpan">
                <div style="float: left">
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </div>
                <img src="close.png" onclick="$(function () { $('.notificationpan').show().slideUp(1000);});" class="closenotificationpan" />

            </div>
        </div>
    </form>
</body>
</html>
 


Code Behind in C#:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            string scrpt;
            if (TextBox1.Text != string.Empty)
            {
                Label1.Text = "Hello....................."+TextBox1.Text;
                scrpt = "<script>$(function () { $('.notificationpan').hide().slideDown(1000);});</script>";
                ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", scrpt, false);
            }
            else
            {
                Label1.Text = "Please Enter Some Text isn Textbox." + TextBox1.Text;
                scrpt = "<script>$(function () { $('.notificationpan').hide().slideDown(1000);});</script>";
                ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", scrpt, false);
            }
        }
    }
}

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )