Znacznik zakotwiczenia jako przycisk przesyłania?

Question

Jestem w trakcie przekształcania istniejącej strony internetowej, aby używać MVC i Entity Framework.

Układ/stylizacja ma pozostać taka sama, a aby wykonać tę wytyczną, muszę przesłać mój formularz logowania za pomocą znacznika <a>, ponieważ ma on niestandardowy obraz przycisku.

Oto moja postać:

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" })) 
{ 
    <label> 
     <span>Username 
     </span> 
     <input type="text" name="UserName" id="UserName" class="input-text required" /> 
    </label> 
    <label> 
     <span>Password 
     </span> 
     <input type="password" name="Password" id="Password" class="input-text required" /> 
    </label> 
    <label> 
     <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" /> 
     <span class="checkboxlabel">Remember Me</span> 
    </label> 
    <div class="spacer"> 
     <a href="javascript:void(0)" onclick="login();" class="login-button"></a> 
    </div> 
} 

Jak widać, <a> tag dawniej składać informacji logowania przy użyciu javascript. To nie jest to, co chcę osiągnąć.

Jak zmienić ten tag, aby przesłać mój formularz do działania kontrolera?

Answer 1

Zrobiłem małe zmiany

HTML

<form action="test.aspx" type="POST"> 
    <label> 
     <span>Username</span> 
     <input type="text" name="UserName" id="UserName" class="input-text required" /> 
    </label> 
    <label> 
     <span>Password</span> 
     <input type="password" name="Password" id="Password" class="input-text required" /> 
    </label> 
    <label> 
     <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" /> 
     <span class="checkboxlabel">Remember Me</span> 
    </label> 
    <div class="spacer"> 
     <a href="javascript:void(0)" class="login-button">Login</a> 
    </div> 
</form> 

jquery

$(document).ready(function(){ 
    $(document).on("click",".login-button",function(){ 
    var form = $(this).closest("form"); 
    //console.log(form); 
    form.submit(); 
    }); 
}); 

JSFiddle

Answer 2

Zazwyczaj nie chcesz umieszczać dużo javascript wewnątrz znaczników html, ale jeśli zdarzy się to tylko raz w twoim rozwiązaniu, będzie dobrze. Jeśli jednak wszystkie znaczniki zakotwiczenia będą wymagały dodania, rozwiązanie Gokana będzie działało lepiej z klasą znaczników i niektórymi javascriptami w popularnym miejscu.

zmienić znacznik zakotwiczenia wyglądać mniej więcej tak:

<a href="javascript:$('form').submit();" class="login-button"></a> 

Answer 3

wystarczy zmienić pojedynczej linii, Dla Optimization myślę, że ten jest najlepszy sposób.

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" })) 
{ 
    // your HTML code 
    <div class="spacer"> 
     <a href="" onclick='$("#login").submit()' class="login-button"></a> 
    </div> 
}