How to call a code-behind event/method when user hits enter on a text box and avoid double postback

You can use the onkeypress client-side event, then call __doPostCallBack passing the control’s name as argument for eventTarget and return false. It’s important for the method to return false to avoid post backing twice on Internet Explorer.

<%@ Page Title="Home Page" Language="C#" %>

<script runat="server">
    protected void btnGo_Click(object sender, EventArgs e)
    {
        lblKeyword.Text = txtSearch.Text;
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="Script.js" type="text/javascript"></script>
</head>
<body>
    <form id="frmTest" runat="server">
    <div class="page">
    <div class="main">
        <h2>Welcome to ASP.NET!</h2>

        <p />
        <asp:TextBox ID="txtSearch" style="width:178px;" runat="server"
           onkeypress="return checkEnter(event, this, function(v) { return thisSearch(v); });" />

        <asp:Button ID="btnGo" runat="server" Text="Go" onclick="btnGo_Click" />

        <p>Keyword:
        <asp:Label ID="lblKeyword" style="width:178px;" runat="server" />
        </p>

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

The Script.js file:

var theForm = document.forms[0]; //change the pointer to the form here

if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}; //same doPostBack method created by ASP.NET


//our method to check when user hit <Enter>
function checkEnter(e, element, onEnterFunction) {
    var characterCode;

    if (e && e.which) {
        e = e;
        characterCode = e.which;
    }
    else {
        e = event;
        characterCode = e.keyCode;
    }

    if (characterCode == 13) {
        return onEnterFunction(element.value);
    }
    else {
        return true;
    }
};

//call our function. In this example, Keyword argument is not necessary, it is here for illustration purposes
function thisSearch(keyword) {

    __doPostBack("btnGo"); // better to use "<%= bntGo.UniqueID %>" instead

    return false; //import to avoid double postbacks in internet explorer
};

You can also pass values to the eventArgument of __doPostBack via client-side and receive with the EventArgs on server-side. Check the MSDN to learn more.

For how to do a post-back when user hits enter on a text box, go to this post.

For how to call client-side function when user hits enter on a text box, go to this post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s