Prevent Image button from doing PostBack

Question

I am working on asp.net website and I have Imagebutton that call c# function on click event. I want to prevent this image button from creating a postBack.

I have tried adding

OnClientClick="return false;" and UseSubmitBehavior="false"

but it didn't work for me.

Do you have a solution?

I tried to call the server function through client side function as the following, but it seems there is something wrong with my code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>


<script  type="text/javascript">
            $('#excelImageButton').click(function funcall() {

        $.ajax(
            {

                type: "POST",
                url: "BerthOccupancyForm.aspx/GridToExcel",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

            });

        return false;
    });

</script>

enter image description here

This is code behind:

[WebMethod()]   
public static void GridToExcel(GridView berthGridView, GridView recap)
{
    if (berthGridView.Rows.Count > 0)
    {
        HttpContext.Current.Response.Clear();
        HttpContext.Current.Response.AddHeader("content-disposition", "attachment; filename=BerthOccupancy.xls");
        HttpContext.Current.Response.ContentType = "text/csv";
        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
        berthGridView.RenderControl(htw);

        if (RT == "Year To Date")
        {
            foreach (GridView gv in Code)
            {
                gv.RenderControl(htw);
            }
        }
        else
        {
            recap.RenderControl(htw);

        }

        HttpContext.Current.Response.Write(sw.ToString());
        HttpContext.Current.Response.End();
    }
}

Thanks

Answer 1

first of all,you cant pass gridview to webmethod .

if you seriously want to export the grid to excel use client side library to generate excel from table markup or do a partial postback and generate excel and write to response.

see this plunker to export to excel in javascript.

Answer 2

Thank you guys for your suggestions. I was able to solve it this way.

I have added a static class that has static List and static string. And i call this Class in the WebForm. This way keep the data of GridViews during the PostBack

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.UI.WebControls;
/// <summary>
/// Summary description for Global
/// </summary>
public static class Global
{

    public static List<GridView> GridViewList = new List<GridView>();
    public static string ReportType = "";
}

The following C# Function exports to excel using the data from the static Class.

public  void GridToExcel()
{
    if (berthOccupancyDataGridView.Rows.Count > 0)
    {
        Response.Clear();
        //HttpContext.Current.Response.Buffer = true;
        Response.AddHeader("content-disposition", "attachment; filename=BerthOccupancy.xls");
        //HttpContext.Current.Response.Charset = "";
        Response.ContentType = "text/csv";

        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
        berthOccupancyDataGridView.RenderControl(htw);

        if (Global.ReportType == "Year To Date")
        {
            foreach (GridView gv in Global.GridViewList)
            {
                gv.RenderControl(htw);
            }
        }
        else if(Global.ReportType == "Monthly")
        {
            recapGridView.RenderControl(htw);

        }

        Response.Write(sw.ToString());
        Response.End();
    }
}