ASP.NET MVC使用链接而不是按钮提交表单

Question

我想要一个简单的登录表单（或其他表单），并能够通过链接进行提交，而不是通过按钮。

所以不使用input，而是使用a。

我已经看到了很多这种问题的解决方案，并尝试了许多不同的选项，但每一次都没有反应。

我已经从代码中删除了所有JQuery，所以这是“基础”情况：缺少什么才能使其提交表单？

<% using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "loginForm" }))
  { %>
       <%= Html.TextBoxFor(x => x.UserName)%><br/>
       <%= Html.TextBoxFor(x => x.Password)%><br/>
       <a href="#" id="submit-link" class="button">Log In</a>
<%}%>

- Bertvan

Answer 1

唯一实现此功能的方法是使用JavaScript：

<form id="fooForm" action="/foo" method="post">
    <a href="#" id="submit_link" class="button">Log In</a>
</form>

在JavaScript中：

$(function() {
    $('a#submit_link').click(function() {
        $('form#fooForm').submit();
    });
});

虽然我建议您使用提交按钮：

<button type="submit">
    <a href="#" id="submit_link" class="button">Log In</a>
</button>

并尝试将其样式设置得像锚点。我的建议是始终使用提交按钮来提交表单。这更具语义正确性，您还会发现在编辑文本字段时按下 Enter 键会提交表单，这有点类似原生的方式。因此，请遵循语义上的正确性，并在 CSS 中进行样式设置。

- Darin Dimitrov

---

<button type="submit">是否跨浏览器兼容？我发现IE7 / IE6需要一个<input type =“submit”/>，否则它将不会提交带有<button>的表单。 - guzart

虽然我建议您使用提交按钮[...]并尝试将其样式设置为看起来像锚点。 - wodzu

Answer 2

如果你想使用链接而不是按钮的唯一原因是为了让它看起来不同（同时保持相同的功能），那么为什么不只是将按钮样式设置为链接的样式呢...

<input type="submit" value="Submit the form" class="fakeLink"/>

<style type="text/css">

.fakeLink{
    border: 0px;
    background-color: transparent;
    color: blue;
    cursor: hand;
} 
.fakelink:hover{
    text-decoration: underline;
}

</style>

不幸的是，“hover”样式在IE上不起作用，但在Firefox上可以。

我并不完全相信让提交按钮看起来像链接是一个好主意，但我确信之前见过这样做。

- belugabob

---

不是正式答案，但是为了按钮样式给你加一分。 - Bertvan

相信我，这不是一个虚假的答案 ;-). 我仍然很想知道为什么想要通过链接提交表单，而不是按钮。 - belugabob

因为HTML已经提供给我们了，所以我没有自己写。 - Bertvan

如果您使用Bootstrap，可以将"class"属性设置为“btn btn-link”，使提交按钮看起来像普通链接，而无需像上面所做的那样编写自定义CSS。 - Cesar

实际上它必须是 cursor: pointer;，因为“hand”未被W3C定义 - 至少自CSS 2.1以来如此。 - Jack Miller

Answer 3

您可以添加click处理程序来执行此操作：

$(function() {
  $("#submit-link").click(function() {
    $("#loginForm").submit();
  });
});

或者，为了使它更具有重复使用性，可以给链接添加一个类(class)，像这样:

<a href="#" class="submit-link button">Log In</a>

然后以这种方式引用它：

$(".submit-link").click(function() {
  $(this).closest("form").submit();
});

这使得任何带有 <elem class="submit-link"> 的元素都可以提交它所在的 <form>。

- Nick Craver

---

我正在使用类似的解决方案，但是在submit()之后我不得不添加一个preventDefault()调用。否则它无法正常工作。 - M4N

不知道 '.closest' jQuery 选择器。非常聪明。 :) - Jakob Gade

Answer 4

在您的解决方案中，我唯一想改变的是将onclick事件添加到您的链接中以提交表单：

<% using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "loginForm" }))
  { %>
       <%= Html.TextBoxFor(x => x.UserName)%><br/>
       <%= Html.TextBoxFor(x => x.Password)%><br/>
       <a href="#" id="submit-link" class="button" onclick="loginForm.submit();">Log In</a>
<%}%>

- Andras

Answer 5

尝试内联 JavaScript。

   <a href="javascript:document.forms[0].submit()">
      Submit
    </a>

- Amer Jamaeen

Answer 6

你不能在上面加一个onclick事件吗？

<a href="#" id="submit-link" class="button" onclick="submitForm()">Log In</a>

<script type="text/javascript">
  function submitForm()
       {
          document.forms.item(0).submit();
       }
</script>

- OhBugger

Answer 7

在 Razor 语法中，跟随 Amer 建议的方法，这是我使用的成功实现方法：

将表单的 id 添加到 BeginForm 方法的 htmlAttributes 参数中。

然后使用内联 JavaScript HREF 引用表单的 id 并提交。

using (Html.BeginForm(actionName: "LogOff", controllerName:"Account", routeValues: new { Area = "" },method: FormMethod.Post, htmlAttributes: new {id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
<a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
}

- Richard