Thẻ neo dưới dạng nút gửi?

Question

Tôi đang trong quá trình chuyển đổi một trang web hiện có để sử dụng khung MVC và Entity.

Bố cục/kiểu dáng được cho là giống nhau và để tuân theo hướng dẫn đó, tôi cần gửi biểu mẫu đăng nhập của mình bằng cách sử dụng thẻ <a> vì thẻ có hình ảnh tùy chỉnh cho nút.

Dưới đây là hình thức của tôi:

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

Như bạn có thể thấy, <a> thẻ trước đây là gửi thông tin đăng nhập sử dụng javascript. Đây không phải là những gì tôi đang tìm kiếm để đạt được.

Làm cách nào để thay đổi thẻ đó để gửi biểu mẫu của tôi cho hành động điều khiển của tôi?

Answer 1

Tôi đã thực hiện

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

Thông thường bạn không muốn đặt nhiều javascript bên trong các thẻ html, nhưng nếu điều này chỉ xảy ra một lần trong giải pháp của bạn thì nó sẽ ổn. Tuy nhiên, nếu có các thẻ neo trên tất cả các nhu cầu đăng bài bằng cách sử dụng giải pháp của Gokan sẽ làm việc tốt hơn với một lớp đánh dấu và một số javascript ở một nơi phổ biến.

Thay đổi thẻ neo của bạn để trông như thế này: thay đổi nhỏ

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

Answer 3

Chỉ cần thay đổi Đường đơn, Đối với Optimization Tôi nghĩ đây là cách tốt nhất.

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