Binding parameter issue when post JSON data to MVC controller with hidden field

Question

I am a JSON object in a form which allows users to add options. I want to post this JSON to a ASP.NET MVC controller as a hidden field WITHOUT Ajax. I researched a couple of posts and tried to do this, but without luck. What I have done so far is:

Backend Parameter Object

    public class Person 
    { 
        public string Name { get; set; }

        public string Email { get; set; }
    }

Backend Controller

    public class BookingController : Controller
    {
        [HttpPost]
        public ActionResult AddPerson(Person person)
        {
            return View();
        }

Frontend Javascript & Html

    <form action="/booking/addperson" method="post">
      <input type="hidden" name="person" id="person" />
      <button type="submit" class="btn btn-sm btn-primary">Submit</button>

      <script>
          var person = { "Name": "ML", "Email": "[email protected]" }
          $("#person").val(JSON.stringify(person));
      </script>
    </form>

Unfortunately, when I submitted the form on step 3, the parameter in the controller was null, but I could find the actually data in the Request object inside the controller. (see screenshot below)

Does anyone know what do I miss to actually bind the JSON object to the controller parameter when posting a form? Thanks!

Hi,Any update about this case?

Yinqiu
– Yinqiu

2021-04-27 06:40:12 +00:00
Commented Apr 27, 2021 at 6:40 — Yinqiu
– Yinqiu, Commented Apr 27, 2021 at 6:40

Yinqiu · Accepted Answer · 2021-04-27 07:38:36Z

1

var person = { "Name": "ML", "Email": "[email protected]" } $("#person").val(JSON.stringify(person));

This code will change #person's val as a string,but you use the object type to accept in the background.So it will be null.

You can change your AddPerson method as follow:

[HttpPost]
    public ActionResult AddPerson(string person)
    {
        Person model = JsonConvert.DeserializeObject<Person>(person);
        return View();
    }

Update

Or you can change your view code like below:

<form action="/booking/addperson" method="post">
   <input type="hidden" name="name" id="name" />
   <input type="hidden" name="email"  id="email"/>
  <button type="submit" class="btn btn-sm btn-primary">Submit</button>

  <script>
      var person = { "Name": "ML", "Email": "[email protected]" }
      $("#name").val(person.Name);
      $("#email").val(person.Email);
  </script>
</form>

edited Apr 27, 2021 at 7:38

answered Apr 27, 2021 at 6:13

Yinqiu

7,2201 gold badge9 silver badges15 bronze badges

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

4 Comments

seanbun Over a year ago

Thanks for you answer. You solution would work, however, it is not ideal and requires to change the parameter object type. I am wondering if there is a way to bind the object instead of using string.

Yinqiu Over a year ago

Hi @seanbun,you can see my update answer.

seanbun Over a year ago

In other words, you reckon there is no way we can post the JSON object to the controller?

Yinqiu Over a year ago

Yes,Unless you use ajax,You can see this thread.

Collectives™ on Stack Overflow

Binding parameter issue when post JSON data to MVC controller with hidden field

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related