ajax form submit as usual form

Question

I have some ajax form

 @using (Ajax.BeginForm("Action1", "Controller",
                                     new AjaxOptions
                                     {
                                         HttpMethod = "POST",

                                         UpdateTargetId = "content2",
                                         InsertionMode = InsertionMode.Replace,

                                     },
                                     new
                                     {
                                         id = "my_form",
                                         @class = "options_form",
                                         style = "height: 100%; width: 100%; "
                                     }))
    {
        <div id="content2">
            @Html.Partial("_FormPartial", Model)
        </div>
    }

And two buttons in my _FormPartial that calls two js functions

     function onAct1() {

           $('#my_form').attr('action', '@Url.Action("Action1", "Controller", new {area= "Test" })')
           $('#my_form').submit();
       }

        function onAct2(s, e) {



           $('#my_form').attr('action', '@Url.Action("Action2", "Controller", new {area= "Test" })')
 $('#my_form').submit();
        }

So for Act2 i want to use AjaxForm behavior byt for Act1 i want to make a simple page refresh and redirect to other page in controller.

So is there any way except changing form Url also change it behavior ?

Get rid of `Ajax.BeginForm()` and use the jquery `.ajax()` methods which will give you far more flexibility — , May 13 '17 at 23:00
usualy yest but in my case is better to use Ajax.BeginForm() with devexpress controles — DespeiL, May 14 '17 at 22:10

DespeiL · Accepted Answer · 2017-05-14T22:16:31.547

I found 'data-ajax' attribute in my form so I leave everythink like it was and just change 'data-ajax attribute in js.However thx everyone who tried to helped.

function onAct1() {
$('#my_form').attr('data-ajax', 'false')
$('#my_form').attr('action', '@Url.Action("Action1", "Controller", new {area= "Test" })')
           $('#my_form').submit();
       }




 function onAct2(s, e) {

 $('#my_form').attr('data-ajax', 'true') //not nessesary becouse after Act1 the page will be refreshed and data-ajax  will be true by default
 $('#my_form').attr('action', '@Url.Action("Action2", "Controller", new {area= "Test" })')
 $('#my_form').submit();
        }

Thank you! For some reason `$('#my_form').data('ajax', 'false')` doesn't work but `$('#my_form').attr('data-ajax', 'false')` does. — Martin D., Dec 01 '20 at 22:32

score 1 · Answer 2 · answered May 14 '17 at 03:42

I think you need to use Html.BeginForm rather than Ajax.BeginForm and you Act2 methode you need to call jQuery ajax.So as per your requirement you need something like below example:

Example:

Razor:

 @using (Html.BeginForm("Action1", "Controller", new {area ="Test"},FormMethod.Post,new { id = "my_form", @class = "options_form",style ="height: 100%; width: 100%; "}))
    {
        <div id="content2">
            @Html.Partial("_FormPartial", Model)
        </div>
    }

Script:

     function onAct1() {
           $('#my_form').submit();
       }

   function onAct2(s, e) {
    $("#my_form").submit(function(event) {
            $.ajax({
                type: 'POST',
                url: '@Url.Action("Action2", "Controller", new {area= "Test" })',
                async: false,//change as per your requirement
                processData: false,//change as per your requirement
                contentType: false,//change as per your requirement
                dataType: 'json',//change as per your requirement
                data: $("#my_form").serialize()//Pass your form data or else
            }).done(function (json) {
                //Success
            }).fail(function (json) {
                //Error
            });
      });
    });
}

I delete $("#my_form").submit(function(event) { } and make function onAct2 as onClick event of button. So i have request but in conttroller i got object with null values instend of values from form — DespeiL, May 14 '17 at 21:36
Please check : http://stackoverflow.com/questions/21439529/jquery-ajax-call-click-event-submit-button — Ashiquzzaman, May 15 '17 at 02:15

ajax form submit as usual form

2 Answers2