Link to home
Start Free TrialLog in
Avatar of lovettjay
lovettjay

asked on

Display Error Message in Asp.net Modal Validation Partial View

I am trying to get the red boxes and error message to display.  The modal will restrict the post but does not display any error message.   I have enabled ClientValidationEnabled & UnobtrusiveJavaScriptEnabled in the webconfig.  

Class:
   class concernMetaData
    {
        
        [Display(Name = "Concern")]
        public int concern_id { get; set; }


        [Required(ErrorMessage = "Concern Description Is Required")]
        [Display(Name = "Description")]
        public string concern_desc { get; set; }
    }
    [MetadataType(typeof(concernMetaData))]
    public partial class concern { }
    #endregion concernMetaData

Open in new window



Partial View - AddEdit.cshtml
@model Data.concern
<div>
    <form id="myForm">
        @Html.HiddenFor(x => x.concern_id)
        @Html.LabelFor(model => model.concern_id, htmlAttributes: new { @class = "control-label col-md-2" })
        @Html.TextBoxFor(model => model.concern_desc, new { @class = "form-control", placeholder = "Description" })
        @Html.ValidationMessageFor(model => model.concern_desc, "", new { @class = "error" })

        <div style="text-align:center;display:none">
            <i class="fa fa-spinner fa-pulse fa-3x fa-fw" id="loaderDiv"></i>
        </div>
        <a href="#" id="btnSubmit1" class="btn btn-block btn-warning">
            @if (Model.concern_id > 0)
            {<span>Update</span>}
            else {<span>Save</span>}
    </a>
</form>
</div>


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script>
    $(document).ready(function () {

        $("#btnSubmit1").click(function () {
            $("#loaderDiv").show();
            var myModelBody1 = $("#myForm").serialize();

            $.ajax({
                type: "POST",
                url: "@Url.Action("index", "concerns")",
                data: myModelBody1,
                success: function () {
                    $("#loaderDiv").hide();
                    $('#myModalAddEdit').modal('hide');
                    window.location.href = "@Url.Action("index", "concerns")";

                }
            });
        });
    });
</script>

Open in new window



Modal
 <div class="modal fade" id="myModalAddEdit">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title"><strong style="color:#ff9c21">ADD EDIT </strong> Concern</h3>

                </div>
                <div class="modal-body" id="myModelBody1">


                </div>

            </div>
        </div>
    </div>

Open in new window



Scripts for modal
 var AddEditConcern=function(concern_id) {

        var concern_id = concern_id;

        var url = '@Url.Action("AddEditConcern", "concerns")?concern_id=' + concern_id;
        //var url = "http://localhost/NAHP/concerns/AddEditConcern?concern_id="+concern_id;
        $("#myModelBody1").load(url,
            function() {
                $("#myModalAddEdit").modal('show');
            });

    }

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lovettjay
lovettjay

ASKER

Thanks for your help.  I followed an online tutorial and: window.location.href = "@Url.Action("index", "concerns")"; was to refresh the page after an insert.  

I put this in the partial view
 <form method="post" action="@Url.Action("index", "concerns")">
        @Html.HiddenFor(x => x.concern_id)

        <div class="form-group">
            @Html.LabelFor(model => model.concern_id, htmlAttributes: new { @class = "control-label col-md-2" })
            @Html.TextBoxFor(model => model.concern_desc, new { @class = "form-control", @placeholder = "Description" })
            @Html.ValidationMessageFor(model => model.concern_desc, "", new { @class = "error" })
        </div>
       
        <input type="submit" id="btnSubmit1"/>
       
    </form> 

Open in new window


Is there anything that I do with the script?
Thanks for your help