jQuery 使用链接而不是按钮提交 ASP.NET MVC 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3265756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET MVC Form Submit with Link instead of Button
提问by Bertvan
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.
所以没有input，但是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>
<%}%>
回答by Darin Dimitrov
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 itto 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 Enterkey 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 中做样式。
回答by belugabob
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.
我并不完全相信让提交按钮看起来像一个链接是一个好主意，但我确信我以前见过这样做过。
回答by Nick Craver
You can add a clickhandlerto do it like this:
您可以添加一个click处理程序来做到这一点：
$(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.
这使得<elem class="submit-link">提交<form>它所在的任何工作。
回答by Andras
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>
<%}%>
回答by Amer Jamaeen
Try inline JavaScript
尝试内联 JavaScript
<a href="javascript:document.forms[0].submit()">
Submit
</a>
回答by Richard
In razor syntax and to add on Amer's suggestion; here's successful implementation I used:
在剃刀语法中并添加 Amer 的建议；这是我使用的成功实现：
Add the idof your form in the BeginForm method in the htmlAttributes.
添加id您的形式在该BeginForm方法htmlAttributes。
Then use the inline JavaScript HREF to reference the form by it's id and submit it.
然后使用内联 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>
}
回答by OhBugger
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>
