Question

我正在将按钮更改为用于OAuth的图像（请参阅oauth2教程）。我也在对这些图像进行灰度化，为此我使用了this代码。

这是我的_ExternalLoginsPartial.cshtml：

@{
var loginProviders = Context.GetOwinContext().Authentication.GetExternalAuthenticationTypes();

string action = Model.Action;
string returnUrl = Model.ReturnUrl;
using (Html.BeginForm(action, "Account", new { ReturnUrl = returnUrl }))
{
    @Html.AntiForgeryToken()

    foreach (AuthenticationDescription p in loginProviders)
    {
        <ul class="imglist" id="socialLogin">
            @if (p.AuthenticationType == "Google")
            {
                <li><a href="#"><img src="/Content/google.png" /></a></li>
                <li><a href="#"><img src="/Content/google.png" /></a></li>
                <li><a href="#"><img src="/Content/google.png" /></a></li>
            }
            @if (p.AuthenticationType == "Microsoft")
            {
                <li><a href="#"><img src="/Content/outlook.jpg" /></a></li>
            }
            @if (p.AuthenticationType == "Facebook")
            {
                <li><a href="#"><img src="/Content/facebook.png" /></a></li>
            }
        </ul>
    }
}
}

我无法移除<a href="#">，因为这会破坏灰度。而且我不能在其中放置button标记，因为这是不好的HTML（如果这样做，编译器会抱怨它。）

那么我怎样才能将这些图像变成提交按钮？

编辑： http://i61.tinypic.com/2ns7t00.png

Answer 1

您可以使用按钮元素替换anchor元素，但您必须稍微更改一下代码：

<button type="submit"><img src="..."></button>

然后更改代码中的选择器：

$(window).load(function() {
    $('button img').each(function() {
        ...
});

$(document).ready(function() {
    $("button").hover(
        ...
    );
});

如果你想摆脱按钮样式，只需使用css：

button {
    padding: 0;
    border: none;
}

Answer 2

您可以点击链接提交带有Javascript的表单：

using (Html.BeginForm(action, "Account", new { ReturnUrl = returnUrl, id = "myId" }))
{
   <a href="#" onclick="document.getElementById('myId').submit();">
       <img src="/Content/facebook.png" />
   </a>
}

这只是如何向表单添加ID并在链接上添加点击事件的示例代码。

Answer 3

您可以执行<input type="image" src="submit.gif">之类的操作，这会在表单标记中提交您的页面。另一种方法是使用jQuery并为图像创建一个click事件。

Answer 4

正如您在对另一个问题的回答中指出的那样，您想要返回一个值，您也可以这样做:(基于Kevin的答案）

using (Html.BeginForm(action, "Account", new { ReturnUrl = returnUrl, id = "myId" }))
{
   <a href="#" onclick="document.getElementById('@p.AuthenticationType').click();">
       <img src="/Content/facebook.png" />
   </a>
<input name ="provider" type="submit" style="display:none;" id="@p.AuthenticationType" value="@p.AuthenticationType" />
}

图像作为提交按钮

4 个答案: