CODEWITHSUNDEEP
asp.net-mvc-4
alpha
alpha

Reputation: 501

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

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!

Upvotes: 2

Views: 2943

Answers (3)

Shyam sundar shah
Shyam sundar shah

Reputation: 2523

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

Upvotes: 0

Major Byte
Major Byte

Reputation: 4101

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.

Upvotes: 1

Marko
Marko

Reputation: 13263

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...

Upvotes: 0

Related Questions