javascript - Use ActionLink instead of pure JS for a non-submit button in a form -

i'm looking way display 3 buttons in form using methods htmlhelper or ajaxhelper, is, no javascript in view if @ possible.

the scenario here follows: got form buttons submit, preview , cancel (think "create new blog post"). view far is

@using (html.beginform()) {    <fieldset>        ...                <div id="preview-content"></div>        ...        <input type="submit" value="submit" />        <input type="button" value="preview" id="preview-button"/>        @html.actionlink("cancel", "index", new { area = "blog" }, new { @class = "button" })        ...    </fieldset> }  <script type="text/javascript">    $('#preview-button').click(function () {      $.ajax({          url: '@url.action("preview", new { area = "blog" })',          type: 'post',          data: { title: $('#title').val(), content: $('#content').val() },          success: function (data) {             $('#preview-content').html(data);          }       });    }); </script> 

i haven't been able rid of js using 1 of helper functions far. there couple of similar questions on so, don't want post form when clicking on preview. idea here post content , partial view added inside form.

i could, of course, handle (display , update preview constantly), wondering if there solution problem.

i (like websites) prefer use jquery types of actions, because default , basic usage of these pre-built methods fails in many many ways.

what happens if user walks away hour, automatically logged out , hits submit. silent fail no message user if wrong.

what happens if server side validation fails, message give user?

what happens if user on wifi , gets disconnected network, silent fail no message user wrong?

when right down it, if build out nice interface using ajaxhelper, you've written same amount of code. real difference re-usability , encapsulation. ajaxhelper create number of buttons link javascript methods, if these methods change, have change ajaxhelpers. instead using proper html classes means these changes encapsulated in javascript. ymmv.

for example, write code this:

@using (html.beginform()) {    <fieldset>        ...                <div id="preview-content"></div>        ...        <input type="submit" value="submit" />        <input type="button"                value="preview"                class="js-btn-preview"               data-preview-url="@url.action("preview", new { area = "blog" })"               data-preview-target="#preview-content"/>        @html.actionlink("cancel", "index", new { area = "blog" }, new { @class = "button" })        ...    </fieldset> }  <script type="text/javascript">    $('.js-btn-preview').click(function () {      var url = $(this).data("preview-url");      var target = $(this).data("preview-target");      var form = $(this).closest('form').serialize();      $.ajax({          url: url,          type: 'post',          data: form,          success: function (data) {             $(target).html(data);          }       });    }); </script> 

now have script can post data form, url , take result , embed target. single highly reusable method decoupled html , css.