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

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中做样式.

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处理程序来执行此操作:

$(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>.