asp.net mvc - Partial View - client validation is not working with jquery ajax post -
in index page show list of employees, when user click on edit link show edit view.
this edit view renders partial view (_editpartial) show different fields edititable.
when user click on save button want make ajax post call.
i want validate inputs before posting data server. tried using unobtrusive validations validation not triggering @ me. following code snippet.
clientvalidationenabled & unobtrusivejavascriptenabled enabled in web.config.
code snippet
partial view code
@model webapplication1.models.employee <div id="mypartial" class="form-horizontal"> <h4>employee</h4> <hr /> @html.validationsummary(true) @html.hiddenfor(model => model.id) <div class="form-group"> @html.labelfor(model => model.name, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.name) @html.validationmessagefor(model => model.name) </div> </div> <div class="form-group"> @html.labelfor(model => model.age, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.age) @html.validationmessagefor(model => model.age) </div> </div> <div class="form-group"> @html.labelfor(model => model.address, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @html.editorfor(model => model.address) @html.validationmessagefor(model => model.address) </div> </div> </div> ===================
edit view code @model webapplication1.models.employee
@{ layout = null; } <!doctype html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>edit</title> <script src="~/scripts/jquery-2.1.0.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnsave").click(function () { $("#btnsave").click(function () { debugger; // reason following function return true if put invalide data var v = $(this).valid(); $.validator.unobtrusive.parse($("#mypartial")); var data = $('form').serialize(); $.ajax({ type: "post", url: "@url.action("edit")", data: data, cache: false }) .fail(function (xhr, textstatus, errorthrown) { alert(xhr.responsetext); }) .success(function () { alert("success"); }); }); }); }); </script> </head> <body> @scripts.render("~/bundles/jquery") @scripts.render("~/bundles/jqueryval") @using (html.beginform()) { @html.antiforgerytoken() @html.partial("_editpartial", model) <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="button" id="btnsave" value="save" class="btn btn-default" /> </div> </div> } </body> </html> ============
action code
[httppost] public actionresult edit([bind(include="id,name,age,address")] employee employee) { // return falase because input data invalid if (modelstate.isvalid) { db.savechanges(); return redirecttoaction("index"); } return view(employee); } ===============
model
public partial class employee { public employee() { this.employeerolemappings = new list(); }
public int id { get; set; } [required] public string name { get; set; } [required] public nullable<int> age { get; set; } [required] public string address { get; set; } }
i check rendered html code. data-val="true" coming differet fields.
can please how use client validation with ajax post call.
you have check if form valid. in code, $(this) references btnsave button, not form.
try changing code this:
<script type="text/javascript"> $(document).ready(function () { $("#btnsave").click(function () { var v = $('form').valid(); var data = $('form').serialize(); $.ajax({ type: "post", url: "@url.action("edit")", data: data, cache: false }) .fail(function (xhr, textstatus, errorthrown) { alert(xhr.responsetext); }) .success(function () { alert("success"); }); }); }); </script>
Comments
Post a Comment