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

JQuery ajax get and post method for calling api, and also get method with url param.

 JQuery   
 

Posted: August 29, 2017. | By: mustafa

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 });
        }

 


related posts

Back to top