本文转载自:http://www.cnblogs.com/pmars/p/3673811.html

先看效果图:

以下是原文:

如何在帮助页面添加测试工具

  上一篇我在ASP.NET里面添加了一个Help Page,这篇文章我打算在该page里面添加一个测试工具,这样我们在开发的时候就可以直接用来测试API了,对开发很有好处!

  你也可以看这篇文章来添加测试工具:http://blogs.msdn.com/b/yaohuang1/archive/2012/12/02/adding-a-simple-test-client-to-asp-net-web-api-help-page.aspx

1,添加NuGet程序包

  

  

  点击安装即可。

  之后会在你的项目中添加了如下文件:

  • Scripts\WebApiTestClient.js
  • Areas\HelpPage\TestClient.css
  • Areas\HelpPage\Views\Help\DisplayTemplates\TestClientDialogs.cshtml
  • Areas\HelpPage\Views\Help\DisplayTemplates\TestClientReferences.cshtml

2,添加功能

  这个时候我们需要修改这个文件:Areas\HelpPage\Views\Help\Api.cshtml

 1 <link type="text/css" href="~/Areas/HelpPage/HelpPage.css" rel="stylesheet" />
2 <div id="body" class="help-page">
3 <section class="featured">
4 <div class="content-wrapper">
5 <p>
6 @Html.ActionLink("Help Page Home", "Index")
7 </p>
8 </div>
9 </section>
10 <section class="content-wrapper main-content clear-fix">
11 @Html.DisplayForModel()
12 </section>
13 </div>
14 @Html.DisplayForModel("TestClientDialogs")
15 @section Scripts {
16 <link type="text/css" href="~/Areas/HelpPage/HelpPage.css" rel="stylesheet"/>
17 @Html.DisplayForModel("TestClientReferences")
18 }

  对的,就这么简单。

  你需要确定的是,你的包需要在这个或者之上:

  • jQuery 1.7.1
  • jQuery.UI.Combined 1.8.20
  • knockoutjs 2.1.0

3,看看页面

  在Help页面找到任意的API,点击进入查看,会发现,右下角有个Test API 的按钮,点击就是我们要的测试工具了

  

  返回的结果还算正确。

如何在MVC_WebAPI项目中的APIController帮助页面添加Web测试工具测试的更多相关文章

  1. 如何在mvc项目中使用apiController

    文章地址:How do you route from an MVC project to an MVC ApiController in another project? 文章地址:How to Us ...

  2. [Laravel-Swagger]如何在 Laravel 项目中使用 Swagger

    如何在 Laravel 项目中使用 Swagger http://swagger.io/getting-started/ 安装依赖 swagger-php composer require zirco ...

  3. 如何在cocos2d项目中enable ARC

    如何在cocos2d项目中enable ARC 基本思想就是不支持ARC的代码用和支持ARC的分开,通过xcode中设置编译选项,让支持和不支持ARC的代码共存. cocos2d是ios app开发中 ...

  4. 如何在NodeJS项目中优雅的使用ES6

    如何在NodeJS项目中优雅的使用ES6 NodeJs最近的版本都开始支持ES6(ES2015)的新特性了,设置已经支持了async/await这样的更高级的特性.只是在使用的时候需要在node后面加 ...

  5. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  6. 如何在Ionic2项目中使用第三方JavaScript库

    onic的官网放出一记大招Ionic and Typings,来介绍如何在Ionic2项目中使用第三方JavaScript库. 因为在前阵子正好想用一个非常有名的第三方JS库ChartJs来实现一些东 ...

  7. 如何在maven项目中使用spring

    今天开始在maven项目下加入spring. 边学习边截图. 在这个过程中我新建了一个hellospring的项目.于是乎从这个项目出发开始研究如何在maven项目中使用spring.鉴于网上的学习资 ...

  8. 如何在Vue-cli项目中使用JTopo

    1.前言 jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.其体积小,性能优异,由一群开发爱好者来维护.唯一感 ...

  9. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

随机推荐

  1. 虚拟化平台cloudstack(5)——参考资料

    虚拟化的几种方式 完全虚拟化: 半虚拟化: 硬件辅助虚拟化: 详细的内容可以看: http://pan.baidu.com/share/link?shareid=4134188256&uk=2 ...

  2. 关于QCon2015感想与反思

    QCon2015专场有不少关于架构优化.专项领域调优专题,但能系统性描述产品测试方向只有<携程无线App自动化测试实践>.   (一). 携程的无线App自动化     <携程无线A ...

  3. Oracle使用小记

    windows下Oracle必须要启动的服务 Oracle ORCL VSS Writer Service:Oracle卷映射拷贝写入服务,VSS(Volume Shadow Copy Service ...

  4. Duplicate id @+id/imageView, already defined earlier in this layout,android

    原文地址http://www.thinksaas.cn/topics/0/448/448554.html 其實這個訊息也是可以解掉的,當然最簡單的解法就是你不要使用相同的id就好了.不過萬一你是幫別人 ...

  5. Atitit 团队建设的知识管理

    Atitit 团队建设的知识管理 1.1. 要遵循"知识积累--创造--应用--形成知识平台--再积累--再创造--再应用--形成新的知识平台"的循环过程.1 1.2. 显性知识包 ...

  6. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  7. Spring-JDBC实现Contact的CRUD

    Spring-JDBC完成Contact的CRUD. 两点注意: 1.log4j.properties文件不能少 2.注意导入的包之间的依赖关系以及版本要求. 项目结构: 主要文件: 建表脚本: CR ...

  8. Java基础-继承 利用接口做参数,写个计算器,能完成+-*/运算

    38.利用接口做参数,写个计算器,能完成+-*/运算 (1)定义一个接口Compute含有一个方法int computer(int n,int m); (2)设计四个类分别实现此接口,完成+-*/运算 ...

  9. 通过telnet来实践HTTP协议。

    这是一篇实践教程,能够让你更加深刻的理解HTTP协议,因此需要一定的HTTP基础. 协议:一种规定,规定了你应该怎么去做,如w3c规定了浏览器应该怎么去解析HTML,CSS,JS.而HTTP则规定了客 ...

  10. 用javascript动态创建并提交表单form,表格table

    <script> //helper function to create the formfunction getNewSubmitForm(){ var submitForm = doc ...