Asp.net mvc <；img>；带有onclick的元素提交表单，而不是触发操作_Asp.net Mvc_Razor

Asp.net mvc <；img>；带有onclick的元素提交表单，而不是触发操作

asp.net-mvc razor

Asp.net mvc <；img>；带有onclick的元素提交表单，而不是触发操作,asp.net-mvc,razor,Asp.net Mvc,Razor,我在下面发布的Login.cshmtl视图中遇到了一个奇怪的问题。因此，在登录页面的右上角，我有两个用于凭证的文本框和两个.png图像作为标签，一个“记住我”复选框和一个.png图像作为标签，最后是一个“放弃密码”。png图像定义为： <img onclick="location.href ='@Url.Action("ForgotPassword", "Account")'" src="~/Content/Images/ForgotPassword.png" /> 一切都很顺

我在下面发布的Login.cshmtl视图中遇到了一个奇怪的问题。因此，在登录页面的右上角，我有两个用于凭证的文本框和两个.png图像作为标签，一个“记住我”复选框和一个.png图像作为标签，最后是一个“放弃密码”。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" />

令人惊讶的是，现在我的图片按钮坏了，它提交了页面！使用调试器，我观察到登录操作的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>

@model FooProject.Web.ViewModels.LoginViewModel
@{
布局=空；
}
....

@ActionLink（“关于”、“关于”、“主页”）
@ActionLink（“联系人”、“联系人”、“主页”）

@使用（Html.BeginForm（“Login”、“Account”、FormMethod.Post、new{id=“loginForm”、@class=“navbar right form inline”}））
{
@Html.AntiForgeryToken（）
@Html.TextBoxFor（m=>m.UserName，新的{@class=”“}）
@Html.PasswordFor（m=>m.Password）

@CheckBoxFor（m=>m.RememberMe）
}

通过将图像标记更改为输入标记，您已经创建了一个图像作为提交按钮，它正在做您应该做的事情：按照定义的操作和方法提交表单

有关更多信息，请参见

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

有关更多信息，请参见

用作提交按钮，因此这是预期行为

但是有一个解决方案：

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

就可以了

通过添加

返回false阻止执行提交
还有另一种解决方案：
<a href='@Url.Action("ForgotPassword", "Account")'>
    <img src="/Content/Images/ForgotPassword.png" />
</a>

没有理由将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>


用作提交按钮，因此这是预期的行为
但是有一个解决方案：
<a href='@Url.Action("ForgotPassword", "Account")'>
    <img src="/Content/Images/ForgotPassword.png" />
</a>

就可以了
通过添加返回false阻止执行提交
还有另一种解决方案：
<a href='@Url.Action("ForgotPassword", "Account")'>
    <img src="/Content/Images/ForgotPassword.png" />
</a>

没有理由将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>



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

图像按钮状态表示用户从中选择的图像
可以选择坐标并提交表单，也可以选择按钮
用户可以从中提交表单元素是一个按钮，
特别是提交按钮
我的意图确实是想看到光标：）非常感谢您的解决方案！我的意图确实是想看到光标：）非常感谢您的解决方案！