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 — user3559349
– user3559349, Commented May 13, 2017 at 23:00
usualy yest but in my case is better to use Ajax.BeginForm() with devexpress controles — DespeiL
– DespeiL, Commented May 14, 2017 at 22:10

DespeiL · Accepted Answer · 2017-05-14 22:16:31Z

2

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();
        }

edited May 14, 2017 at 22:16

answered May 14, 2017 at 22:09

DespeiL

1,04315 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin D. Over a year ago

Thank you! For some reason $('#my_form').data('ajax', 'false') doesn't work but $('#my_form').attr('data-ajax', 'false') does.

Ashiquzzaman · Accepted Answer · 2017-05-14 03:42:06Z

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

Collectives™ on Stack Overflow

ajax form submit as usual form

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related