How to get click event in code behind in c# using jquery

Question

Hi Please check i want to get click event in code behind as i am using master page concept and i have one child form of it in this page i have ContentPlaceHolder, My button "btnSubmit" this is a linkbutton which is under GridView. i want loading image when i will click on btnSubmit button. please check and help.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        modal.addClass("modal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
    }, 200);
}
$('form').live("submit", function () {
    ShowProgress();
});

aspx page..

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
    <asp:BoundField DataField="Journal" HeaderText="Customer Id" />
    <asp:BoundField DataField="ISBN" HeaderText="Contact Name" />
    <asp:BoundField DataField="Status" HeaderText="City" />
    <asp:TemplateField HeaderText="Btn">
        <ItemTemplate>
            <asp:Button ID="btnSubmit" runat="server" Text="Load Customers"
OnClick="btnSubmit_Click"  />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>
<div class="loading" align="center">
Downloading Files. Please wait<br />
<br />
<img src="loader.gif" alt="" />
</div>
</asp:Content>

In cs Page.

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
        ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
    }       
}

Answer 1

try this way

Script AS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });
</script>

And Add event onrowdatabound in grid

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
 onrowdatabound="GridView1_RowDataBound">

And CS page

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.DataRow)
    {    
         Button btnSubmit = e.Row.FindControl("btnSubmit") as Button;
         btnSubmit.Attributes.Add("OnClick", "ShowProgress();");
    }
}

Answer 2

也使用按钮的OnClientClick事件在此事件中调用javascript函数，该函数将进度条的css更改为可见。

OnClientClick="ShowProgress();return true;"