To get focus back after postback. ASP.Net MVC 2 Web application using multiple html forms
I am using ASP.NET MVC2 application in C#. I have two HTML forms on my content page.
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewData["Message"] %></h2>
<form id="form1">
<input id="text1" type="text" />
<input type="submit" value="submit" />
</form>
<form id="form2">
<input id=开发者_如何学Go"text2" type="text" />
<input type="submit" value="submit" />
</form>
</asp:Content>
What I want to do is to set the focus to Text Box after post back. After "form1" is submitted, "text1" should have focus and similarly after "form2" is submitted, "text2" should have the focus so that the user doesn't have to use mouse to put the focus back in text box and continue typing.
The following code works fine for a single HTML form on the page.
<html>
<head>
<script>
void function setfocus() {
document.getElementById("text1").focus();
}
</script>
</head>
<body onload="setfocus();">
<form method="post" action="">
<input type="submit" value="submit">
<input id="text1" type="text">
</form>
</body>
</html>
*The problem is I have two HTML forms on the page. Another issue is my web forms are on the content page of asp.net master page which reside inside the and only master form has tag which has "onload" property.
A friend of mine suggested me to use Ajax's ScriptManager and UpdatePannel. However, the UpdatePannel doesn't like HTML's elements inside it. It seems only support asp.net control elements.
Very grateful for your guidance.
Try this
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewData["Message"] %></h2>
<form id="form1">
<input id="text1" type="text" />
<input name="selectedTextBox" type="hidden" value="text1" />
<input type="submit" value="submit" />
</form>
<form id="form2">
<input id="text2" type="text" />
<input name="selectedTextBox" type="hidden" value="text2" />
<input type="submit" value="submit" />
</form>
<script>
var textBoxID = "<%: Context.Request.Form["selectedTextBox"] %>";
void function setfocus() {
var textBox = document.getElementById(textBoxID);
if(textBox) textBox.focus();
}
</script>
Edit: Prefix Context to Request object
You could append a hash to the action attribute of the first form:
<form id="form1" action="#form1">
<input id="text1" type="text" />
<input type="submit" value="submit" />
</form>
<form id="form2">
<input id="text2" type="text" />
<input type="submit" value="submit" />
</form>
and then test for the presence of this hash in the url:
function setfocus() {
if (document.location.hash.indexOf('#form1') > -1) {
// form1 was submitted => set focus to the second textbox
document.getElementById("text2").focus();
} else {
document.getElementById("text1").focus();
}
}
加载中,请稍侯......
精彩评论