asp.net mvc - Validate Form with DataAnnotations and JQuery Ajax submission -

i trying send , validate form via jquery ajax. know if possible , how achieve this.

what have?

view:

    @using (html.beginform("index", "home"))     {         <section id="result">             @html.validationsummary(false)         </section>          <section>             @html.labelfor(model => model.isbn)             @html.textboxfor(model => model.isbn)             @html.validationmessagefor(model => model.isbn)         </section>         <section>             @html.labelfor(model => model.booknumber)             @html.textboxfor(model => model.booknumber)             @html.validationmessagefor(model => model.booknumber)         </section>         <section>             @html.labelfor(model => model.title)             @html.textboxfor(model => model.title)             @html.validationmessagefor(model => model.title)         </section>         <section>             @html.labelfor(model => model.releasedate)             @html.textboxfor(model => model.releasedate)             @html.validationmessagefor(model => model.releasedate)         </section>          <button type="submit">go</button>     } 

my javascript:

    <script>             $(function () {                     $('form').submit(function () {                             if ($(this).valid()) {                                     $.ajax({                                             url: this.action,                                             type: this.method,                                             data: $(this).serialize()                                     })                                     .success(function (result) {                                             $('#result').html(result);                                     })                                     .error(function () {                                             alert("oops! critical stuff");                                     });                             }                              return false;                     });             });     </script> 

at last, controller:

    [httppost]     public actionresult index(book model)     {         if (!modelstate.isvalid)             return view(model);          if (model.title.isempty())         {             modelstate.addmodelerror("title", "what doing?? title can't emtpy!");             return view(model);         }          return view();     } 

so, case study. wanted have dataannotations working on client side, are. , when post form server, perform more validations via modelstate.isvalid , modelstate.addmodelerror , have shown client.

is possible accomplish this?

think doing:

1. you submit form controller via ajax
2. you return entire view controller (along layouts), , insert #result. have 2 copies of view.

to fix - make use of partial view.

i.e. create new partial _formpartial.chstml , place form contents in it.

@html.validationsummary(false)     <section>         @html.labelfor(model => model.isbn)         @html.textboxfor(model => model.isbn)         @html.validationmessagefor(model => model.isbn)     </section>     <section>         @html.labelfor(model => model.booknumber)         @html.textboxfor(model => model.booknumber)         @html.validationmessagefor(model => model.booknumber)     </section>     <section>         @html.labelfor(model => model.title)         @html.textboxfor(model => model.title)         @html.validationmessagefor(model => model.title)     </section>     <section>         @html.labelfor(model => model.releasedate)         @html.textboxfor(model => model.releasedate)         @html.validationmessagefor(model => model.releasedate)     </section>      <button type="submit">go</button> 

then change view use partial view:

@using (html.beginform("index", "home")) {     <section id="result">         @html.partial("_formpartial")      </section>        } 

and finally, update return type of controller use partialview instead of view.

[httppost] public actionresult index(book model) {     if (!modelstate.isvalid)         return partialview("_formpartial", model);      if (model.title.isempty())     {         modelstate.addmodelerror("title", "what doing?? title can't emtpy!");         return partialview("_formpartial", model);     }      return view(); } 

alternatively, @ using ajax.beginform heavy lifting you.