How to prevent postback on asp button while displaying a popup using JQuery

Question

I have the following ItemTemplate in my GridView:

<ItemTemplate>
    <asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnClientClick="myfunction(); return false;" OnCommand="btnShow_Command" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' />
</ItemTemplate>

For the ItemTemplate I have a button which opens a popup window when clicked by using the following JQuery:

$(document).ready(function () {
    $(".btnSearch").click(function (e) {
        e.preventDefault();
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });
});

function myfunction() {
}

my Command code-behind:

protected void btnShow_Command(object sender, CommandEventArgs e)
        {
            int index = 0;

            if (e.CommandName == "ViewAll")
            {
                index = Convert.ToInt32(e.CommandArgument);

                DataTable cacheTable = HttpContext.Current.Cache["ResultsTable"] as DataTable;

                string column = cacheTable.Rows[index].Field<string>("Guideline");
                string test = BookingResults.Rows[index].Cells[7].Text;
                string html = HttpUtility.HtmlDecode(column);

                ResultsDiv.InnerHtml = html;
                //tbGL.Text = html;
                //upData.Update();
                //MessageBox.Show(index.ToString());
            }
        }

I added the OnClientClick="myfunction(); return false;" because it was doing a postback each time I clicked. If I have multiple rows, it only works the first time I click but any time after, the popup is not displayed when another or the same button is clicked.

How do I resolve it so no matter which button is clicked the popup is displayed without doing a postback?

Answer 1

Actually you have not showed up the implementation of your method myfunction() , in case the myfunction() method have any syntactical error then the OnClientClick event will be void and it will post-back/submit the form to the server.

Try to remove the call from OnClientClick and just implement your logic at jquery on click event by using class selector as follows

$(document).ready(function () {
        $(".btnSearch").click(function (e) {
            e.preventDefault();
            alert($(this).val() + " Clicked"); // you can put your method mymethod() here 
            // you can put youe popup logic here

            return false; 

        });
    });

You can also see this example of js fiddle

Answer 2

将其放在标记或<％：Html.BeginForm％>标记上

Answer 3

OnClientClick="return myfunction(); 

function myfunction(){
// you can put youe popup logic here 

    return false;

}

Using like this your button never do post back.