Monthly Archives: November 2014

[RESOLVED]how to design asp.net web application where users can view and posts some kind of messages

how to design asp.net web application where users can view and posts some kind of messages…would like to use jquery features on some events…Please anyone who can direct me to a page where I can refer to…I’m building web application where users can
send asserts to suppliers for repairs and I would like them to interact through post and with the IT department.

Hi tonyR6,

Thanks for your post.

tonyR6

how to design asp.net web application where users can view and posts some kind of messages

According to your description, you could refer to the following link to create an application to post and view message.

Besides, if you’d like to create a real-time chat application, you could use ASP.NET SignalR. You could refer to the following link to learn about ASP.NET SignalR.

Hope it will be helpful to you.

Best Regards,

Fei Han

@ fi-han sorry for taking longer had network problems…thanx for helping it looks quite challenging though

pure Jquery and ajax cascading dropdown lists

Hi,

I’m trying to create 2 dropdown lists name: states and cities, states dropdown list gets its data from database and when a state is selected the other dropdown list shows the related cities of that state, it’s pretty simple, but I don’t want to use ajax
controls like ajax scriptmanager and updatepanel, I want to write it in jquery inside my aspx page.

Please help me on this.

Thanks in advance :) 

Hi,

First Load all jquery library

then use the below code

$.ajax({
        type: "POST",
        url: "/Global/GetState/",
        contentType: "application/json",              
        dataType: "json",
        success: function (state) {
        $("#stateDropdown").empty();
        $.each(state, function () {
            $("#stateDropdown").append($("<option>                                                      
               </option>").val(this['StateId']).html(this['StateName']));
        });
     }
  });


$( "#CityDropdown").change(function() {
  $.ajax({
        type: "POST",
        url: "/Global/GetCity/",
        data:{StateId: $( "#StateDropdown").val()},
        contentType: "application/json",              
        dataType: "json",
        success: function (city) {
        $("#CityDropdown").empty();
        $.each(city, function () {
            $("#CityDropdown").append($("<option>                                                      
               </option>").val(this['cityID']).html(this['CityName']));
        });
     }
  });
});

 

[RESOLVED]jquery on user control not working

Hi,

I am trying to use datetimepicker in a user control with jquery. The code is as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="testPage.ascx.cs" Inherits="MyPro.testPage" %>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>


<script type="text/javascript">
    jQuery(document).ready(function () {
     

        jQuery('.timepicker').timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });

    });
</script>

       <asp:TextBox ID="txtStartTimeForDate1" runat="server" CssClass="timepicker" /> 


When i use the same block in regular html page, it works perfect but when I try to use the same thing in my user control ascx page, it doesn’t do anything. But the interesting thing is if i use the jquery from the website link where i downloaded, it works
in ascx page. Can anyone please tell me why is that and how to make it work on my user control without using the jquery directly from the website?

I also tried using following block in the scripts section:

<script type="text/javascript">
    jQuery(document).ready(function () {
     

        jQuery("#<%=txtStartTimeForDate1.ClientID%>").timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });

    });
</script>

But nothing happens in user control. :(

The code looks as if it would work properly.

Are you sure that all of your jQuery references (scripts) are being loaded properly and are being targeted at the proper locations? You can generally check this by using the Developer Tools (F12) within your browser and checking the Console.

You might also try using the ‘$’ syntax, which is a bit more common although I doubt it will make any difference as it is probably an issue with a file being improperly referenced :

<script type="text/javascript">
    $(function () {
        $('.timepicker').timepicker({ hourGrid: 10, minuteGrid: 10, timeFormat: 'hh:mm tt'});
    });
</script>

Using a class is going to be the easiest way to target elements like these within ASP.NET as opposed to IDs which will generally require the use of the ClientID property to access the appropriate ID.

Yes i have used "$" sign before but nothing happened. If i use the same thing in html page which is also in the same project solution, it works but it doesn’t work in ascx page. :(

Have you tried including the jQuery code within your User Control? It’s likely that it may not simply be wiring up your picker to the element in the user control at the right time. Could you consider posting a very basic example of your markup? It might
make it a bit easier to troubleshoot.

Here is the overall code in the user control that I have been trying.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="testPage.ascx.cs" Inherits="MyPro.testPage" %>

<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<link rel="stylesheet" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function () {   
        jQuery("#<%=txtStartTimeForDate1.ClientID%>").timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });
    });
</script>
       <asp:TextBox ID="txtStartTimeForDate1" runat="server" CssClass="timepicker" /> 

Like as I said, in the script section, I tried using ".timepicker" instead of "#<%=txtStartTimeForDate1.ClientID%>" and "$" instead of JQuery. But nothing happens. But in html, the same thing works. The code in my html is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>


<link rel="stylesheet" media="all" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript">
    $(function () {
        $('#txtStartTimeForDate1').timepicker({
            hourGrid: 10,
            minuteGrid: 10,
            timeFormat: 'hh:mm tt'
        });
    });
</script>
<input type="text" name="txtStartTimeForDate1" id="txtStartTimeForDate1" value="" />
</html>

I don’t know why is this happening.

Have you tried using the Developer Tools (F12) within your browser and checking the Console to see if any errors are present? It might help point you in the right direction as to what might possibly be going wrong.

You could also consider throwing an alert within your jQuery code to actually ensure that it is being hit.

I did put the breakpoints and tried that way but didn’t give any errors..

And the Console area of the Developer Tools didn’t indicate any errors either?

I didn’t see anything when i tried in console in the browser as well. I am not used to with checking with console area of the Developer Tools though. So I might be doing wrong. Since I have that text box and when i put or click the textbox, it should pop
up the time picker which is not happening. So I am not sure how to check it in console.

Your code seems to be absolutely fine. To resolve the problem, you should check exact error that causing the issue in opening timepicker.

In Firefox,You can check it using firebug addon.

In chrome, You can check it using directly pressing ctrl+shift+j key combination.

SuchiSayami

I didn’t see anything when i tried in console in the browser as well. I am not used to with checking with console area of the Developer Tools though. So I might be doing wrong. Since I have that text box and when i put or click the textbox, it should pop up
the time picker which is not happening. So I am not sure how to check it in console.

It will vary slightly depending on the browser that you are using.

Generally, you’ll just need to press F12 within your browser to launch either a Developer Tools section or a new window with your Developers Tools in them. Within this area, you should see a tab that says "Console" and will need to click it to display the
results of the Console. After this area is present, simply refresh your page and see if any errors are present within there.

If opening timepicker had problem, it won’t even show when i tried it in hmtl, will it? The same code when i tried in html page is working great. Just in the ascx page, it didn’t do anything. But again, if i give website path for the same jquery file, it
works in ascx page.

Now I can see the error. It gave some syntax error. But the same jquery was working for html page. And also if i use the website path, the same jquery doesn’t give any errors. Strange.

Problem solved… I registered the jquery script in the code behind and no more errors.

[RESOLVED]JQuery Autocomplete Message

Hello everyone and thanks for your help in advance.  I am creating a search function with the Autocomplete widget.  This is probably a very stupid question, but each time data is returned, the message"

XX results are available, use up and down arrow keys to navigate

The code I am using is:

    <script type="text/javascript" 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>
    <script type="text/javascript">
        //
        // based on http://techbrij.com/jquery-ui-autocomplete-asp-net-web-api
        //
        var searchUrl = "PatientSearch.aspx?LastName=";
           $(function () {
        
               $('#txtPatientLastName').autocomplete({
        
                   source: function (request, response) {
                       //alert(request.term);
                       $.ajax({
                           
                           url:  searchUrl + request.term,
                           type: 'GET',
                           cache: false,
                           data: request,
                           dataType: 'json',
                           success: function (json) {
                               response($.map(json, function (item) {
                                   return { value: item.value, id: item.label }
                               }))                          

                           },
                           error: function (XMLHttpRequest, textStatus, errorThrown) {
                               //alert('error - ' + textStatus);
                               console.log('error', textStatus, errorThrown);
                           }
                       });
                   },
                   minLength: 2,
                   select: function (event, ui) {
                       var info = ui.item.value;
                       var lfi = info.split('|');
                       $("#txtPatientLastName").val($.trim(lfi[0]));
                       $("#txtPatientFirstName").val($.trim(lfi[1]));
                       $("#txtPatientDOB").val($.trim(lfi[2]));
                       $("#txtPatientID").val($.trim(lfi[3]));
                       return false;
                   }
               })
           });
  </script>

I really can’t figure out where this message is coming from or how to get rid of it.  Any help on this stupid question would be appreciated.

OK, so it’s obviously hidden with the style sheet.  Couldn’t find it in the documentation, but now I know.

Hi kmcnet,

kmcnet

so it’s obviously hidden with the style sheet.  Couldn’t find it in the documentation

Yes, as you said it is hidden.

Best Regards,

Sw-ing

Issue regarding resizing div with jquery animate function

i wrote a toggle effect like function. when user click button then my div will come out from bottom-right corner to center of the page and the same way when user click again on the button then div will goes back to bottom-right corner from the center of
the page.

the problem is div is appearing the way i want but not resizing the way i want. please see my script and guide me what i am missing.

here is my js fiddle link http://jsfiddle.net/tridip/6o1wv3yt/

$(document).ready(function () {
        var flag = false;

        $("#Button1").click(function () {
            if ($("#UPSContainer").exists() == false) {
                $('form').append('<div id="UPSContainer" class="hidden" style="background:red;display:none;position:absolute;height=0px;width=0px;"></div>');
            }

            if ($("#UPSContainer").hasClass("hidden")) {

                $("#UPSContainer").css({ display: 'block' });

                var xleft = ($(window).width() - $("#UPSContainer").width());
                var xtop = ($(window).height() - $("#UPSContainer").height());

                $("#UPSContainer").css({ left: xleft, top: xtop, opacity: 0 });

                $("#UPSContainer").stop(true).animate({
                    'left': (($(window).width() - $("#UPSContainer").width()) / 2) + 'px',
                    'top': (($(window).height() - $("#UPSContainer").height()) / 2) + 'px',
                    'height': 350 + 'px',
                    'width': 500 + 'px',
                    'marginLeft': '-250px',
                    'marginTop': '-175px',
                    'opacity': '1'
                }, { duration: 1000, queue: false, easing: 'easeOutQuart',

                    step: function (now, tween) {
                        if (tween.prop === 'width') {
                            if (now >= 50) {
                                //console.log('Width reached 50%');
                                if (!flag) {
                                    flag = true;
                                    $("body").append('Width reached 50%' + now);
                                }
                            }
                        }
                    },
                    complete: function () {
                        $("#UPSContainer").removeClass("hidden").addClass("Shown");
                    }
                });
            }
            else if ($("#UPSContainer").hasClass("Shown")) {

                var xleft = $(window).width();
                var xtop = $(window).height();

                $("#UPSContainer").stop(true).animate({
                    'left': $(window).width() + 'px',
                    'top':  $(window).height() + 'px',
                    'height': 0 + 'px',
                    'width': 0 + 'px',
                    'opacity': '0'
                }, { duration: 1000, queue: false, easing: 'easeOutQuart',

                    step: function (now, tween) {
                        if (tween.prop === 'width') {
                            if (now >= 50) {
                                //console.log('Width reached 50%');
                                if (!flag) {
                                    flag = true;
                                    $("body").append('Width reached 50%' + now);
                                }
                            }
                        }
                    },
                    complete: function () {
                        $("#UPSContainer").removeClass("Shown").addClass("hidden");
                    }
                });

            }

            return false;
        });


        jQuery.fn.exists = function () { return this.length > 0; }
    });

thanks

Hi mou_inn,

For your issue, I have test it in the link which you provide.

When I click the button, the div will come out from the bottom-right to the center,when I click the button again,it will go back to the bottom right.

If you don’t mind, please explain what your issue is.

Best Regards,

Kevin Shen.

link the result of autocompleted search to details page

Hi

I used autocompleted search in my product website .

It dose correct.

But I do not know how can I link the result items to products details page.

My cod:

<script>
    $(function () {
        $('#tags').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: $('#tags').data("url"),
                    type: "GET",
                    dataType: "json",
                    contentType: 'application/json, charset=utf-8',
                    data: {
                        search: $("#tags").val()
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Name,
                                value: item.value
                            };
                        }));
                    },
                    error: function (xhr, status, error) {
                        alert(error);
                    }
                });
            },
            minLength: 2
        });
    });
</script>
<div id="search1" class="search pull-left">
                    <input id="tags" data-url="@Url.Action("AutoComplete","Home")" type="text" name="search" autocomplete="off" placeholder="search ..." value="" class="input-search form-control ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria-haspopup="true">
                    <span class="button-search fa fa-search"></span>
                </div>
public JsonResult Autocomplete(string search)
       {
            var db = new ApplicationDbContext();
            var filteredItems = db.Product.Where(item => item.Name.Contains(search) ||
                                               item.Summary.Contains(search)).ToList();
            var viewModel = filteredItems.Select(x => new
            {
                value = x.Name,
                label = x.Id
            });

            return Json(viewModel, JsonRequestBehavior.AllowGet);
        }

Hi Neda99,

From your code and description, I suppose your application is a MVC application. If that is the case, I suggest you use Html.BeginForm. Like this.

        @using (Html.BeginForm("ShowDetails","MyTest"))
        {
            <p>
                Title: @Html.TextBox("SearchString")
                <input type="submit" value="Filter" />
            </p>
        }

Then, you could using jquery autocompleted for the TextBox as below.

       $(function () {
            $("#SearchString").autocomplete({
                source: availableTags
                //....
            });
        });

If you want to add some properties for TextBox. You could refer to the following code.

        $(function () {
            $("#SearchString").attr("placeholder", "search ...");
        });

Here is an article, you could refer to it.

http://www.asp.net/mvc/overview/getting-started/introduction/adding-search 

Best Regards,
Dillion

thanks

but I don’t want this with submit button

yes . i use mvc5

I like the HTML output :

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 112px; left: 492px; display: block; width: 298px;">
<li class="ui-menu-item" role="menuitem"><a href="link of item1== /products/Details?id=id item1" class="ui-corner-all" tabindex="-1">item1</a></li>
<li class="ui-menu-item" role="menuitem"><a href="link of item2== /products/Details?id=id item2" class="ui-corner-all" tabindex="-1">item2</a></li>
<li class="ui-menu-item" role="menuitem"><a href="link of item3 == /products/Details?id=id item3" class="ui-corner-all" tabindex="-1">item3</a></li>
</ul>

Hi Neda99,

If that is the case, Please try to use button control and use the window.location() function. Like this.

            $("#btnSubmit").click(function () {
                var tags = $("#tags").val();
                //alert(tags);
                window.location("http://localhost:42162/MyTest/ShowDetails/" + tags);
            });
<input id="btnSubmit" type="button" value="Submit" />

Best Regards,
Dillion

[RESOLVED]Need to understand a portion of jquery code?

here i am posting a jquery code which is working and few area is not clear to me . js fiddle link
http://jsfiddle.net/p4e4psg4/5/

full code

HTML
--------
<form method="post" action="WebForm1.aspx" id="ctl00">
    <input type="submit" name="Button1" value="Fly DIV" id="Button1" class="toggleUPSContainer" />
</form> 

CSS
----
#UPSContainer{
    position: absolute;
    display: none;
    background:red;
    height:0;
    width:0;
}


javascript
--------------
$(document).ready(function () {
    var $els = [];
    var data = {
        "UPSContainer": {
            "height" : 100,
            "width" : 100
        },
        "isAnimating" : false
    };
    $els.window = $(window);
    $els.form = $('#ctl00');
    $els.toggleUPSButtons = $('.toggleUPSContainer');
    
    function addUPSOverlay(){
        $els.form.append('<div id="UPSContainer"></div>');
        $els.UPSContainer = $('#UPSContainer');
    }
    
    function getNewWindowCorner(){
        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());
        if($els.UPSContainer.is(':hidden')){
            $els.UPSContainer.css({
                top: data.windowHeight + 'px',
                left: data.windowWidth + 'px'
            });
        }else{
            $els.UPSContainer.css({
                left: ((data.windowWidth - data.UPSContainer.width) / 2) + 'px',
                top: ((data.windowHeight - data.UPSContainer.height) / 2) + 'px'
            });
        }
    }
    
    function containerOpenComplete(){
        // do what you want here when opening complete
    }
    
    function containerCloseComplete(){
        // do what you want here when closing complete
    }
    
    function toggleUPSOverlay(e){
        e.preventDefault();
        if(!data.isAnimating){
            if($els.UPSContainer.is(':hidden')){ // currently closed so open
                $els.UPSContainer.show();
                $els.UPSContainer.animate({
                        left: ((data.windowWidth - data.UPSContainer.width) / 2) + 'px',
                        top: ((data.windowHeight - data.UPSContainer.height) / 2) + 'px',
                        height: data.UPSContainer.height + 'px', 
                        width: data.UPSContainer.width + 'px'
                }, 200, function(){
                    containerOpenComplete();
                });
            }else{ // currently open so close
                $els.UPSContainer.animate({
                        left: data.windowWidth + 'px',
                        top: data.windowHeight + 'px',
                        height: 0 + 'px', 
                        width: 0 + 'px'
                    }, 200,
                    function () {
                        $els.UPSContainer.hide();
                        containerCloseComplete();
                    });
            }
        }
    }
    
    function attachEvents(){
        $els.window.on('resize', getNewWindowCorner);
        $els.toggleUPSButtons.on('click', toggleUPSOverlay);
    }
    
    function initialize(){
        addUPSOverlay();
        getNewWindowCorner();
        attachEvents();
    }
    
    initialize();
});
   


this function’s code is not clear

function getNewWindowCorner(){
        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());
    }

just see windowWidth & windowHeight potion

var data = {
        "UPSContainer": {
            "height" : 100,
            "width" : 100
        },
        "isAnimating" : false
    };

data has been declared as object and it has property like height, width & isAnimating etc but how we can add two new property called
windowWidth & windowHeight to data object ??

just seeing the below code it seems that we can add any property to any object with any name at runtime in javascript and here we are storing value to
windowWidth & windowHeight property.

        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());

so just see my whole code and tell me from where these two property comes
windowWidth & windowHeight
? thanks

mou_inn

so just see my whole code and tell me from where these two property comes
windowWidth & windowHeight
? thanks

If you notice in the beginning of your function declaration, you have an anonymous object called data which stores a few properties :

var data = { "UPSContainer": { "height" : 100, "width" : 100 }, "isAnimating" : false };

One of the benefits of an object like this is that you don’t necessarily need to define all of your properties when you initialize it. You can easily add other properties (like windowHeight or windowWidth) by simply setting them. This is done when
your getNewWindowCorner() method is called :

data.windowWidth = parseInt($els.window.width());
data.windowHeight = parseInt($els.window.height());

What the line above is doing is storing the height and width of the current window within your data object (so it can be accessed via data.windowHeight and data.windowWidth respectively).

If the part that you are confused on is the actual $els declaration, I’ll elaborate a bit more on that. $els is also defined at the beginning of your page and is simply an array :

var $els = [];

However, much like our data object, you can associate values to it as well. In this case, the current window is associated with it using the following call :

$els.window = $(window);

Since this is done at the beginning, when you call the line in question :

data.windowWidth = parseInt($els.window.width());
data.windowHeight = parseInt($els.window.height());

All this is doing is storing the dimensions of your current window in your data object. It could easily be rewritten as :

data.windowWidth = $(window).width();
data.windowHeight = $(window).height();

thanks for reply.

Need bit more help. what it is called in js

var $els = [];

? is it array or object? what is the difference between var

$els = []; and var els = {};

? if this is array

var $els = [];

then how one can push anything into array like this way

$els.window = $(window); or $els.body = $('body');

. please help me understand the usage with small sample. thanks

mou_inn

Need bit more help. what it is called in js

var $els = [];

Technically that is declared as an array, but since Javascript essentially treats everything as an object, it allows you to set any type of arbitrary properties on it (much like you would using the other "var x = { … }" syntax).

mou_inn

$els = []; and var els = {};

? if this is array

While these both essentially declare the same thing (as mentioned earlier "[]" and "{}" both are essentially objects / functions), the difference here comes down to scope. When you use the var keyword, you are scoping the variable to it’s current
scope (e.g. if it is used within a function, it will only exist within that function). However, if you don’t use var, your variable will be considered global :

// Global object
$els = [];

// Scoped object
var els = {};

You can
read more about this here
.

mou_inn

then how one can push anything into array like this way

$els.window = $(window); or $els.body = $('body');

. please help me understand the usage with small sample. thanks

It’s just part of how Javascript works and sadly it can often be abused. Generally, if you are planning on using this same type of syntax, you should create a proper object and not an array.

How we will use JWT to send the authentication token with angularJS.

Hi team,

How JWT will be implemented to send the authentication token with angularJS.

Thanks,

Neha

Microsoft has a library called the JwtSecurityTokenHandler to produce JWTs:

https://www.nuget.org/packages/System.IdentityModel.Tokens.Jwt/

The hard part is securely exchanging them to the app and this is where OpenID Connect comes in:

http://openid.net/connect/

I have downloaded the library. After  that What step I have to do or what code i have to write?

Please help me

Hi nehaagrawal,

For your issue is related with angularJS which is out of our support scope ,I suggest that you can post it their forum for a professional solution:

https://groups.google.com/forum/#!forum/angular

Best Regards,

Kevin Shen.

[RESOLVED]jQuery binding function to Gridview Select

Hi,

I have a gridview with Select LinkButton, static ID.

I try to add onclick method to the LinkButton (actually an a tag) with the following code:

$(function () {
            $("#LinkButton1").click(function (e) { doSomething(); });
        }
);

Unfortunately the the onclick event is not added to the Linkbutton,

ant idea why ?


$("#LinkButton1").click(function(){
  //doSomething();
});

Ashim’s solution will resolve your click event not executing issue.How ever you may face one more issue here since you have made the clientid mode static the javascript function will work only for the first button.
To Resolve it you need to remove the clientID mode property from linkbutton and use the Jquery’s class selector to access the control from gridview in jquery code

Sample Code
Assign a css class to your link button like given below

<asp:TemplateField HeaderText="Department_Name">
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButton1" runat="server" class="lnkbutton">LinkButton</asp:LinkButton>
                </ItemTemplate>
            </asp:TemplateField>

Jquery

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

        $(document).ready(function () {
            //Attach click event handler to your linkbutton using the css selector
            $(".lnkbutton").click(function () {
                doSomething();
            });
        });

        function doSomething() {
            alert('linkbuttonclick');
        }
    </script>

and then use the below code