Question

我尝试了unobtrusiveValidation，但对我来说不起作用，它总是在var unobtrusiveValidation = $form.data('unobtrusiveValidation'); var validator = $form.validate();上失效

所有其他用于局部视图的在线解决方案都无法正常工作，那么我在做什么错了？

查看：

//BUNCH OF HTML
<!-- Modal edit user-->
@Html.Partial("~/Views/User/Partials/ProfileEditUserPartial.cshtml", Model.UserProfileData)
<div id="profileFormContainer" data-url="@Url.Action("ActionName", "ControllerName")"></div>

局部视图：

@model Web.Models.Users.Partials.ProfileEditUserPartialViewModel

<div class="modal fade text-left" id="profileEditUserModalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            @using (Html.BeginForm("UpdateUserData", "User", FormMethod.Post,new { id = "profileForm"}))
            {
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel1">Edit</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @Html.LabelFor(x => x.UserProfile.FirstName)*
                    @Html.TextBoxFor(x => x.UserProfile.FirstName, new { @class = "form-control" })
                    @Html.ValidationMessageFor(x => x.UserProfile.FirstName)

                    @Html.LabelFor(x => x.UserProfile.LastName)*
                    @Html.TextBoxFor(x => x.UserProfile.LastName, new { @class = "form-control" })
                    @Html.ValidationMessageFor(x => x.UserProfile.LastName)

                    @Html.LabelFor(x => x.UserProfile.Country)*
                    @Html.TextBoxFor(x => x.UserProfile.Country, new { @class = "form-control" })
                    @Html.ValidationMessageFor(x => x.UserProfile.Country)
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">@Resources.Resource.General_Close</button>
                    <button type="button" class="btn btn-outline-success" data-addressId id="saveUserDataId">@Resources.Resource.General_Ok</button>
                </div>
            }
        </div>
    </div> </div>

控制器：

public ActionResult UpdateUserData(ProfileEditUserPartialViewModel userModel)
        {
            var model = PopulateProfileViewModel();

            if (!ModelState.IsValid)
            {
                return PartialView("~/Views/User/Partials/ProfileEditUserPartial.cshtml", userModel);
            }

            m_UserService.UpdateUserProfile(userModel.UserProfile, GetUser().Id);
            m_AccountService.ClearUserCache(GetUser());

            return Json(new { success = true }, JsonRequestBehavior.AllowGet);
        }

控制器之所以这样，是因为我正在使用Ajax.beginForm，但就这样吧，它可以轻松更改，并且最重要的部分是脚本文件

脚本：

$('#editUserDataId').click(function () {
        $("#profileEditUserModalId").modal("show");
    });

    $('#saveUserDataId').click(function(){

        var $formContainer = $('#profileFormContainer');
        var url = $formContainer.attr('data-url');

        $formContainer.load(url, function () {
            var $form = $('#profileForm')
                .removeData("validator")
                .removeData("unobtrusiveValidation");
            var unobtrusiveValidation = $form.data('unobtrusiveValidation');
            var validator = $form.validate();
            $.validator.unobtrusive.parse($form);
            $form.submit(function () {
                var $form = $(this);
                if ($form.valid()) {
                    $.ajax({
                        url: url,
                        async: true,
                        type: 'POST',
                        data: JSON.stringify("Your Object or parameter"),
                        beforeSend: function (xhr, opts) {
                        },
                        contentType: 'application/json; charset=utf-8',
                        complete: function () { },
                        success: function (data) {
                            $form.html(data);
                            $form.removeData('validator');
                            $form.removeData('unobtrusiveValidation');
                            $.validator.unobtrusive.parse($form);
                        }
                    });
                }
                return false;
            });
        });
        return false;
    });

Answer 1

因此，我更改了部分视图：

<div class="modal-dialog" role="document">
    <div id="profileInnerDivId" class="modal-content">
        @using (Ajax.BeginForm("EditUserAddress", "User", new AjaxOptions
        {
            HttpMethod = "POST",
            OnSuccess = "UserAddressUpdated",
            InsertionMode = InsertionMode.Replace
        }, new { data_accountid= @Model.AddressId }))
        {
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel1">Edit</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @Html.HiddenFor(x => x.AddressId)

                @Html.LabelFor(x => x.Active)
                @Html.RadioButtonFor(x => x.Active, true, new { @class = "opacity-fixed" })

            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">@Resources.Resource.General_Close</button>
                <button type="submit" class="btn btn-outline-success" data-addressId id="saveEditBtnId">@Resources.Resource.General_Ok</button>
            </div>
        }
    </div>
</div>

在控制器中，我正在使用Json：

[HttpPost]
        public ActionResult EditUserAddress(UserAddress userAddress)
        {
            var model = PopulateProfileViewModel();

            if (!ModelState.IsValid)
            {
                return PartialView("~/Views/User/Partials/_ProfileEditUserAddressPartial.cshtml", userAddress);
            }

            //some code...

            return Json(new { success = true }, JsonRequestBehavior.AllowGet);
        }

最后在我的脚本中，我将触发swal，并且您只需要使用HTML函数来放置发生错误时从操作返回的代码，因此将显示错误消息：

 function UserAddressUpdated(result) {
    var id = $(this).data('accountid');

    if (result.success) {
        $("#profileModalId").modal("hide");
        swal({
            title: Localization.Edit_User_Address_Success_Message,
            icon: "success"
        }).then(function () {
            location.reload();
        });
    } else {
        $("#profileModalId-" + id).html(result);
        swal({
            title: Localization.Edit_User_Address_Error_Message,
            icon: "error"
        });
    }
}

概念： 1.使用Ajax.BeginForm，定义成功方法

    2. In Action use Json return type and if error occurred, return that
partial view

    3. Use $('divId').html to write your msg.

局部视图不显示验证消息

1 个答案: