javascript - Using Ajax helpers Versus using regular html with jQuery code -

i fan of using ajax helpers inside asp.net mvc web applications. used ajax.beginform , ajax.actonlink frequently. came across more standard , more maintainable way manage forms , links. instead of writing such :-

@ajax.actionlink("show servers", "customerserver","customer",     new {customerid = model.accountdefinition.org_id},     new ajaxoptions {  insertionmode = insertionmode.replace,  updatetargetid = "detail"  ,  loadingelementid = "progress",   onsuccess="detailsuccess",    } ) 

i can define regular <a> , define target url follows:-

<a data-modal='' href="@url.action("customerserver","customer", new {customerid = model.accountdefinition.org_id})"   title='getlistcustomer'>  show servers</a> 

and define javascript following, take role of ajax helpers. perform similar calls ajax.actionlink & when form being submitted perform similar call being generated ajax.beginform using bindform(this); function, follows :-

  $(document).on('click', 'a[data-modal]', function (e){             $('#mymodalcontent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {                 $('#mymodal').modal({                     //code goes here..                     handle: ".modal-header"                 });                 $('#mymodalcontent').removedata("validator");                 $('#mymodalcontent').removedata("unobtrusivevalidation");                 $.validator.unobtrusive.parse('#mymodalcontent');                 bindform(this);               $("input[data-autocomplete-source]").each(function () {                   var target = $(this);                     target.autocomplete({                         source: target.attr("data-autocomplete-source"), minlength: 1, delay: 1000, appendto: $("#mymodal")                       });                  });             });             return false;         });       });        });     function bindform(dialog) {         $('form', dialog).submit(function () {             $('.btn.btn-primary,.btn.btn-danger').prop("disabled", "disabled");             $('#progress').show();             if ($(this).valid()) {                  $.ajax({                    //code goes here                                   });                              });                         }                     }                 });             }          });     } }); 

i found second approach more standard , maintainable. because not have hard code ajax setting on each ajax.actionlink ; insertionmode, updatetargetid, onsuccess="detailsuccess",etc on each ajax helper component.

so can advise on pros , cons of using these 2 approaches?

i asked myself more or less same thing. stumbled on interesting microsoft jump start video developing asp.net mvc 4 web applications.

take @ chapter developing asp.net mvc views. find answer in lesson 2: using html helpers.

---

as explain in video, actionlink understands routing, understands model , generates automatically right url if change you're routing. urlaction not, creates url specified in code.

by way that's real advantage of html-helpers. built-in , know what's going on application.