I have very strange problem I have main form with datatable and edit details buttons in every row when i click on Edit button opens modal partialview and load data from table but when i click to save data validation doesnt work at all. When i click New button everything works fine and i dont know what goes wrong. I added
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
in my main view and
@section scripts {
@Scripts.Render("~/bundles/jqueryval")
}
in partial and result is the same
Main View
$(document).ready(function ()
{
dataTable = $('#userTable').DataTable({
"responsive": "true",
"ajax": {
"type" : "GET" ,
"url" : "@Url.Action("GetData","Customers")" ,
"datatype" : "json"
},
"columns":
[
{ "data": "FirstName"},
{
"data": "Id", "render": function (data) {
return '<a class="btn btn-danger" onclick="Details('' + data + '')" style="margin-right: 12px"><span class="glyphicon glyphicon-th-list" style=" margin-right: 2px;"></span>Details</a><a data-toggle="modal" data-target="#myModal" class="btn btn-success" onclick="Edit('' + data + '')" style="margin-right: 12px"><span class="glyphicon glyphicon-pencil" style=" margin-right: 2px;"></span>Edit</a>';
}
}
],
"language": {
"processing": "<img src='https://gph.is/2gESFHh' />",
"emptytable": "Няма данни за изжедане. Може да натиснете бутона <b> Нов </b>"
},
});
});
function Edit(Id) {
//if (confirm("Наистина ли искате да промените този запис?")) {
$.ajax({
type : 'Get' ,
url: '@Url.Action("AddOrEditPartial","Customers")/' + Id,
data: { Id: Id }
}).done(function(result) {
$('#modbody').html(result);
});
//}
}
</script>
}
<h2>Users</h2>
<div class="col-md-12" style="background-color: white; padding-top: 20px; padding-bottom: 20px; border-radius: 3px;">
<a data-toggle="modal" data-target="#myModal" class="btn btn-success" style="margin-bottom: 12px; margin-top:12px "><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
<table id="userTable" class="display" style="width: 100%;">
<thead>
<tr>
<th>
Name:
</th>
<th></th>
</tr>
</thead>
</table>
<div class="modal fade" id="myModal" role="dialog" style="margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Users</h4>
</div>
<div class="modal-body" id="modbody">
@Html.Partial("AddOrEditPartial")
</div>
</div>
</div>
</div>
</div>
<table class="table" id="userTable">
</table>
PartialView
@model Sfuk1.Models.Customer
<div class="panel-group">
<div class="panel-default">
<div class="panel panel-success">
<div class="panel-body" id="panbody">
<div class="col-sm-10 col-sm-offset-1">
@using (Html.BeginForm("AddOrEditPartial", "Customers", FormMethod.Post, new { enctype = "multipart/for-data", id = "formsubmit" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-success" id="btnSubmit" onclick="Validation()" />
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
</div>
@section scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script>
var Validation = function () {
debugger
var data = $("formsubmit").serialize;
if (!$("formsubmit").valid()) {
console.log(false);
return false;
}
}
</script>
2
Answers
I installed unobtrusive-ajax and also added it in main scripts
@section scripts
from partial view will not work in Main View, as the page is already rendered, you need to use @section scripts in main view.Also, you need refer unobtrusive validation js file in Main view not in partial view "
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
"Consider placing all JS code in Main View.
one more point instead of using HTML.BeginForm, try using Ajax.BeginForm
Sample Razor/HTML code ( Main View)
Partial View;
Required JS files in Main View
Source: https://qawithexperts.com/article/asp.net/validate-pop-up-modal-using-ajaxbeginform-in-c-mvc/52
You can also check complete working sample or download it from above link.