代码之家 › 专栏 › 技术社区 › Bertvan

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

asp.net-mvc jquery

Bertvan · 技术社区 · 15 年前

我想要一个简单的登录表单(或任何与此相关的表单),并且能够发布它,不是用按钮,而是用链接。

所以没有 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>
<%}%>

7 回复 | 直到 7 年前

Darin Dimitrov 15 年前

实现这一点的唯一方法是使用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 像个锚。我的建议是始终使用提交按钮提交表单。这在语义上是正确的,你也会发现像按 进入 键编辑文本字段时,将提交类似于本机格式的表单。那么做语义上正确的事情,在CSS中做样式。

belugabob 15 年前

如果您希望使用链接而不是按钮的唯一原因是使其看起来不同(同时保留相同的功能),为什么不只是将按钮样式设置为链接…

<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。

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

Nick Craver 15 年前

您可以添加 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> 它在里面。

Andras 10 年前

在您的解决方案中,我唯一要更改的是将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>
<%}%>

Amer Jamaeen 7 年前

尝试内联javascript

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

OhBugger 15 年前

你不能把一个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>

Richard 7 年前

在Razor语法中,并添加了Amer的建议;下面是我使用的成功实现:

添加 id 在BeginInform方法中, htmlAttributes .

然后使用inline 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>
}