一、MVC+EF

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

  WEBAPI 接口不要使用中文名称

二、Linq 查询

• 多表联查

• Linq 查询 使用方法

var list = from a in db.Users
                       join b in db.AgeTs on a.Cid equals b.Nid
                       select new Page
                       {
                           Id = a.Id,
                           Name = a.Name,
                           Nid = b.Nid,
                           Age = b.Age
                       };

• 博客园linq 简单语法 https://www.cnblogs.com/knowledgesea/p/3897665.html

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

public IHttpActionResult GetShow(int? age, string name, int pageindex = 1, int pagesize = 3)
        {
            int totalcount;
            int totalpage;
            var list = bll.GetShow(out totalcount, out totalpage, age, name, pageindex, pagesize);
            var query = new { totalcount, totalpage, list};
            return Json(new { totalcount, totalpage, list });
        }

 

三、MVC访问API 跨域 

  1、在web控制器进行操作

 public IHttpActionResult GetStudent(int? nid, string sName, int pageindex = 1, int pageisze = 3)
        {
            int totalcount;
            int totalpage;
            var list = bll.GetStudent(out totalcount, out totalpage, nid, sName, pageindex, pageisze);
            var query = new { totalcount, totalpage, list };

            return Json(new { totalcount, totalpage,list });
        }

  2、在Ui层的Web.config 里添加跨域请求

在 <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
下面添加代码

<!--跨域请求：三个配置信息-->
    <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>

  3、在Ui层的Global.asax 里添加跨域设置

在

protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            GlobalConfiguration.Configure(WebApiConfig.Register);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

的下面添加
/// <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();
            }
        }

  4、创建一个新项目，在添加一个MVC添加视图 ajax链接

    在content里拉一条引用 bootstrap.css

    在scripts里拉一条引用 jquery-3.4.1.min.js

    这样可以进行js操作

    可以放到创建的表格上面

    添加一个加载数据

<script>

    //文档就绪函数
    $(function () {
        LoadData()
    })
    //加载函数
    function LoadData() {
        $.get('http://localhost:59507/api/Student?nid={nid}&sName={sName}&pageindex=1&pageisze=3', res => {
            console.log(res)
        })
    }
</script>

四、MVC 分页 显示

 1、创建一个MVC控制器创建页面

  2、显示 分页  查询 操作

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />

<div>
    年龄:<select id="Age">
    <option>请选择</option>
</select>
    姓名:<input type="text" id="name" name="name"/>
    <input type="button" value="查询" onclick="GetShow()" />

</div>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody id="list">

    </tbody>
</table>

<a href="#" onclick="Page('F')">首页</a>
<a href="#" onclick="Page('P')">上一页</a>
<a href="#" onclick="Page('N')">下一页</a>
<a href="#" onclick="Page('L')">尾页</a>

<script>
        //赋值
        var pageindex = 1;
        var pagesize = 3;
        var totalcount = 0;
        var totalpage = 0;

    //文档就绪函数
    $(function () {
        GetShow();
        GetXiaLa();
    })

    function GetShow() {
        $.get('http://localhost:55350/api/User?age=' + $("#Age").val() + '&name=' + $("#name").val() + '&pageindex=' + pageindex + '&pagesize=' + pagesize, res => {

                totalcount = res.totalcount;
                totalpage = res.totalpage;

                $("#list").empty();//清空
            $(res.list).each(function () {
                var html = '<tr>'
                    + '<td>' + this.Id + '</td>'
                    + '<td>' + this.Name + '</td>'
                    + '<td>' + this.Age + '</td>'
                    + '</tr>';
                //追加
                $("#list").append(html);
            })
        })
    }

         //分页
        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;
            }
            GetShow();
    }

    //下拉框
        function GetXiaLa() {
            $.get('http://localhost:55350/api/User', res => {
                $(res).each(function () {
                    $("#Age").append('<option value="' + this.Nid + '">' + this.Age + '</option>')
                })
            })
        }


</script>

 

    待续......