Asp.Net Core WebAPI入門整理（二）簡單示例

1、Core WebAPI中的序列化

使用的是Newtonsoft.Json,自定義全局配置處理：

// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    //使用IMvcBuilder 配置Json序列化處理
    services.AddMvc()
        .AddJsonOptions(options =>
        {
            options.SerializerSettings.ContractResolver = new DefaultContractResolver();
            options.SerializerSettings.DateFormatString = "yyyy-MM-dd";
        });
}

2、Core WebAPI中的路由處理使用方法註釋的方式處理，

控制器路由：[Route("api/Menu")]

Action路由：1.根據HttpMethod路由 [HttpPut] 2.根據Template模板路由[HttpGet("{id}")]

Core WebAPI中返回數據處理，提供了更 多的選擇：

1.OKResult，OkObjectResult,返回狀態爲200

注：用OkObjectResult 前臺jquery自動解析爲object對象，不須要進行反序列化處理

2.ContentResult 返回字符串

3.JsonResult 返回Json對象，前臺不須要反序列化處理

4.返回基礎類型和引用類型 ，自動序列化，前臺接收爲object對象等

三 、根據HttpMethod路由示例

1.API定義

/*
    *  API 定義以下
    *  GET     api/menu 獲取菜單列表
    *  POST    api/menu 添加模塊
    *  PUT     api/menu 修改模塊
    *  PATCH   api/menu 修改菜單信息
    *  DELETE  api/menu 刪除模塊
    */ 

2.後臺代碼 ：

MenuModelContext _Context = new MenuModelContext();
/// <summary>
/// 獲取列表
/// </summary>
/// <returns></returns>
[HttpGet]
public IEnumerable<Menu> Get()
{
    List<Menu> list = _Context.Menu.ToList();
    return list;
}
/// <summary>
/// 添加模塊對象
/// </summary>
/// <param name="m"></param>
/// <returns></returns>
[HttpPost]
public bool Add(Model m)
{
    try
    {
        m.AddTime = DateTime.Now;
        _Context.Model.Add(m);
        _Context.SaveChanges();
        return true;
    }
    catch (Exception ex)
    {
        return false;
    }
}
/// <summary>
/// 修改模塊
/// </summary>
/// <param name="m"></param>
/// <returns></returns>
[HttpPut]
public bool Update(Model m)
{
    try
    {
        Model oldModel = _Context.Model.Find(m.ModelId);
        oldModel.ModelName = m.ModelName;
        oldModel.SortNumber = m.SortNumber;
        _Context.SaveChanges();
        return true;
    }
    catch (Exception ex)
    {
        return false;
    }
}
/// <summary>
/// 修改菜單對象
/// </summary>
/// <param name="m"></param>
/// <returns></returns>
[HttpPatch]
public IActionResult Update(Menu m)
{
    try
    {
        Menu oldMenu = _Context.Menu.Find(m.MenuId);
        if (oldMenu == null)
            return NotFound("你要訪問的菜單不存在或已經刪除");
        oldMenu.MenuName = m.MenuName;
        oldMenu.SortNumber = m.SortNumber;
        oldMenu.ModelId = m.ModelId;
        _Context.SaveChanges();
        return Ok();
    }
    catch (Exception ex)
    {
        return Content(ex.Message);
    }
}
/// <summary>
/// 刪除模塊
/// </summary>
/// <param name="ids"></param>
/// <returns></returns>
[HttpDelete]
public IActionResult Delete(string ids)
{
    try
    {
        if (string.IsNullOrEmpty(ids))
            throw new Exception("獲取id參數失敗");
        List<int> idList = ids.Split(',').Select(q => Convert.ToInt32(q)).ToList();
        List<Model> list = _Context.Model.Where(q => idList.Contains(q.ModelId)).ToList();
        _Context.Model.RemoveRange(list);
        int count = _Context.SaveChanges();
        //使用OkObjectResult 前臺jquery自動解析爲object對象，不須要進行反序列化處理
        //返回的不是字符串
        return Ok(new
        {
            msg = $"刪除成功，總共刪除{count}條數據"
        });
    }
    catch (Exception ex)
    {
        //使用ContentResult返回字符串處理
        return Content(ex.Message);
    }
}

View Code

3.jQuery ajax代碼

//Get獲取列表數據
function testOne() {
    $.get(urlHelper.getApi('menu'), {}, function (data) {
        console.info(data);
        var menu1 = new Vue({
            el: '#menu1', data: {
                result: data
            }
        });
    })
}
testOne();
//添加菜單
var example2 = new Vue({
    el: '#example-2',
    data: {
        name:'添加菜單'
    },
    //在 methods 對象中定義方法
    methods: {
        addMenu: function (event) {
            //使用 Post提交添加菜單
            var _this = this;
            this.name = '正在提交...';
            $.post(urlHelper.getApi('menu'), {
                ModelName: '測試菜單5',
                SortNumber:5
            }, function (data) {
                console.info(data);
                _this.name = '提交成功';
            });
        },
        updateModel: function (event) {
            //使用put提交修改模塊
            var _this = this;
            $.ajax({
                url: urlHelper.getApi('menu'),
                type: 'put',
                data: {
                    ModelId: '4',
                    ModelName: '模塊abc',
                    SortNumber: 4
                },
                success: function (data) {
                    console.info(data);
                    if (data == true)
                        alert('修改爲功');
                    else alert('修改失敗');
                }
            });
        }
    }
});
//修改菜單、刪除模塊
var btngroup1 = new Vue({
    el: '#btngroup1',
    data: {
        name: '修改菜單',
        name1: '刪除模塊'
    },
    methods: {
        updateMenu: function (e) {
            var _this = this;
            //使用patch 方式修改菜單
            $.ajax({
                url: urlHelper.getApi('menu'),
                type:'patch',
                data: {
                    MenuID: 1,
                    MenuName: '測試菜單One',
                    SortNumber: 100,
                    ModelID:2
                },
                success: function (data) {
                    console.info(data);
                }
            });
        },
        deleteMenu: function (e) {
            //使用delete 提交方式刪除模塊
            $.ajax({
                url: urlHelper.getApi('menu'),
                type: 'delete',
                data: {
                    ids:[1003]
                },
                success: function (data) {
                    console.info(data);
                },
                error: function (data) {
                    console.info(data);
                }
            });
        }
    }
});

View Code

4、根據HttpMethod的Template路由示例

1.API定義

/*
* API 定義
*  GET     api/menu/{id} 獲取指定ID的菜單對象
*  GET     api/menu/getmodel 獲取模塊列表內容
*/

2.後臺代碼：

[HttpGet("{id}")]
public IActionResult Get(int ID)
{
    Menu m = _Context.Menu.Find(ID);
    if (m == null)
        return NotFound();
    return Json(m);
}
//特別說明：路由中的Template的值不能夠包含斜槓/
[HttpGet("getmodel")]  
public IActionResult GetModel()
{
    List<Model> list = _Context.Model.ToList();
    return Json(list);
}

3.Jquery 的ajax代碼

//其餘Get方式測試
var btngroup2 = new Vue({
    el: '#btngroup2',
    data: {
        name: '獲取菜單對象',
        name1: '獲取模塊列表',
        item: {} //Vue的對象綁定，沒有的狀況下須要一個空對象，否則報錯
    },
    methods: {
        getMenu: function (e) {
            var _this = this;
            //連接地址格式 ：http://localhost:50000/api/menu/1/
            $.get(urlHelper.getApi('menu','1'), { }, function (data) {
                console.info(data);
                _this.item = data;
            });
        },
        getModel: function (e) {
            var _this = this;
            $.get(urlHelper.getApi('menu', 'getmodel'), {}, function (data) {
                console.info(data);
            })
        }
    }
});

更多參考：

Asp.Net Core WebAPI入門整理（一）

Asp.Net Core中Json序列化處理整理

.NetCore中EFCore的使用整理（二）-關聯表查詢