Partial view doesn't show validation message

Question

I tried unobtrusiveValidation and that is not working for me, it's always breaking on var unobtrusiveValidation = $form.data('unobtrusiveValidation'); var validator = $form.validate(); var unobtrusiveValidation = $form.data('unobtrusiveValidation'); var validator = $form.validate();

And every other solution online for partial view is not working, so what am I doing wrong?

View :

//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>

Partial view:

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

Controller:

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);
        }

Controller is like this because I was working with Ajax.beginForm, but let it be like this, that can be changed easily, and most important part is script file

Script:

$('#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

So, I changed partial view:

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

And in controller I am using 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);
        }

And finally in my script I have swal that will be triggered and u just need to use HTML function to put code that is returned from action if error is occurred, so error msg will be displayed:

 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"
        });
    }
}

Concept: 1. Use Ajax.BeginForm, define Success method

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

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