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

I would like to have a simple login form (or any form for that matter), and be able to post it, not with a button, but with a link.

我想有一个简单的登录表单（或任何形式），并能够发布它，而不是一个按钮，但有一个链接。

So no input, but a.

所以没有输入，但是。

I've seen plenty of solutions for this type of question, and I've tried lots of different options, and every single time, nothing happens.

我已经看到了很多针对这类问题的解决方案，我尝试了很多不同的选择，每次都没有任何反应。

I've stripped all the JQuery from what I have, so this is the "base" situation: what's missing to make it submit the form?

我已经从我拥有的东西中删除了所有的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>
<%}%>

5 个解决方案

#1

The only way to make this happen is using javascript:

实现这一目标的唯一方法是使用javascript：

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

and in javascript:

并在JavaScript中：

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

Although I would suggest you using a submit button:

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

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

And try to style it to look as an anchor. My suggestion is to always use submit buttons to submit forms. This is more semantically correct, you will also find that things like pressing the Enter key while editing a text field will submit the form which is kind of native. So do what's semantically correct and do the styling in CSS.

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

#2

If the only reason that you want to use a link instead of a button is to make it look different (whilst retaining the same functionalty), why not just style the button to look like a link...

如果您想要使用链接而不是按钮的唯一原因是使其看起来不同（同时保留相同的功能），为什么不只是将按钮设置为看起来像链接...

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

Unfortunately, the 'hover' style doesn't work with IE, but does with Firefox.

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

I'm not completley convinced that making a submit button look like a link is a good idea, but I'm sure that I've seen it done before.

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

#3

You can add a click handler to do it like this:

您可以添加一个单击处理程序来执行此操作：

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

Or to make it more reusable, give the link a class instead, like this:

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

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

Then reference it that way:

然后以这种方式引用它：

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

This makes any <elem class="submit-link"> work to submit the <form> it's in.

这使得任何能够提交它所在的

#4

The only thing I would change in your solution that I would add the onclick event to your link in order to submit the form:

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

#5

can't you just put a onclick event on it?

难道你不能只在它上面放一个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>

#1