0

在我的第一个 MVC 4 应用程序上工作,但我的登录屏幕有问题。它是针对在生产车间拥有普通 PC 的公司的 Intranet 应用程序,因此他们需要能够单独登录该应用程序。(该网站也在 jQuery mobile 中,并且有一个 Javascript 触摸键盘,但我认为他们不需要参与这个问题)

问题是,如果有人无法登录,设置它的 Javascript 代码使得在用户名字段中输入按键将焦点发送到密码字段将停止工作。

我有一个可行的技巧(使用 setTimeout,100),但它让我感到恶心和肮脏。

这是我的登录表单:

@ModelType FAToolAdmin.LogOnModel

@Code
    ViewData("Title") = "Log In"
End Code


@Using Html.BeginForm()
    @<div class="content-primary">

        <div data-role="header" data-position="fixed" data-theme="b">
            <h2>Account Info</h2>
        </div>
            
        <fieldset>
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.UserName)
            </div>

            <div class="editor-field">
                @Html.EditorFor(Function(m) m.UserName)               
            </div>

            <div class="editor-label">
                @Html.LabelFor(Function(m) m.Password)
            </div>

            <div class="editor-field">
                @Html.EditorFor(Function(m) m.Password)
            </div>

            <p>
                <input type="submit" value="Log In" class="notfocus"/>
            </p>

            @* This Html.ValidationSummary will show a ul element containing any login errors that were returned.  
                The call here has been edited to send an empty string, because sending 2 lines of text regarding 
                a login failure is a little excessive.  You failed to login.  Type everything again and move on 
                with your day.*@

            @Html.ValidationSummary(True, "")

        </fieldset>
    </div>

End Using

<script type="text/javascript">

    //This is the script that adds the keyboards to the screen.

    $(function () {
        //setTimeout(function () {

            //This is the script that makes it so that when the enter button is pressed on the screen that the 
            //focus is changed to the password box (rather than having the form be submitted).

            // set the focus to the UserName field and select all contents
            $('#UserName').focus().select();
            // bind the keypress event on the UserName field to this little piece of code here
            var $inp = $('#UserName');
            $inp.bind('keydown', function (e) {
                var key = e.which;
                // if this is keycode 13 (enter), then prevent the default form behavior and change focus to the Password box.
                if (key == 13) {
                    e.preventDefault();
                    // find the Password input box and set the focus to it.
                    $('#Password').focus();
                }
            });
        //}, 100);
    });

</script>

这是我的控制器:

Imports System.Diagnostics.CodeAnalysis
Imports System.Security.Principal
Imports System.Web.Routing

Public Class AccountController
    Inherits System.Web.Mvc.Controller

    ' GET: /Account/LogOn
    <AllowAnonymous()>
    Public Function LogOn() As ActionResult
        Dim model As New LogOnModel
        Return View(model)
    End Function

    '
    ' POST: /Account/LogOn
    <AllowAnonymous()>
    <HttpPost()>
    Public Function LogOn(ByVal model As LogOnModel, ByVal returnUrl As String) As ActionResult
        Try
            If ModelState.IsValid Then

                If Membership.ValidateUser(model.UserName, model.Password) Then

                    FormsAuthentication.SetAuthCookie(model.UserName, False)
                    If Url.IsLocalUrl(returnUrl) AndAlso returnUrl.Length > 1 AndAlso returnUrl.StartsWith("/") _
                       AndAlso Not returnUrl.StartsWith("//") AndAlso Not returnUrl.StartsWith("/\\") Then
                        Return Redirect(returnUrl)
                    Else
                        Return RedirectToAction("Index", "Home")
                    End If
                Else
                    ModelState.AddModelError("", "The user name or password provided is incorrect.")
                End If
            Else
                ' if you just click on login without ever having entered anything into the username and password fields, you'll get this message.
                ModelState.AddModelError("", "Please enter a valid user name and password.")
            End If

        Catch ex As Exception
            MsgBox(ex.Message)

        End Try

        ' If we got this far, something failed, redisplay form
        Return View(model)

    End Function

    '
    ' GET: /Account/LogOff
    <AllowAnonymous()>
    Public Function LogOff() As ActionResult
        FormsAuthentication.SignOut()
        Session.Abandon()
        Return (RedirectToAction("Index", "Home"))
    End Function

End Class

和型号:

Public Class LogOnModel

    <Required()> _
    <Display(Name:="SomeCompany Username")> _
    Public Property UserName() As String

    <Required()> _
    <DataType(DataType.Password)> _
    <Display(Name:="Password")> _
    Public Property Password() As String

End Class

所以我的问题是,我该如何设置它,以便将输入错误用户名(并因此触发ModelState.AddModelErrorand Return View(model))的人发送回已加载 enter press 脚本的页面版本?

我觉得我错过了一些基本的东西。感谢有人可以提供的任何帮助。否则,setTimeout它是。

4

1 回答 1

0

我认为 jQueryMobile 可能是您的问题 - jqm 默认使用 ajax 提交所有表单,因此您没有得到完整的回发。我遇到了类似的问题,这就是根本原因。

尝试使用重载Html.BeginForm并添加new {data_ajax="false"}到 HttpAttributes

于 2012-12-07T21:13:32.907 回答