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=, Name="lidu1", Age=},

            new UserInfo{ Id=, Name="lidu2", Age=},

             new UserInfo{ Id=, Name="lidu3", Age=}

           };

            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的值然后展示

最后效果如下：

mvcAPI （入门 2）的更多相关文章

  1. mvcAPI （入门 3）(源码)

    mvcAPI (入门 3)(源码) http://download.csdn.net/detail/chunfang740/9078579

  2. mvcAPI （入门 3)

    续上 1)无参数Get请求 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  3. mvcAPI （入门 1）

    步骤: 1)建立order 类 2)建立OrderEntity类 3)创建控制器API 这时候能看到Json 格式的数据啦 5)想在网页或客户端显示 添加一个网页 如下: <!DOCTYPE h ...

  4. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  5. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  6. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  7. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  8. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  9. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

随机推荐

  1. centos python nginx uwsgi

    先更新系统,并安装编译环境等等. yum update yum install python python-devel libxml2 libxml2-devel python-setuptools ...

  2. android开发之如何使TabHost的TabWidget位于屏幕下方

    更改TabHost里的第一个LinearLayout为RelativeLayout.并在TabWidget中添加android:layout_alignParentBottom="true& ...

  3. 接口是否可继承接口? 抽像类是否可实现(implements)接口? 抽像类是否可继承实体类(concrete class)?

    接口是否可继承接口? 抽像类是否可实现(implements)接口? 抽像类是否可继承实体类(concrete class)? 1. 接口可以继承接口. 2. 抽像类可以实现(implements)接 ...

  4. Android 仿土巴兔选择效果

    1,前两天在群里看到有人在讨论土巴兔的选择装修风格的效果,自己也想实现,果断百度一下,有些好的文章,就花了些时间来分析了下,先看看别人土巴兔原装的功能 2,可以看到,基本上可以使用一个vviewpag ...

  5. mesos概述

    mesos解决的问题 不同的分布式运算框架(spark,hadoop,ES,MPI,Cassandra,etc.)中的不同任务往往需要的资源(内存,CPU,网络IO等)不同,它们运行在同一个集群中,会 ...

  6. paper 41：正交变换

    正交变换是保持图形形状和大小不变的几何变换,包含旋转,轴对称及上述变换的复合. 几何意义 正交变换是保持图形形状和大小不变的几何变换,包含旋转,轴对称及上述变换的复合. 代数定义 欧几里得空间V的线性 ...

  7. 夺命雷公狗ThinkPHP项目之----企业网站28之网站前台左侧导航的实现

    我们基于刚才在model层的找顶级分类的代码在进行修改即可: <?php namespace Home\Controller; use Think\Controller; class Commo ...

  8. ios学习笔记（一）Windows7上使用VMWare搭建iPhone开发环境（转）

    原文地址:http://blog.csdn.net/shangyuan21/article/details/18153605 我们都知道开发iPhone等ios平台的移动应用时需要使用Mac本,但是M ...

  9. [经典php视频]构建正则表达式解析网页中的图像标记<img>

    这是高洛峰php视频中的一段,视频中一边分析需要的功能,一边构建greg_match函数的参数,边讲解边实战,是非常好的一种构建功能的演示. 你不可能把浩瀚的IT资料都记在脑袋里,也不可能随时随地透过 ...

  10. jquery表单重置另一种方法

    页面中按钮为<a>标签时,点击取消按钮,表单内容重置,需要给form表单id="form": <a class="demo_one1" onc ...