controller doesn't get hit by jquery ajax : asp.net mvc 5

Question

I have the below form

<form class="regForm" id="frmRegistration" method="post">
<h3>Register Customer Patient</h3>
@Html.ValidationSummary(true)

@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName, new { @class = "form-control cfield", required = "required", autofocus = "autofocus" })
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName, new { @class = "form-control cfield", required = "required" })

@Html.LabelFor(m => m.MiddleName)
@Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.BirthDate)
@Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control cfield", required = "required" })
@Html.LabelFor(m => m.Address)
@Html.TextBoxFor(m => m.Address, new { @class = "form-control cfield", required = "required" })
<button type="submit" id="btnSave" class="btnreg btn btn-primary form-control">REGISTER</button>
<button type="button" onclick="clearTexts();" class="btnClear btn btn-danger form-control">CLEAR</button>

Below is the controller action method which I want to trigger/call

 [HttpPost]
    public ActionResult AddCustomerPatient(Customer _Customer)
    {
        using (var db = new DCDBEntities())
        {
            db.Customers.Add(_Customer);
            db.SaveChanges();
        }

        return  Json(new {registeredCustomer="ok"});

    }

Below is my jquery ajax which doesn't work

  $("#btnSave").click(function () {
            e.preventDefault();
            var PotentialCustomer = {

                "LastName": 'A',
                "FirstName": 'A',
                "MiddleName": 'A',
                "BirthDate": 'A',
                "Address": 'A'

            };


            $.ajax({
                type: 'POST',
                url: '/Registration/AddCustomerPatient',
                data: 'JSON.stringify(PotentialCustomer),',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    alert("Successfully Registered Customer/Patient!");

                }
            });
        });

Problem 1.) The controller action method is not getting hit ( I placed a breakpoint)

Problem 2.) How can I pass the Model to the controller action method and save it via linq to entities.

I've been searching and tried a lot but still not able to get it done.

Below is the routconfig

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );

I tried to put a breakpoint in the GET or first method of my controller , whenever I click the "REGISTER" button it gets hit and not the [HttpPost] , why is that?

  public ActionResult RegisterCustomerPatient()
    {
        return View();
    }

    [HttpPost]
    public ActionResult AddCustomerPatient(Customer _Customer)
    {
        using (var db = new DCDBEntities())
        {
            db.Customers.Add(_Customer);
            db.SaveChanges();
        }

        return  Json(new {registeredCustomer="ok"});

    }

do i need to create a view for HTTPPOST action method?

First, it needs to be $("#btnSave").click(function (e) { so e.preventDefault() works (although it really should be $('#frmRegistration').submit(... And all it needs to be is data: $('#frmRegistration').serialize(), and delete the contentType option — user3559349
– user3559349, Commented Mar 21, 2017 at 10:30
I got a different error now, when I click the REGISTER button the url in the browser is this localhost:51084/Registration/RegisterCustomerPatient, and that is not the action method i have specified in jquery ajax function why it is redirecting to that ? — Francis Saul
– Francis Saul, Commented Mar 21, 2017 at 11:03
Because you have not done what I said in the first comment - function (e), not function () — user3559349
– user3559349, Commented Mar 21, 2017 at 11:05

Surya · Accepted Answer · 2017-03-21 10:39:01Z

1

 var formData = $('#frmRegistration').serialize();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("AddCustomerPatient", "Registration")',
            data: formData,
            success: function (response) {
                alert("Successfully Registered Customer/Patient!");
             }
         });

better to serialize the form data and send it to controller action method

answered Mar 21, 2017 at 10:39

Surya

1011 silver badge8 bronze badges

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

2 Comments

Surya Over a year ago

<form class="regForm" id="frmRegistration" method="post"> instead this one use MVC Razor engine form @{Html.BeginForm("AddCustomerPatient", "Registration", FormMethod.Post)}; and don't write any jquery save click event

Francis Saul Over a year ago

I already achieved that, what I want to try is the jquery ajax

Deepu Dileep · Accepted Answer · 2017-03-21 10:57:34Z

1

data: 'JSON.stringify(PotentialCustomer),'

Please remove single quotes . It will be fine data: JSON.stringify(PotentialCustomer),

answered Mar 21, 2017 at 10:57

Deepu Dileep

112 bronze badges

6 Comments

Francis Saul Over a year ago

just a string, I got a different error now, when I click the REGISTER button the url in the browser is this localhost:51084/Registration/RegisterCustomerPatient, and that is not the action method i have specified in jquery ajax function why it is redirecting to that ?

Deepu Dileep Over a year ago

please share view page

Francis Saul Over a year ago

the view is in the above post. "form"

Deepu Dileep Over a year ago

Ok .Did you add Html.Begin in View page

Deepu Dileep Over a year ago

Did you check weather the click event is working or not using an alert.

|

Kaushal · Accepted Answer · 2017-03-21 11:10:29Z

1

Problem is line

 data: 'JSON.stringify(PotentialCustomer),',

and

 click(function () {
 // e is undefined here. Add e as parameter in function.
    e.preventDefault();

JSON.stringify should be used as funtion not string. In above it is used as string. Change it to following (assuming all fields are string in model)

$("#btnSave").click(function (e) {
        e.preventDefault();
        var PotentialCustomer = {

            "LastName": 'A',
            "FirstName": 'A',
            "MiddleName": 'A',
            "BirthDate": 'A',
            "Address": 'A'

        };


        $.ajax({
            type: 'POST',
            url: '/Registration/AddCustomerPatient',
            data: JSON.stringify(PotentialCustomer),
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (response) {
                alert("Successfully Registered Customer/Patient!");

            }
        });

edited Mar 21, 2017 at 11:10

answered Mar 21, 2017 at 10:42

Kaushal

1,3692 gold badges9 silver badges11 bronze badges

4 Comments

Francis Saul Over a year ago

tried it but not working, it's not hitting the breakpoint in controller action

Kaushal Over a year ago

Could you please cross check route configuration? If url format is correct "/Registration/AddCustomerPatient". Also, please update question with controller class and route configuration.

Francis Saul Over a year ago

Hi please see above routeconfig. Not sure what to do with that

Kaushal Over a year ago

I tried running your code, it gives error on e.preventDefault(); I have updated answer with fixed version

RAHUL S R · Accepted Answer · 2017-03-21 11:17:38Z

1

there is a , inside data

data: 'JSON.stringify(PotentialCustomer),',

next am not sure but try

data:{'_customer':'PotentialCustomer'}; instead of data.strinify

answered Mar 21, 2017 at 11:17

RAHUL S R

1,5891 gold badge12 silver badges22 bronze badges

Comments

Trung Duong · Accepted Answer · 2017-03-21 11:30:21Z

Problem 1.) The controller action method is not getting hit

I think it is caused by wrong URL of ajax post. You could try to open Network tab of Developer Tool on Browser to confirm that. It you ajax post return HTTP status 404, you should update the URL of your ajax post.
One way to get correct URL is using the @Url.Action to add URL attribute of your submit button.

<button type='button' id='btnSave' data-url='@Url.Action("AddCustomerPatient", "Registration")' class='btnreg btn btn-primary form-control'>REGISTER</button>

Then you could get this value inside click function like this

$("#btnSave").data('url')

Problem 2.) How can I pass the Model to the controller action method and save it via linq to entities.

After getting correct URL, you should update your click function

$("#btnSave").click(function () {
    var formData = $('#frmRegistration').serialize();
    $.ajax({
        type: 'POST',
        url: $("#btnSave").data('url'),
        data: formData,
        success: function (response) {
            alert("Successfully Registered Customer/Patient!");
         }
     });
 });

Alternative method
I guess you want to make an ajax post instead of submit form, so you could try another simple method as below.

The razor code

@using (Html.BeginForm("AddCustomerPatient", "Registration", FormMethod.Post, new { id = "frmRegistration"))
{
    ...
    <button type="submit" id="btnSave" class="btnreg btn btn-primary form-control">REGISTER</button>
    <button type="button" onclick="clearTexts();" class="btnClear btn btn-danger form-control">CLEAR</button>   
}

The script

$(function () {
    $("#frmRegistration").on('submit', function (e) {

        e.preventDefault(); // prevent the form's normal submission

        var $form = $(this);
        var dataToPost = $form.serialize();

        $.post($form.attr('action'), dataToPost)
            .done(function(response, status, jqxhr){ 
                // this is the "success" callback
            })
            .fail(function(jqxhr, status, error){ 
                // this is the ""error"" callback
            });
    })
})

Usman · Accepted Answer · 2017-03-22 05:03:54Z

0

your ajax request should be like this

 $("#btnSave").click(function (e) { //added e
            e.preventDefault();
            var _Customer= {     //changed the name to name of parameter of action

                "LastName": $("#LastName").val(),
                "FirstName": $("#FirstName").val(),
                "MiddleName": $("#MiddleName").val(),
                "BirthDate": $("#BirthDate").val(),
                "Address": $("#Address").val()

            };


            $.ajax({
                type: 'POST',
                url: '/Registration/AddCustomerPatient',
                data: JSON.stringify(_Customer),    //removed '' and corrected the format
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    alert("Successfully Registered Customer/Patient!");

                }
            });
        });

JSON.stringify is a function so it should not be placed inside '' and JSON.stringify(_Customer) object name should match the name of parameter of Action which is Customer _Customer and also you used e.preventDefault(); without adding e in parameter

edited Mar 22, 2017 at 5:03

answered Mar 21, 2017 at 10:37

Usman

4,7032 gold badges19 silver badges36 bronze badges

14 Comments

Francis Saul Over a year ago

what is the difference you've made?

Francis Saul Over a year ago

thanks! I got a different error now, when I click the REGISTER button the url in the browser is this localhost:51084/Registration/RegisterCustomerPatient, and that is not the action method i have specified in jquery ajax function why it is redirecting to that ?

Usman Over a year ago

did you remove e.prevent default? because it seems like it is submitting the to default action and also did you place a breakpoint to check is it hitting the action ? @FrancisSaul

Usman Over a year ago

@FrancisSaul and remove type="submit" you dont need this since you are using ajax

Francis Saul Over a year ago

already remove the type="submit" and the e.prevenDefault but i got a a different action method in the address bar it's the RegisterCustomerPatient and not the AddCustomerPatient method

|

Collectives™ on Stack Overflow

controller doesn't get hit by jquery ajax : asp.net mvc 5

6 Answers 6

2 Comments

6 Comments

4 Comments

Comments

Comments

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

6 Comments

4 Comments

Comments

Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related