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-13 18:52:46Z

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, 2013 at 18:52

answered May 13, 2013 at 18:23

Major Byte

4,1013 gold badges28 silver badges33 bronze badges

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

4 Comments

Major Byte Over a year ago

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.

alpha Over a year ago

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.

Major Byte Over a year ago

@alpha, I've updated the answer so it explains better what to to.

alpha Over a year ago

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.

Marko · Accepted Answer · 2013-05-13 17:22:31Z

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, 2013 at 17:22

Marko

13.4k12 gold badges52 silver badges64 bronze badges

7 Comments

alpha Over a year ago

Hi, yes I do have the HttpPost attribute with model parameter and used Fiddler and controller is not being called(request not made)

Marko Over a year ago

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?

alpha Over a year ago

button is inside the begin form and my input button: <input id="btnRun" type="submit" value="View Report" />

alpha Over a year ago

since I can't seem to submit it using BeginForm.. is it possible to assign the user entry values to the Model with jquery?

Marko Over a year ago

Can you post your Model that you're using on both action and the form?

|

Shyam sundar shah · Accepted Answer · 2013-05-15 06:44:26Z

0

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

answered May 15, 2013 at 6:44

Shyam sundar shah

2,5331 gold badge27 silver badges44 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related