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 & UnobtrusiveJavaScriptEnabl ed in the webconfig.
Class:
Partial View - AddEdit.cshtml
Modal
Scripts for modal
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
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>
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">×</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>
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');
});
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for your help
ASKER
I put this in the partial view
Open in new window
Is there anything that I do with the script?