错误处理 – 在父页面上显示包含错误的mvc部分视图

发布时间：2020-12-16 07:01:55 所属栏目：asp.Net 来源：网络整理

导读：我有一个包含多个表单的页面,每个表单都是部分的.我想发布每个部分提交.如果有错误,我希望验证错误显示在部分作为主页面的一部分,即如果有错误,我不想只看到它自己的页面上的部分.我是否正确说这种行为只能用ajax帖子？如何在没有ajax帖子的情况下返回模型状

我有一个包含多个表单的页面,每个表单都是部分的.我想发布每个部分提交.如果有错误,我希望验证错误显示在部分作为主页面的一部分,即如果有错误,我不想只看到它自己的页面上的部分.我是否正确说这种行为只能用ajax帖子？如何在没有ajax帖子的情况下返回模型状态错误,只是一个普通的表单帖子？

编辑：
仍然看到它自己的页面部分

部分 –

@using (Html.BeginForm("Login","Account",FormMethod.Post,new { id = "LoginForm" }))
{
    @Html.ValidationMessage("InvalidUserNamePassword")
    <fieldset class="fieldset">
        <div>
            <label for="form-field-user_id">User ID</label>
            <span>
                @Html.TextBoxFor(x => x.Username,new { @class = "form-field__input form-field__input--text",@id = "form-field-user_id"})                      
            </span>
        </div>
    </fieldset>
    <div class="form-field__button">
        <button id="loginButton" type="submit" class="button button--primary">Login</button>
    </div>
}

<script>
    $('#loginButton').click(function () {
        $.ajax({
            type: "POST",url: '@Url.Action("Login","Account")',data: $('form').serialize(),success: function (result) {
                if (result.redirectTo) {
                    window.location.href = result.redirectTo;
                } else {
                    $("#LoginForm").html(result);
                }
            },error: function () {
                $("#LoginForm").html(result);
            }
        });
    });
</script>

控制器 –

[HttpPost]
public ActionResult Login(LoginModel model)
{
    if (!ModelState.IsValid)
    {
        return PartialView("~/Views/Account/_Login.cshtml",model);
    }
    return Json(new { redirectTo = Url.Action("Index","Profile") });
}

解决方法

是的,你说这种行为只有ajax帖子是正确的.

您当前的脚本存在一些问题,这意味着您将无法获得所需的结果.

首先,您的按钮是一个提交按钮,这意味着除了取消默认事件之外,它将执行除ajax调用之外的正常提交(通过添加return false;作为脚本中的最后一行代码).但是,将按钮类型更改为type =“button”会更容易

<button id="loginButton" type="button" class="button button--primary">Login</button>

ajax调用现在将更新现有页面,但是它会在现有的< form>内添加返回的部分.导致嵌套表单的元素是无效的HTML并且不受支持.更改您的html以将主视图表单包装在另一个元素中

<div id="LoginFormContainer">
    @using (Html.BeginForm("Login",new { id = "LoginForm" }))
    {
        ....
        <button id="loginButton" type="button" class="button button--primary">Login</button>
    }
</div>

然后修改脚本以更新外部元素的html

success: function (result) {
    if (result.redirectTo) {
        window.location.href = result.redirectTo;
    } else {
        $("#LoginFormContainer").html(result); // modify
    }
},

最后,您的渲染动态内容使客户端验证不适用于返回的表单.假设您的属性具有验证属性(例如,Userame属性上的[Required]属性),您需要在加载内容后重新解析验证器

var form = $('#LoginForm');
....
} else {
    $("#LoginFormContainer").html(result);
    // reparse validator
    form.data('validator',null);
    $.validator.unobtrusive.parse(form);
}

您注意到页面上有多个表单,在这种情况下,您的ajax选项应该是

data: $('#LoginForm').serialize(),

或者如果你声明var form = $(‘#LoginForm’);根据上面的代码片段,然后数据：form.serialize(),以确保您序列化正确的表单.

附注：没有必要更改文本框的id属性(默认情况下它将是id = Username“,您可以简单地使用

@Html.LabelFor(x => x.UserName,"User ID")
@Html.TextBoxFor(x => x.Username,new { @class = "form-field__input form-field__input--text" })

或只是@Html.LabelFor(x => x.UserName)的属性用[Display(Name =“User ID”)]装饰

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!