Чтобы вернуть фокус после постбэка.Веб-приложение ASP.Net MVC 2, использующее несколько HTML-форм - PullRequest
Новая
       14

Чтобы вернуть фокус после постбэка.Веб-приложение ASP.Net MVC 2, использующее несколько HTML-форм

0 голосов
/ 01 января 2011

Я использую приложение ASP.NET MVC2 в C #. У меня есть две HTML-формы на моей странице контента. 

<%@ 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="text2" type="text" />
<input type="submit" value="submit" />
</form>
</asp:Content>

Что я хочу сделать, это установить фокус на Text Box после отправки назад. После отправки «form1» у «text1» должен быть фокус, и аналогично, после «form2», у «text2» должен быть фокус, чтобы пользователю не приходилось использовать мышь, чтобы вернуть фокус в текстовое поле и продолжить типирование.

Следующий код отлично работает для одной HTML-формы на странице. 

<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>

* Проблема в том, что у меня есть две HTML-формы на странице. Другая проблема заключается в том, что мои веб-формы находятся на странице содержимого главной страницы asp.net, которая находится внутри единственной главной формы и имеет тег, который имеет свойство «onload».

Мой друг предложил мне использовать ScriptManager и UpdatePannel в Ajax. Однако UpdatePannel не нравится элементы HTML внутри него. Кажется, поддерживаются только элементы управления asp.net.

Очень благодарен за ваше руководство.

Ответы [ 2 ]

1 голос
/ 01 января 2011

Попробуйте это 

<%@ 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>

Изменить: Префикс контекста для объекта запроса

0 голосов
/ 01 января 2011

Вы можете добавить хеш к атрибуту action первой формы: 

<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>

, а затем проверить наличие этого хеша в 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();
    }
}
...