将标记锚定为提交按钮？答案

【问题标题】：Anchor tag as submit button?将标记锚定为提交按钮？
【发布时间】：2013-06-10 11:51:40
【问题描述】：

我正在将现有网站转换为使用 MVC 和实体框架。

布局/样式都应该保持不变，为了遵循该准则，我需要使用<a> 标签提交我的登录表单，因为它有一个自定义按钮图像。

这是我的表格：

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
    <label>
        <span>Username
        </span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password
        </span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" onclick="login();" class="login-button"></a>
    </div>
}

如您所见，<a> 标记以前使用 javascript 提交登录信息。这不是我想要完成的。

如何更改该标签以将我的表单提交给我的控制器操作？

【问题讨论】：

您的规范是否明确规定您不能将锚标记更改为按钮标记？因为我的意思是，按钮也允许图像。这可能是对 css 的一个小调整，而不是需要使用 javascript 来提交表单。

标签： html asp.net-mvc forms razor

【解决方案1】：

通常您不希望在 html 标记中放置大量 javascript，但如果这仅在您的解决方案中出现一次，那就没问题了。但是，如果到处都有锚标签需要使用 Gokan 的解决方案发布，那么在一个公共位置使用标记类和一些 javascript 会更好。

将您的锚标记更改为如下所示：

<a href="javascript:$('form').submit();" class="login-button"></a>

【讨论】：

谢谢！通常，您不想在 html 标记中放置大量 javascript，但如果这仅在您的解决方案中出现一次，那就没问题了。但是，如果到处都有锚标签需要使用 Gokan 的解决方案发布，那么在一个公共位置使用标记类和一些 javascript 效果会更好。
-1：这是将基于 JavaScript 的行为附加到标签的最糟糕的方法。
@tereško 我不同意。为单个极端案例在各处运行不连贯的代码可能会导致比其价值更多的问题。尽管它可能不是最“被接受”的方式，但有时最简单的方式是最可维护的。但是，如果您有其他解决方案，请支持它，要有建设性，而不仅仅是说它很糟糕。

【解决方案2】：

我做了一些小改动

HTML

<form action="test.aspx" type="POST">
    <label>
        <span>Username</span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" class="login-button">Login</a>
    </div>
</form>

jquery

$(document).ready(function(){
   $(document).on("click",".login-button",function(){
     var form = $(this).closest("form");
     //console.log(form);
     form.submit();
   });
});

JSFiddle

【讨论】：

【解决方案3】：

只需要改单行，对于Optimization我觉得这个是最好的办法。

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
    // your HTML code
    <div class="spacer">
        <a href="" onclick='$("#login").submit()' class="login-button"></a>
    </div>
}

【讨论】：