CODEWITHSUNDEEP
ajaxasp.net-mvcpost
Khanyisa Fante
Khanyisa Fante

Reputation: 326

Ajax post method returns undefined in .net mvc

I have this ajax post method in my code that returns undefined. I think its because I have not passed in any data, any help will be appreciated.

I have tried passing the url string using the @Url.Action Helper and passing data in as a parameter in the success parameter in the ajax method.

//jquery ajax post method

function SaveEvent(data) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Bookings/SaveBooking")',
                    data: data,
                    success: function (data) {
                        if (data.status) {
                            //Refresh the calender
                            FetchEventAndRenderCalendar();
                            $('#myModalSave').modal('hide');
                        }
                    },
                    error: function (error) {
                        alert('Failed' + error.val );
                    }
                })
            }

//controller action 

    [HttpPost]
    public JsonResult SaveBooking(Booking b)
    {
        var status = false;
        using (ApplicationDbContext db = new ApplicationDbContext())
        {
            if (b.ID > 0) 
            {
                //update the event
                var v = db.Bookings.Where(a => a.ID == a.ID);
                if (v != null)
                {
                    v.SingleOrDefault().Subject = b.Subject;
                    v.SingleOrDefault().StartDate = b.StartDate;
                    v.SingleOrDefault().EndDate = b.EndDate;
                    v.SingleOrDefault().Description = b.Description;
                    v.SingleOrDefault().IsFullDay = b.IsFullDay;
                    v.SingleOrDefault().ThemeColor = b.ThemeColor;
                }
                else
                {
                    db.Bookings.Add(b);
                }
                db.SaveChanges();
                status = true;
            }
        }
        return new JsonResult { Data = new { status } };
    }

Upvotes: 1

Views: 1683

Answers (2)

JamesS
JamesS

Reputation: 2300

Try adding contentType:'Application/json', to your ajax and simply have:

return Json(status);

In your controller instead of JsonResult. As well as this, You will need to pass the data in the ajax code as a stringified Json such as:

data:JSON.stringify(data),

Also, is there nay reason in particular why it's a JsonResult method?

Upvotes: 1

Mahavir Kumbharvadia
Mahavir Kumbharvadia

Reputation: 98

Before the ajax call, you should collect the data in object like,

  var requestData= {
    ModelField1: 'pass the value here',
     ModelField2: 'pass the value here')
  };

Please note, I have only added two fields but as per your class declaration, you can include all your fields.

it should be like :

  function SaveEvent(data) {
            $.ajax({
                type: "POST",
                url: '@Url.Action(Bookings,SaveBooking)', 
                data: JSON.stringify(requestData),
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    if (data.status) {
                        //Refresh the calender
                        FetchEventAndRenderCalendar();
                        $('#myModalSave').modal('hide');
                    }
                },
                error: function (error) {
                    alert('Failed' + error.val );
                }
            })
        }

Upvotes: 2

Related Questions