ASP.NET MVC Form Submit с ссылкой вместо кнопки

Я хотел бы иметь простую форму входа (или любую форму, если на то пошло), и иметь возможность опубликовать ее, а не с помощью кнопки, но со ссылкой.

Итак, no 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>
<%}%>

Ответ 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.

Ответ 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>

К сожалению, стиль "hover" не работает с IE, но работает с Firefox.

Я не уверен, что создание кнопки отправки выглядит как ссылка, это хорошая идея, но я уверен, что видел это раньше.

Ответ 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>.

Ответ 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>
<%}%>

Ответ 5

Не можете ли вы просто поместить в него событие 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>