After an AJAX partial postback you may need to return to the top of your ASPX page to display an error message, etc. Here is one way that I have done it. You can add the JavaScript function below to your ASPX page and then call the method when needed in your code-behind by using the ScriptManager.RegisterClientScriptBlock method.
ASP.NET C# Code-behind:
ScriptManager.RegisterClientScriptBlock(this, Page.GetType(),
"ToTheTop", "ToTopOfPage();", true);
JavaScript:
<script type="text/javascript">
function ToTopOfPage(sender, args) {
setTimeout("window.scrollTo(0, 0)", 0);
}
</script>
You can also just JavaScript to scroll to the top of the page by using the OnClientClick property of your button. But this will cause this behavior to occur every time the button is clicked and not just when you want it to happen. For example:
<asp:Button id="bntTest" runat="server"
Text="Test" OnClick="btn_Test"
OnClientClick="javascript:window.scrollTo(0,0);" />
Following is an easy way to hide the modal popup dialog extender from the AJAX control toolkit using JavaScript. The key is to set a BehaviorID on the ModalPopupExtender. Then you can use this ID to call the hide() method via Javascript like this:
function HideModal() {
$find('modalPopupBehavior').hide();
}
In the full example below I am closing the modal popup dialog box when the user clicks on a link.
Full ASPX example:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtk" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>My Page</title>
<link href="css/Test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="aspNetForm" runat="server">
<asp:ScriptManager ID="scriptMan" runat="server" />
<script type="text/javascript" language="javascript">
function HideModal() {
$find('modalPopupBehavior').hide();
}
</script>
<asp:UpdatePanel ID="upnlMain" runat="server">
<ContentTemplate>
<div>
<ajaxtk:ModalPopupExtender ID="modalPopup" runat="server"
BehaviorID="modalPopupBehavior"
TargetControlID="btnPopup" PopupControlID="pnlPopup">
</ajaxtk:ModalPopupExtender>
<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup"
style="width: 715px; display: none;">
<div>
<p>
<a href="http://www.jonathanjungman.com/blog/"
target="_blank" onclick="HideModal()">Hide Modal</a>
</p>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
So I was working on a project where I needed to have some checkboxes in a GridView. When checked they needed to update the underlying business object. My first idea was the just wrap the whole thing in an UpdatePanel, but that would of course require a partial postback with the full contents of the grid being posted back to the server. The better solution is to call a web service method to do the update.
First, add a new Web Service class to your project. You need to add the [ScriptService] attribute to this class. This attribute is from the System.Web.Script.Services namespace. Then create your WebMethod, including whatever parameters you will need to pass in.
[WebMethod]
public void UpdateFlag(int id, bool isChecked)
{
// Logic to update business object
}
Next you need to add a ServiceReference that points to the web service you just created. You can add this to your ScriptManager instance. In my scenario the ScriptManager was in the Master page and I just wanted to include the ServiceReference in this one ASPX page. Here you can use the ScripManagerProxy object like so (assuming the WebService file is in the same directory as the ASPX file):
<asp:ScriptManagerProxy ID="scriptManProxy" runat="server">
<Services>
<asp:ServiceReference Path="MyWebService.asmx" />
</Services>
</asp:ScriptManagerProxy>
Then add the following code to your GridView's RowDataBound event. This will set the onclick events for the individual checkboxes you are binding to the GridView.
if (e.Row.RowType == DataControlRowType.DataRow)
{
BusinessObject obj = (BusinessObject)e.Row.DataItem;
CheckBox myCB = (CheckBox)e.Row.FindControl("myCB");
string eventText = string.Format("myCB_Checked({0}, this);", obj.SomeID);
myCB.Attributes["onclick"] = eventText;
}
Now you need to actually write the JavaScript method that will call your web service. Here it is:
<script type="text/javascript">
function myCB_Checked(id, ctrl) {
var isChecked = ctrl.checked;
Namespace.MyWebService.UpdateFlag(id, isChecked);
}
</script>
Make sure that you use the fully qualified name of your class here.
OK, this solution was put together Frankenstein style from multiple sources. Basically I wanted to only allow the user to use the Enter key in specific circumstances. If they were typing their query in the search box, for example. This solution uses a combination of JavaScript and the ASP.NET Panel control. The following JavaScript is placed in the MasterPage:
<script type="text/javascript">
var allowEnterKey = false;
window.document.onkeydown = CheckEnter;
function CheckEnter()
{
var keyID = (window.event) ? event.keyCode : e.keyCode;
if (!allowEnterKey && keyID == 13)
return false;
else
return true;
}
</script>
Then my search box (or whatever) can be wrapped in a Panel control like so:
<asp:Panel ID="pnlSearch" runat="server" DefaultButton="btnSearch">
<div id="SearchDiv">
<asp:TextBox ID="txtSearch" runat="server" Columns="60"
onfocus="allowEnterKey=true" onblur="allowEnterKey=false" />
<asp:Button ID="btnSearch" runat="server" Text="Search"
onclick="btnSearch_Click" onfocus="allowEnterKey=true" onblur="allowEnterKey=false" />
</div>
</asp:Panel>
Notice the DefaultButton property set on the Panel as well as the onfocus and oblur properties of the TextBox.