Question

我在我的Login.cshmtl视图中遇到了一个奇怪的问题，我在下面发布了这个问题。因此，在我的登录页面的右上角，我有两个用于凭据的文本框和两个.png图像作为其标签，一个＆＃34;记住我＆＃34;复选框和.png图像作为其标签，最后是＆＃34; ForgotPassword＆＃34; .png图像定义为：

<img onclick="location.href ='@Url.Action("ForgotPassword", "Account")'" src="~/Content/Images/ForgotPassword.png" />

一切正常，直到我更改了这一行，如下所示：

<input type="image" onclick="location.href ='@Url.Action("ForgotPassword", "Account")'" src="~/Content/Images/ForgotPassword.png" />

令人惊讶的是，现在我的图像按钮坏了，它提交了页面！使用调试器我观察到我的Login操作的POST方法被调用而不是ForgotPassword操作。你能解释一下这是怎么回事吗？下面，我发布了Login.cshtml视图，其中删除了不相关的部分。

@model FooProject.Web.ViewModels.LoginViewModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    ....
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="navbar navbar-fixed-top">
                <div class="navbar-header">
                    <input type="image" class="navbar-brand" onclick="location.href ='@Url.Action("Index", "Home")'" src="~/Content/Images/logo.png"/>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav" style="margin:10px">
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                    <div class="nav navbar-nav navbar-right">
                        <div class="row">
                            <div class="col-md-5">
                                <span class="actionLink">
                                    <img src="~/Content/Images/Username.png"/>
                                </span>
                            </div>
                            <div class="col-md-7">
                                <span class="actionLink">
                                    <img src="~/Content/Images/Password.png"/> 
                                </span>
                            </div>
                        </div>
                        @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "loginForm", @class = "navbar-right form-inline" }))
                        {
                            @Html.AntiForgeryToken()

                            <div class="row">
                                <div class="col-md-5">
                                    @Html.TextBoxFor(m => m.UserName, new { @class = "" })
                                </div>
                                <div class="col-md-5">
                                    @Html.PasswordFor(m => m.Password) <br />
                                </div>
                                <div class="col-md-2" style="padding-left:0">
                                    <input type="image" alt="Submit" src="~/Content/Images/Login.png" style="width:45px" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-5">
                                    @Html.CheckBoxFor(m => m.RememberMe)
                                    <span class="actionLink">
                                        <img src="~/Content/Images/RememberMe.png" style="height:11px;vertical-align:top;margin-top:2px" />
                                    </span>
                                </div>
                                <div class="col-md-7">
                                    <img onclick="location.href ='@Url.Action("ForgotPassword", "Account")'" src="~/Content/Images/ForgotPassword.png" />
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

<input type="image">用作提交按钮，因此这是预期的行为。

但是解决方案：

<input type="image" onclick="location.href ='@Url.Action("ForgotPassword", "Account")'; return false;" src="~/Content/Images/ForgotPassword.png" />可以解决问题。

添加return false;可防止提交被执行。

还有替代解决方案：

没有理由将img代码替换为input。如果你想在悬停上看到光标，可以使用CSS：

img.submit:hover {
    cursor: pointer;
}

并用submit类装饰img：

<img class="submit" onclick="location.href ='@Url.Action("ForgotPassword", "Account")'" src="~/Content/Images/ForgotPassword.png" />

我会这样做：

<a href='@Url.Action("ForgotPassword", "Account")'>
    <img src="/Content/Images/ForgotPassword.png" />
</a>

Answer 2

通过将图像标记更改为输入标记，您可以将图像创建为提交按钮，并且它正在执行您应该期望的操作：使用定义的操作和方法提交表单。

有关详细信息，请参阅http://www.w3schools.com/tags/att_input_type.asp

Answer 3

From the W3C Wiki (emphasis is mine):

图像按钮状态表示用户的图像可以选择一个坐标并提交表格，或者一个按钮用户可以从中提交表单。 元素是一个按钮，特别是提交按钮

带有onclick的<img/>元素提交表单而不是触发操作

3 个答案: