HTML.BeginForm does not call controller asp.net MVC 4

Question

I have a partial view. It's Model is a Book object and Customer object

I've tried to use a input type=submit button with the following:

@using (Html.BeginForm("GetBooks", "Home", FormMethod.Post, new  { id = "formId" }))
{

}

I can get the user entered values with var values = $('#formId').serialize();

But when clicking on the button, the controller does not get called.

So, I decided to use an jquery ajax() method and it appears to work fine, by calling the controller and passing in the model. However, it's not sending the updated model (updated with the user entry) to the controller.

example of ajax :

$.ajax({          
           url: "/Home/GetBooks",
            data:  JSON.stringify({ model: @Html.Raw(Json.Encode(Model)) }) ,
           type: 'POST', 
           contentType: 'application/json',

            beforeSend:function(){  
                $("#loading").show();
            },
            success: function(data) {    
                append(data)
            },
            error: function (e, textStatus, jqXHR) {
                $("#loading").hide();
                alert(e.statusText);
            },           
            complete:function(){               
                $("#loading").hide();
            }

        });

I need to re-assign the user entered values to the Book Model before I call the Ajax method, but I am unsure how to do this. I am passing both Book and Customer Model back to the controller as seen in

JSON.stringify({model: @Html.Raw(Json.Encode(Model))})

controller:

[HttpPost]
public ActionResult GetBooks(ModelObjects model)
{

}

Model:

public class ModelObjects
    {
        public MVC4App.Models.Customer Customer{ get; set; }
        public MVC4App.Models.Book Book{ get; set; }
    }

 public class Customer
    {
        public string FirstName{ get; set; }
        public string LastName{ get; set; }

    }

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

Model reference in the View:

@model MVC4App.Models.ModelObjects

Thanks in advance!

Major Byte · Accepted Answer · 2013-05-13T18:52:46.537

1

What you are doing with the ajax approach is almost correct, except for the

data:  JSON.stringify({ model: @Html.Raw(Json.Encode(Model)) })

which will result in a hard coded json that you keep posting back. Thing is that @Html.Raw(Json.Encode(Model)) will be a string generated server side, when rendering the view (just take a look at the webpage's source).

So, change

url: "/Home/GetBooks",
data:  JSON.stringify({ model: @Html.Raw(Json.Encode(Model)) }) ,
type: 'POST', 
contentType: 'application/json',

to something similar like:

url: "/Home/GetBooks",
data: $('#formId').serialize(), // or JSON.stringify($('#formId').serialize())
type: 'POST', 
contentType: 'application/json',

Then you'll be posting the values the user enter.

edited May 13 '13 at 18:52

answered May 13 '13 at 18:23

Major Byte

4,101
3
26
33

This still doesn't explain why the input button doesn't work, but for that you'd need to update you question with the model you use in your view and in the controller action. – Major Byte May 13 '13 at 18:26
yes, I have : var values = $('#formId').serialize(); Is there a way to take values and update the model with it in Jquery, something to the effect of: @Model.Customer = values; so that when I do send: JSON.stringify({ model: @Html.Raw(Json.Encode(Model)) }) , It will be updated with the correct values. – alpha May 13 '13 at 18:47
@alpha, I've updated the answer so it explains better what to to. – Major Byte May 13 '13 at 18:53
My form only has html.helpers for Customer. So when I use the $('#formId').serialize(), I get the user entered values for Customer object. However, my controller takes a model of Customer and Book objects. I guess I could delete the Book object and just create it again in the Controller instead of trying to pass it in. Thanks. Your solution is another option for me. – alpha May 13 '13 at 18:59

score 0 · Answer 2 · answered May 13 '13 at 17:22

0

Install Fiddler (http://fiddler2.com/get-fiddler) and see if there is a request being made when you click your submit button. If not then you have a client side problem for example your submit button is outside of your using BeginForm statement.

If the request is being made then you need to look at your controller action route and if it is correct. Also make sure your action is decorated with HttpPost attribute and that it accepts the proper model parameter. Can you post your controller action code here?

In any case Fiddler is your best friend it will tell you what's failing and where...

answered May 13 '13 at 17:22

Marko

12,543
10
48
58

Hi, yes I do have the HttpPost attribute with model parameter and used Fiddler and controller is not being called(request not made) – alpha May 13 '13 at 17:47
Is your submit button inside the using BeginForm statement? Do you have any javascript/jquery code that overwrites the submit button behavior to where it doesn't perform submit? – Marko May 13 '13 at 17:53
button is inside the begin form and my input button: – alpha May 13 '13 at 17:55
since I can't seem to submit it using BeginForm.. is it possible to assign the user entry values to the Model with jquery? – alpha May 13 '13 at 18:00
Can you post your Model that you're using on both action and the form? – Marko May 13 '13 at 18:00
Looks like you need a name attribute on your input tag: http://stackoverflow.com/questions/5663385/asp-net-mvc-html-submit-button-not-sent-with-post – Marko May 13 '13 at 18:34
name attribute doesn't help either. – alpha May 13 '13 at 18:45

score 0 · Answer 3 · answered May 15 '13 at 06:44

We know that .BeginForm() extension method will create a form tag thus associating form level methods to the page. I have been wondering what exactly is the difference between both Html.BeginForm() and Ajax.BeginForm() methods in MVC3. Read many blogs, and everyone says only one thing, In Ajax forms, forms are submitted asynchronously using Javascript. So, this post is to verify the same thing. http://www.codeproject.com/Articles/429164/Html-BeginForm-vs-Ajax-BeginForm-in-MVC3

HTML.BeginForm does not call controller asp.net MVC 4

3 Answers3