migrating from microsoft Ajax.BeginForm to jquery

Question

i have slowly been moving from microssoft ajax to jquery for all my ajax stuff. the only thing i have left is some forms that are posting over using microsoft ajax by using Ajax.Beingform. This is an asp.net mvc site so submit should call a controller post action.

What is the simplest way to convert this to jquery so i can remove my reference to microsoft ajax.

Answer 1

submit should call a controller post action.

you can simple do the same using plain javascript...

if you add a linkButton

<asp:LinkButton runat="server" id="lnkAddOrder" 
    Text="Add Order" onclick="lnkAddOrder_Click" />

you can see in the Browser Preview, when you over the link button, in your bottom left corner of the browser that it will call a javascript method.

just use that method in you calls!

__doPostBack( [Control ID], [Arguments] );

page example:

http://pastebin.com/JaN9ngH9

---

Edited

Sorry, only now I see MVC, it wasn't there when i read it or I just assume wrongly :-/

Answer 2

1. Download and include the jquery form plugin.
2. Replace Ajax.BeginForm with Html.BeginForm

3. Register the form:

   $(function() {
       $('#formId').ajaxForm();
   });
   

4. Use the success callback to update the DOM once the form has submitted. This step is optional:

   $(function() {
       $('#formId').ajaxForm({
           success: function(data) {
               $('#someplaceholder').html(data);
           }
       });
   });
   

Answer 3

You can modify your forms' submit behavior with jQuery.

Example :

$("#your-form").submit(function() {
    $.post($(this).action, function(data) {
        //do something with the data
    });

  return false;
  //make sure you return false so the form won't be posted regularly
});

Answer 4

It's probably easiest to use the jQuery Form plugin to achieve most of this functionality if you had a form that looks like:-

<%= Ajax.Form(new AjaxOptions {
         Url = theUrl,
         Method = theMethod,
         Confirm = confirmFunction, 
         InsertionMode = InsertionMode.Before,
         OnBegin = onBegin,
         OnComplete = onComplete,
         OnFailure = onFailure,
         OnSuccess = onSuccess,
         UpdateTargetId = elementId,
         LoadingElementId = loadingElementId
         });

This would correspond to a form plug-in call of:-

$("#yourFormId").ajaxForm({
    url : theUrl,
    type : theMethod,
    beforeSubmit : confirmFunction,
    beforeSend : onBegin,
    complete : onComplete,
    success : onSuccess,
    error : onFailure
});

The only issues are replicating the LoadingElementId, UpdateTargetId and InsertionMode properties.

If you want to replicate InsertionMode.Replace you can pass the additional target option to the ajaxForm plug-in. If you want to replicate the remaining functionality you'd have to write your own beforeSend, success and complete event handlers.

Something like the following would simulate a form with InsertionMode.Before, UpdateTargetId = "Test", LoadingElementId = "Loader":-

$("#yourFormId").ajaxForm({
     beforeSend : function() { $("#Loader").show(); },
     complete : function() { $("#Loader").hide(); },
     success: function(result) { $(result).prependTo("#Test"); }
});