如何将 Html.BeginForm 转换为 Ajax.BeginForm

17 浏览
0 Comments

如何将 Html.BeginForm 转换为 Ajax.BeginForm

以下代码可以正常工作，但如何将其转换为Ajax调用呢？\n


    @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl })) {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        

            登录表单
            
    
                
  1. 
                    @Html.LabelFor(m => m.UserName)
                    @Html.TextBoxFor(m => m.UserName)
                    @Html.ValidationMessageFor(m => m.UserName)
                
    2. 
                
  2. 
                    @Html.LabelFor(m => m.Password)
                    @Html.PasswordFor(m => m.Password)
                    @Html.ValidationMessageFor(m => m.Password)
                
    3. 
                
  3. 
                    @Html.CheckBoxFor(m => m.RememberMe)
                    @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
                
    4. 
            

            
        

    }

\n如何将其转换为Ajax调用？

0

1 答案

0 Comments

如何将Html.BeginForm转换为Ajax.BeginForm？

问题的原因是我们想要使用Ajax来提交表单而不是传统的页面刷新方式。我们希望在用户登录成功后，通过Ajax获取重定向的URL，并在前端进行页面跳转，而不是通过服务器的返回页面进行跳转。

解决方法是使用Ajax.BeginForm替换Html.BeginForm来实现表单的异步提交。我们需要将表单中的所有元素和属性都保留，并添加一个OnSuccess属性来指定成功提交后的回调函数。

下面是修改后的代码：

@{
    AjaxOptions ajaxOptions = new AjaxOptions
    {
        OnSuccess = "onSuccess"
    };
}
@using (Ajax.BeginForm("Login", "Account", ajaxOptions))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    

        Log in Form
        
    
            
  1. 
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            
    2. 
            
  2. 
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            
    3. 
            
  3. 
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
            
    4. 
        

        
    

}

确保在登录的Action中返回重定向的URL，并在视图中添加以下脚本：

通过以上的修改，我们成功地将Html.BeginForm转换为了Ajax.BeginForm，并实现了通过Ajax提交表单并进行页面跳转的功能。

0