Web Api+MVC

2021-09-18 00:06:36

一、MVC+EF

不管是MVC 还是EF 都有文件夹 Controllers 下边的文件必须以Controller 结尾

WEBAPI 接口不要使用中文名称

二、Linq 查询

多表联查
Linq 查询使用方法

var query = from a in db.Students
                        join b in db.Classs on a.CId equals b.CId
                        select new ShowModel
                        {
                            SId = a.SId,
                            Name = a.Name,
                            CId = b.CId,
                            CName = b.CName
                        };

匿名类型return Json(new {totalcount,totalpage,list });

三、MVC访问API

WEBAPI 配置跨域（CORS）

1.Web.config

<!--跨域请求：三个配置信息-->
      <httpProtocol>
          <customHeaders>
              <!--响应类型 (值为逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法)-->
              <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS"/>
              <!--响应头设置（Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）-->
              <add name="Access-Control-Allow-Headers" value="x-requested-with,content-type"/>
              <!--如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源-->
              <add name="Access-Control-Allow-Origin" value="*" />
              <!--<add name="Access-Control-Allow-Origin" value="http://domain1.com, http://domain2.com" />  设置允许跨域访问的网址-->
          </customHeaders>
      </httpProtocol>

2.Global.asax

/// <summary>
        /// 跨域设置
        /// </summary>
        protected void Application_BeginRequest()
        {
            //OPTIONS请求方法的主要作用：
            //1、获取服务器支持的HTTP请求方法；也是黑客经常使用的方法。
            //2、用来检查服务器的性能。如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                //表示对输出的内容进行缓冲，执行page.Response.Flush()时，会等所有内容缓冲完毕，将内容发送到客户端。
                //这样就不会出错，造成页面卡死状态，让用户无限制的等下去
                Response.Flush();
            }
        }

四、MVC中的分页显示

1、创建视图

2、按要求创建表格

<table class="table table-bordered">
    <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>班级</td>
        </tr>
    </thead>
    <tbody id="list">
    </tbody>
</table>

3、Ajax显示分页及查询


<script>
    var pageindex = 1;
    var pagesize = 3;
    var totalcount = 0;
    var totalpage = 0;
    $(function () {
        Show();
        Bind();
    })
    function Show() {
         
        $.get(‘http://localhost:60197/api/Student/GetList?cid=‘ + $("#cid").val() + ‘&name=‘ + $("#name").val() + ‘&pageindex=‘ + pageindex + ‘&pagesize=‘ + pagesize, res => {
            totalcount = res.totalcount;
            totalpage = res.totalpage;
            $("#list").empty();
            var arrhtml = "";
            $(res.list).each(function () {
                arrhtml+= "<tr>"
                +"<td>" + this.SId + "</td>"
                +"<td>" + this.Name + "</td>"
                +"<td>" + this.CName + "</td>"
                +"</tr>";
            })
            $("#list").append(arrhtml);
        })
    }
    function Page(o) {
        switch (o) {
            case ‘F‘:
                pageindex = 1;
                break;
            case ‘P‘:
                pageindex= pageindex <= 1 ? pageindex : pageindex - 1;
                break;
            case ‘N‘:
                pageindex = pageindex >= totalpage ? pageindex : pageindex + 1;
                break;
            case ‘L‘:
                pageindex = totalpage;
                break;
        }
        Show();
    }
    function Bind() {
        $.get(‘http://localhost:60197/api/Student/Bind‘, res => {
            $(res).each(function () {
                $("#cid").append("<option value=" + this.CId + ">" + this.CName + "</option>")
            })
        })
    }
</script>

Web Api+MVC

码农公寓

一、MVC+EF

二、Linq 查询

三、MVC访问API

四、MVC中的分页显示

相关文章