JQuery ajax get and post method to call api in Asp.Net MVC

This article will explain jquery ajax get and post method and also how to make ajax httpGet request with url parameter.

1. Below is a simple jquery script to call REST api using get method.

 $.ajax({
            url: "/Home/GetItem",
            cache: false,
            type: "GET",
            dataType: "json",            
            success: function (response) {
                if (response) {
                    //display items in html
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

MVC Controller Method:

[HttpGet]
        public JsonResult GetItems()
        {
            var dbItems = db.Items.ToList();
            
            return Json(new { Items = dbItems });
        }

2. JQuery ajax get method passing url param, item id. Note we have added dataType as 'json' in the below ajax method to get response in json format.

var data = { id: id };

 $.ajax({
            url: "/Home/GetItem",
            cache: false,
            type: "GET",
            data: data,
            dataType: "json",            
            success: function (response) {
                if (response) {
                    //display current item.
               }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                 alert(errorThrown);
            }
        });

Controller method: While making ajax request with parameter as string or integer id, parameter name 'id' must be of same case as it is case sensitive you might not get value.

[HttpGet]
        public JsonResult GetItem(int id)
        {
            var dbItem = db.Items.Where(b => b.Id == id).FirstOrDefault();
    return Json(new { Item = dbItem });
        }

3. JQuery ajax post method, add content-type as 'application/json; charset=utf-8;' and stringify data while sending ajax request using JSON.stringify().

var data = {
                "ItemName": $('#ItemName').val()
            }
 $.ajax({
            url: "/Home/SaveItem",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ "item": data},
            dataType: "json",
            success: function (response) {
                if (response) {
                    alert(response.Message );
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                 alert(errorThrown);
            }
        });

MVC Controller Method:

[HttpPost]
        public JsonResult SaveItem(item item)
        {
            var dbItem = dbItemList.Where(c => c.Id == item.Id).FirstOrDefault();
                        if (dbItem == null)
                        {

                            item.UserName = User.Identity.Name;

                            db.Items.Add(item);

                            errorMessage = "Add Item successfully.";
                            status = true;
                        }
                        else if (dbItem != null)
                        {
                            dbItem.ItemName = item.ItemName;
                            errorMessage = "Update Item successfully.";
                            status = true;
                        }
db.SaveChanges();
    return Json(new { Valid = status, Message = errorMessage });
        }