AspDotNet之WebApi练习

潘诺西亚的火山

已于 2022-02-10 00:46:18 修改

阅读量249

点赞数

于 2022-02-09 19:54:52 首次发布

本文链接：https://blog.csdn.net/helldoger/article/details/122848609

版权

先建立WebApi的路由

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace WebApplication2
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API 配置和服务

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

随便建一个业务类 Models

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication2.Models
{
    public class Course
    {
        public int CourseID { get; set; }

        public string CourseName { get; set; }

        public string Category { get; set; }

        public string CoursePrice { get; set; }
        
    }
}

写Controllers

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication2.Models;

namespace WebApplication2.Controllers
{
    public class CourseController : ApiController
    {
        //模拟数据源
        private List<Course> courseList = new List<Course>
        {
            new Course{ CourseID = 100,CourseName= "WebApi",Category = "BS端技术",CoursePrice="1001"},
            new Course{ CourseID = 101,CourseName= "AspDontNetMVC",Category = "BS端技术",CoursePrice="1002"},
            new Course{ CourseID = 102,CourseName= "WCF",Category = "BS端技术",CoursePrice="1003"},
        };

        #region Get查询一个对象集合
        /// <summary>
        /// 1.1查询一个集合
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public List<Course> GetCourse()
        {
            return courseList;
        }
        #endregion

        #region 查询一个有参数的对象
        /// <summary>
        /// 1.2 查询一个有参数的对象
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [HttpGet]
        public Course GetCourse2(int id)
        {
            return courseList.FirstOrDefault(i=>i.CourseID==id);
        }

        /// <summary>
        /// 1.3 查询一个两个参数都是自定义的对象
        /// </summary>
        /// <param name="courseId"></param>
        /// <param name="courseName"></param>
        /// <returns></returns>
        [HttpGet]
        public Course GetCourse(int courseId, string courseName)
        {
            return courseList.FirstOrDefault(i => i.CourseID == courseId && i.CourseName == courseName);
        }
        /// <summary>
        /// 【2.1】添加对象
        /// 
        /// [FromBody] 可以不加
        /// </summary>
        /// <param name="entity"></param>
        /// <returns></returns>
        [HttpPost]
        public int PostCourse([FromBody] Course entity)
        {
            courseList.Add(entity);
            return courseList.Count;
        }
        /// <summary>
        /// 【2.2】修改对象
        /// </summary>
        /// <param name="entity"></param>
        /// <returns></returns>
        [HttpPut]
        public int PutCourse(Course entity)
        {
            var course = courseList.FirstOrDefault(c => c.CourseID == entity.CourseID);
            course.CourseName = entity.CourseName;
            course.Category = entity.Category;

            return course.CourseID;
        }
        /// <summary>
        ///【2.3】删除对象
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        [HttpDelete]
        public int DeleteCourse(int id)
        {
            var course = courseList.FirstOrDefault(c => c.CourseID == id);
            courseList.Remove(course);
            return courseList.Count;
        }
        #endregion
    }
}

写View视图, 这里用到了jquery与ajax


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //1.1查询集合对象
            $("#btn1").click(function () {
                $.ajax(
                    {
                        url: "/api/Course",
                        type: "get",
                        data: null,//参数,此处没有传参
                        success: function (data) {
                            //实际开发中,获得的api返回的结果
                            alert(JSON.stringify(data));
                        }
                    })
            });
            //1.2查询有参数的对象
            $("#btn2").click(function () {
                $.ajax(
                    {
                        url: "/api/Course/102",//通过url查询id 102
                        type: "get",
                        data: null,//参数在url传递
                        success: function (data) {
                            //实际开发中,获得的api返回的结果
                            alert(JSON.stringify(data));
                        }
                    });
            });
            // 1.3 查询一个单独对象,2个参数自定义
            $("#btn3").click(function () {  
                $.ajax({
                    url: "/api/Course?CourseID=101&CourseName=AspDontNetMVC", //当后面参数名称不是默认的Id时，使用这种方式
                    type: "get",
                    data: null,
                    success: function (data) {
                        //实际开发中，获得到api返回的结果，可以自己处理...
                        alert(JSON.stringify(data));
                    }
                });
            });

            //【21】添加一个对象
            $("#btn21").click(function () {
                $.ajax({
                    url: "/api/Course",
                    type: "post",
                    data: { "CourseId": 104, "CourseName": "WebApi学习", "Category": ".NET开发系列" },
                    success: function (data) {
                        //实际开发中，获得到api返回的结果，可以自己处理...
                        alert(JSON.stringify(data));
                    }
                });
            });
            //【22】修改一个对象
            $("#btn22").click(function () {
                $.ajax({
                    url: "/api/Course",
                    type: "put",
                    data: { "CourseId": 102, "CourseName": "WCF", "Category": "BS端技术" },
                    success: function (data) {
                        alert(JSON.stringify(data));
                    }
                });
            });
            //【23】删除一个对象
            $("#btn23").click(function () {
                $.ajax({
                    url: "/api/Course/102",
                    type: "delete",
                    success: function (data) {
                        alert(JSON.stringify(data));
                    }
                });
            });
        })
    </script>
</head>
<body>
    <div>
        <h2>dotNet之WeApi</h2>
        <br />
        <input type="button" id="btn1" value="1.1测试Get无参数查询请求,返回List" />
        <br />
        <input type="button" id="btn2" value="1.2测试Get有参数查询请求,返回一个对象" />
        <br />
        <input type="button" id="btn3" value="1.3测试Get有两个自定义参数的查询请求,返回一个对象" /><br /><br />

        <input type="button" id="btn21" value="2.1添加对象" /><br />
        <input type="button" id="btn22" value="2.2修改对象" /><br />
        <input type="button" id="btn23" value="2.3删除对象" /><br />

    </div>
</body>
</html>

jquery通过name属性取值的方法
alert($(“input[name=‘inputTest’]”).val());

alert($(“input[type=‘text’]”).attr(“id”)); //这个是取id的值，方便记就写在这儿了

$(“input[name=‘inputTest’]”).each(

function(){

alert($(this).val());

}

)

alert($(“input[name=‘inputTest’]”)[0].value);

alert($(“input[name=‘inputTest’]”)[1].value);

alert($(“input[name=‘inputTest’]”).get(0).value); //此处也可以得到值，等同于上面两行

alert($(“input[name=‘inputTest’]”).get(1).value);

根据name取值：

$(“input[name=‘mobile’]”).val()

根据id取值:

$("#mobile_reg_form").html()
根据name取值了遍历：

$(“input[name=‘mobile’]”).each(

function(){

alert($(this).val());

}

)

取出form中的input：

得到值（多个的情况）：

$(“input[name=‘mobile’]”)[0].value

$(“input[name=‘mobile’]”).get(1).value

-----jquery添加删除样式--------
给一个标签添加样式:
$("#id").addClass(“style”);
删除一个标签的样式:
$("#id").removeClass(“style”);
注:"#id" id是对应标签的id,style是对应css样式的名称

潘诺西亚的火山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AspDotNet之WebApi练习

先建立WebApi的路由using System;using System.Collections.Generic;using System.Linq;using System.Web.Http;namespace WebApplication2{ public static class WebApiConfig { public static void Register(HttpConfiguration config) {
复制链接

扫一扫