How model bind Javascript FormData with Asp.net Controllers Model

Question

Is it possible to automatically bind ASP.NET controllers model with an ajax request that submits data as FormData.

in my provided example I'm required to use HttpContext.Current.Request.Form["property_name"] to receive data because if I provide a model that is identical to the submitted form data, all values are equal to null;

or does ASP.NET model binding only work on JSON requests ?

Simple code bellow:

View:

@using (Html.BeginForm("Post", "Test", FormMethod.Post, new { @class="test-form"}))
{
    <input type="text" name="firstName"/>
    <input type="text" name="lastName"/>
    <button type="submit">Submit</button>
}

Scripts:

<script>
    $('.test-form').on('submit', function (e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            url: "@Url.Action("TestPost", "Test")",
            method: "POST",
            data: formData,
            processData: false,
            success: function(e){
            }
        });
    });
</script>

Controller:

    [HttpPost]
    public ActionResult TestPost()
    {
        var firstname = HttpContext.Current.Request.Form["firstName"];
        var lastName =  HttpContext.Current.Request.Form["lastName"];
        return PartialView("TestPost");
    }

Does Not Work Controller:

   public class User
{
    public string firstName { get; set; }
    public string lastName { get; set; }
}

   [HttpPost]
    public ActionResult TestPost(User model) //model values are null
    {

        return PartialView("TestPost");
    }

use Ajax.BeginForm for more information check this link hanselman.com/blog/ASPNETMVCPreview4UsingAjaxAndAjaxForm.aspx — rashfmnb
– rashfmnb, Commented Apr 12, 2016 at 15:31
@Musa it did do the trick, awsome. Care to explain why/how ?(I will try to google myself but..) — Stralos
– Stralos, Commented Apr 12, 2016 at 15:36
please see this link stackoverflow.com/questions/21766348/… — rashfmnb
– rashfmnb, Commented Apr 12, 2016 at 15:40

Musa · Accepted Answer · 2016-04-12 16:04:05Z

4

When you use a FormData object with ajax the data is sent as multipart/form-data and the content type header is set automatically for you with the correct boundary.
You can override the content type and set tit to whatever you want, which is what happens here.
You might be thinking well I didn't do it, well you good friend jQuery did it for you. It set the default content type for $.ajax for you (application/x-www-form-urlencoded) which pretty much craps up the request.
To stop this action i.e. to stop jQuery from setting a content type header you have to set the contentType parameter to false.

answered Apr 12, 2016 at 16:04

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Collectives™ on Stack Overflow

How model bind Javascript FormData with Asp.net Controllers Model

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related