• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

ASP.NET Web API 的简单示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Demo1：

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Comments Test Home Page</title>
    <link href="/Content/Demo.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="/Scripts/demo1/get.js"></script>
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="default.htm">&lt;&lt;&lt; Back</a> 
            | Demo 1 Simple Get |
            <a href="demo2-crud.htm">On to Demo 2 - Simple CRUD &gt;&gt;&gt;</a>
        </div>
    </nav>
    <div id="content">
        
        <div id="demo-actions">
            <div>
                <legend>Get Comments Demos</legend>
                <button id="getComments">Go!</button>
            </div>
        </div>
        <div id="article">
            <p>
                This first demo shows a very simple GET scenario. Click on the button to 
                use jQuery to retrieve JSON data from a Web API endpoint and then display 
                the contents of that payload in the UI.
            </p>
            <p>
                The code represents retrieving data in a manner that any developer familiar 
                with jQuery would understand.
            </p>
        </div>

        <ul data-bind="template: {name: 'commentTemplate', foreach: comments}">
        </ul>

        <script id="commentTemplate" type="text/html">
            <li class="comment">
                <header>
                    <div class="info">
                        <img data-bind="attr: {src: GravatarUrl}" />
                        <strong><span data-bind="text: Author"></span></strong>
                    </div>
                </header>
                <div class="body">
                    <p data-bind="text: Text"></p>
            
                </div>
            </li>
        </script>

        <script type="text/javascript">
            viewModel = {
                comments: ko.observableArray([])
            };

            ko.applyBindings(viewModel);
        </script>
    </div>
</body>
</html>

 

JS:

$(function() {
    $("#getComments").click(function () {
        // We're using a Knockout model. This clears out the existing comments.
        viewModel.comments([]);

        $.get('/api/comments', function (data) {
            // Update the Knockout model (and thus the UI) with the comments received back 
            // from the Web API call.
            viewModel.comments(data);
        });

    });
});

 

Demo2：

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Comments Test Home Page</title>
    <link href="/Content/Demo.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>

    <script type="text/javascript" src="/Scripts/demo2/get.js"></script>
    <script type="text/javascript" src="/Scripts/demo2/post.js"></script>
    <script type="text/javascript" src="/Scripts/demo2/delete.js"></script>   
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="demo1-simpleget.htm">&lt;&lt;&lt; Back</a> 
            | Demo 2 CRUD |
            <a href="demo3-paging.htm">On to Demo 3 - Paging &gt;&gt;&gt;</a>
        </div>
    </nav>
    <div id="content">
        <div id="article">
            <p>
                See, I told you that last demo would be simple.
            </p>
            <p>
                This demo allows the user to create and delete comments. When we 
                delete the comment, we use a proper HTTP DELETE request. Again, the 
                code is still very simple. Note that when we POST a comment, we handle 
                the proper 201 status code.
            </p>
        </div>
        <ul data-bind="template: {name: 'commentTemplate', foreach: comments}">
        </ul>
        <form id="newCommentForm">
        <fieldset>
            <legend>New Comment</legend>
            <label for="text">Comment</label>
            <textarea id="text" name="text" type="text"></textarea>
            <label for="author">Author</label>
            <input id="author" name="author" type="text" value="" />
            <label for="email">Email</label>
            <input id="email" name="email" type="text" value="" />
            <button type="submit">Submit</button>
        </fieldset>
        </form>
        <script id="commentTemplate" type="text/html">
            <li class="comment">
                <header>
                    <div class="info">
                        <img data-bind="attr: {src: GravatarUrl}" />
                        <strong><span data-bind="text: Author"></span></strong>
                    </div>
                    <div class="actions">
                        <a class="delete" data-bind="attr: { 'data-comment-id': ID }" href="#">Delete Id: <span data-bind="text: ID" /></a>
                    </div>
                </header>
                <div class="body">
                    <p data-bind="text: Text"></p>
            
                </div>
            </li>
        </script>
        <script type="text/javascript">
            viewModel = {
                comments: ko.observableArray([])
            };

            ko.applyBindings(viewModel);
        </script>
    </div>
</body>
</html>

JS:
get.js

$(function() {
    // We're using a Knockout model. This clears out the existing comments.
    viewModel.comments([]);

    $.get('/api/comments', function (data) {
        // Update the Knockout model (and thus the UI) with the comments received back 
        // from the Web API call.
        viewModel.comments(data);
    });
});

post.js

$(function () {
    var form = $('#newCommentForm');
    form.submit(function () {
        var form = $(this);
        var comment = { ID: 0, Text: $('#text').val(), Author: $('#author').val(), Email: $('#email').val(), GravatarUrl: '' };
        var json = JSON.stringify(comment);

        $.ajax({
            url: '/api/comments',
            cache: false,
            type: 'POST',
            data: json,
            contentType: 'application/json; charset=utf-8',
            statusCode: {
                201 /*Created*/: function (data) {
                    viewModel.comments.push(data);
                }
            }
        });

        return false;
    });
});

delete.js

$(function() {
    $("a.delete").live('click', function () {
        var id = $(this).data('comment-id');

        $.ajax({
            url: "/api/comments/" + id,
            type: 'DELETE',
            cache: false,
            statusCode: {
                200: function(data) {
                    viewModel.comments.remove(
                        function(comment) { 
                            return comment.ID == data.ID; 
                        }
                    );
                }
            }
        });

        return false;
    });
});

 

Demo3：

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Comments Test Home Page</title>
    <link href="/Content/Demo.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="/Scripts/demo3/get-querystring.js"></script>
    <script type="text/javascript" src="/Scripts/demo3/get-queryable.js"></script>
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="demo2-crud.htm">&lt;&lt;&lt; Back</a> 
            | Demo 3 Paging |
            <a href="demo4-validation.htm">On to Demo 4 - Validation &gt;&gt;&gt;</a>
        </div>
    </nav>
    <div id="content">
        
        <div id="demo-actions">
            <div>
                <legend>Paging Demos</legend>
                <label for="pageSize">Size:</label> <input type="input" id="pageSize" class="paging" value="4" />
                <label for="pageIndex">Index:</label> <input type="input" id="pageIndex" class="paging" value="0" />
                
                <button id="getCommentsPaging">Query String</button> 
                <button id="getCommentsQueryable">Queryable</button> 
            </div>
        </div>

        <div id="article">
            <p>
                This is a demo of paging through data.
            </p>
            <p>
                The "Query String" button calls code that demonstrates how a typical developer 
                might implement paging today.
            </p>
            <p>
                The "Queryable" button turns it up a notch and shows paging using a service method 
                that returns an <code>IQueryable</code>. Note that the client code hasn't changed 
                much at all, but the server code is much simpler.
            </p>

        </div>

        <ul data-bind="template: {name: 'commentTemplate', foreach: comments}">
        </ul>

        <script id="commentTemplate" type="text/html">
            <li class="comment">
                <header>
                    <div class="info">
                        <img data-bind=" 
                       
                    
                    
 
                      





鲜花




握手




雷人




路过




鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
asp.net中使用callback发布时间：2022-07-10
下一篇：
ASP.NET缓存技术学习入门---页面缓存（OutPutCaching）发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap