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>
<%}%>

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>

尝试将style it视为锚点。我的建议是始终使用提交按钮提交表单。这在语义上更正确，您还会发现在编辑文本字段时按 Enter 键这样的内容将提交一种原生的表单。那么做什么是语义正确的，并在CSS中做样式。

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>

不幸的是，'悬停'样式不适用于IE，但适用于Firefox。

我并不完全确信将提交按钮看作链接是一个好主意，但我确信我之前已经看过它。

Answer 3

您可以添加click handler来执行此操作：

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

或者为了使其更具可重用性，请为链接指定一个类，如下所示：

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

然后以这种方式引用它：

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

这使得任何<elem class="submit-link">工作都可以提交<form>。

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>
<%}%>

Answer 5

尝试内嵌JavaScript

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

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>

Answer 7

使用剃刀语法并添加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>
}

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

7 个答案: