Posting form without @HTML.Beginform and using Jquery(ajax) in asp.net MVC

Question

How can I fill out a form without using @HTML.Beginform and by using JQuery Ajax instead? Right now I tried:

    var postData = { form1: username, form2: password };

    $.ajax({
        type: "POST",
        url: '/Controller/Method',
        data: postData,
        dataType: "json",
        traditional: true
    });

But after posting, the browser does not navigate to the correct view. Of course I have return View() correctly in controller. Using Fiddler I see that it's correctly posted and the response is correct too...

Do I have to use @HTML.Beginform or can I do it with Ajax?

Where are you handling the response?

Dave Zych
– Dave Zych

2013-08-17 21:50:08 +00:00
Commented Aug 17, 2013 at 21:50 — Dave Zych
– Dave Zych, Commented Aug 17, 2013 at 21:50

Community · Accepted Answer · 2020-06-20 09:12:55Z

20

Your can use either a raw HTML <form> tag or the @HTML.BeginForm helper. Here is an example using just HTML

Complete solution:

<form action"/Controller/Method" method="POST" id="signInForm">
    <input type="text" name="form1" />
    <input type="text" name="form2" />
    <input type="submit" value="Sign in" />
</form>

$( function() {
    $( 'signInForm' ).submit( function( evt ) {
        //prevent the browsers default function
        evt.preventDefault();
        //grab the form and wrap it with jQuery
        var $form = $( this );
        //if client side validation fails, don't do anything
        if( !$form.valid() ) return;
        //send your ajax request
        $.ajax( {
            type: $form.prop( 'method' ),
            url: $form.prop( 'action' ),
            data: $form.serialize(),
            dataType: "json",
            traditional: true,
            success: function( response ) {
                document.body.innerHTML = response;
            }
        });
    });
});

I recommend using @Url.Action to set the URL of your form action. This way routing can generate your URL.

<form action"@Url.Action("Method", "Controller")" method="POST" id="signInForm">
    <input type="text" name="form1" />
    <input type="text" name="form2" />
    <input type="submit" value="Sign in" />
</form>

It is slightly more advanced, but I would try using something like Take Command to manage your jQuery Ajax calls.

Disclaimer, I am a contributor to the TakeCommand project.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 17, 2013 at 22:16

Paul

12.4k4 gold badges52 silver badges58 bronze badges

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

4 Comments

Dermot Over a year ago

Thank you but this isn't the complete solution. What does the server side method look like? I run this but I continue to receive null data on the server side. :/

Paul Over a year ago

@Dermot In this case, the server action would look something like this: public ActionResult Method(string form1, string form2)

Dermot Over a year ago

Hmm, that's what I had but it still wasn't working. I'll try it with a fresh head tomorrow and if I can't get it working will post a new question. Thanks for the reply.

usefulBee Over a year ago

The correct action code: action="@Url.Action("Method", "Controller")"

haim770 · Accepted Answer · 2013-08-17 22:03:25Z

When you're using @Html.BeginForm, the HTML output is:

<form method="POST" action="/Controller/Method">

And when you submit that form, the browser handles it just like another page navigation (only using POST method) hence the response is loaded into the parent frame.

But, when you're initiating an Ajax request, it's up to you to handle the response from the server (typically using a callback function).

If you want to simulate the regular form submission behavior, it would be something like:

$.ajax({
    type: "POST",
    url: '/Controller/Method',
    data: postData,
    dataType: "json",
    traditional: true,
    success: function(response)
    {
        document.body.innerHTML = response;
    }
});

This would not replace the entire page content with the response (only the BODY contents) but in most cases it will be fine.

Lars Anundskås · Accepted Answer · 2013-08-17 22:04:52Z

1

This will do a xhr post to the server and return the view as data (response) It will not navigate, if it returns html, you need to set a proper datatype in your request to tell that you expect html back from the server:

Given your action returns html, you can put the returned html on your page in your success function.

postData = "{'ID':'test'}";
$.ajax({
    type: "POST",
    url: '/Home/Test',
    data: postData,
    dataType: 'html',
    contentType: 'application/json',
    traditional: true,
    success: function (data) {
        $("#yourdomelement").html(data);
    }
});

In your action;

public ActionResult Test([FromBody]PostData id)
{
    return Content("<p>hello</p>");
}

answered Aug 17, 2013 at 22:04

Lars Anundskås

1,3551 gold badge10 silver badges25 bronze badges

Collectives™ on Stack Overflow

Posting form without @HTML.Beginform and using Jquery(ajax) in asp.net MVC

3 Answers 3

Complete solution:

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Complete solution:

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related