zoukankan      html  css  js  c++  java
  • mvcAPI (入门 2)

    1)建立一个实体类

       

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcApplication23.Models
    {
        public class UserInfo
        {
            public int Id { get; set; }
    
            public string  Name { get; set; }
    
            public int Age { get; set; }
        }
    }
    实体类

    2)建立API控制器

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MvcApplication23.Models;
    using System.Web.Http;
    
    namespace MvcApplication23.Controllers
    {
        public class HomeController :ApiController
        {
            //
            // GET: /Home/
    
            public List<UserInfo> GetUser()
            {
                var userList = new List<UserInfo>{
                new UserInfo{ Id=1, Name="lidu1", Age=31},
                new UserInfo{ Id=2, Name="lidu2", Age=32},
                 new UserInfo{ Id=3, Name="lidu3", Age=33}
               };
                var temp = (from u in userList select u).ToList();
                return temp;
            }
    
        }
    }
    API控制器

    这时候 可以在地址栏中输入url 可以看见效果了 :http://localhost:42571/api/Home/GetUser

    3)测试客户端 效果 或者展示

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="Scripts/jquery-1.8.2.js"></script>
        <script>
            $(function () {
                $.ajax({
                    type: "Get",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    url: "/api/Home/GetUser",
                    success: function (data) {
                        var tbody = $("#tbody1");
                        $.each(data, function (idx, item) {
                            OutputData(tbody, item);
                        });
                    }
                });
                function OutputData(tbody, item) {
                    tbody.append(
                           "<tr>" +
                           "<td style="border:1px solid #0094ff;">" +
                           item.Id +
                            "</td>" +
                            "<td style="border:1px solid #0094ff;">" + item.Name +
                             "</td>" +
                             "<td style="border:1px solid #0094ff;">" + item.Age +
                              "</td>" +
                            
    
                        "</tr>");
                }
            });
    
        </script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td style="border:1px solid #0094ff">Id</td>
                    <td style="border:1px solid #0094ff">Name</td>
                    <td style="border:1px solid #0094ff">Age</td>
                    
                </tr>
            </thead>
            <tbody id="tbody1"> </tbody>
        </table>
    </body>
    </html>
    界面代码通过Ajax 获取API的值然后展示

    最后效果如下:

    转载 请注明原文地址并标明转载:http://www.cnblogs.com/laopo 商业用途请与我联系:lcfhn168@163.com
  • 相关阅读:
    为什么做java开发的公司需要那么多程序员?
    一篇文章了解架构设计的本质
    深入理解 Java 多线程核心知识
    面试经验总结:注意这几点,面试通过率上涨30%
    程序员一般做到多少岁,那些70后的程序员都消失了?
    连阿里都在用它处理亿万级数据统计,论其对Java程序员的重要性!
    【源码】HashMap源码及线程非安全分析
    基于框架的RPC通信技术原理解析
    如何写好一份技术简历?
    彻底理解Netty,这一篇文章就够了
  • 原文地址:https://www.cnblogs.com/laopo/p/4781947.html
Copyright © 2011-2022 走看看