代码改变世界

ASP.NET Web API 的简单示例

2013-07-15 18:02  音乐让我说  阅读(532)  评论(0)  编辑  收藏  举报

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="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:

get-querystring.js

$(function () {
    //---------------------------------------------------------
    // Using custom Query String parameters to page
    //---------------------------------------------------------
    $("#getCommentsPaging").click(function () {
        viewModel.comments([]);

        var pageSize = $('#pageSize').val();
        var pageIndex = $('#pageIndex').val();

        var url = "/api/comments?pageSize=" + pageSize + '&pageIndex=' + pageIndex;

        $.getJSON(url, function (data) {
            // Update the Knockout model (and thus the UI) with the comments received back 
            // from the Web API call.
            viewModel.comments(data);
        });
        
        return false;
    });
});

get-queryable.js

$(function () {
    //---------------------------------------------------------
    // Using Queryable to page
    //---------------------------------------------------------
    $("#getCommentsQueryable").click(function () {
        viewModel.comments([]);

        var pageSize = $('#pageSize').val();
        var pageIndex = $('#pageIndex').val();

        var url = "/api/comments?$top=" + pageSize + '&$skip=' + (pageIndex * pageSize);

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

        return false;
    });
});

 

Demo4：

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 src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

    <script type="text/javascript" src="/Scripts/demo4/get.js"></script>
    <script type="text/javascript" src="/Scripts/demo4/post.js"></script>
    <script type="text/javascript" src="/Scripts/demo4/delete.js"></script>
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="demo3-paging.htm">&lt;&lt;&lt; Back</a> 
            | Demo 4 Validation |
            <a href="demo5-authorization.htm">On to Demo 5 - Authorization &gt;&gt;&gt;</a>
        </div>
    </nav>
    <div id="content">
        
        <div id="article">
            <p>
                In this demo, we take advantage of the unobtrusive client validation introduced in 
                ASP.NET MVC and apply it to a static HTML page.
            </p>
            <p>
                Once you pass the client validation rules, note that we also support validation 
                happening on the server. If there are any validation errors, we serialize the 
                model state to JSON and apply the validation back on the client.
            </p>
            <p>
                <strong>After submitting a valid comment, try typing in an author that's more 
                than 10 characters long.</strong>
            </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" data-val="true" data-val-required="A comment is required."></textarea>
                <span class="field-validation-valid" data-valmsg-for="text" data-valmsg-replace="true"></span>

                <label for="author">Author</label>
                <input id="author" name="author" type="text" data-val="true" data-val-required="Tell us who you are." value="" />
                <span class="field-validation-valid" data-valmsg-for="author" data-valmsg-replace="true"></span>

                <label for="email">Email</label>
                <input id="email" name="email" type="text" data-val="true" data-val-required="What's your email address?" value="" />
                <span class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"></span>
                <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 () {
    $.validator.addMethod("failure", function () { return false; });
    $.validator.unobtrusive.adapters.addBool("failure");
    $.validator.unobtrusive.revalidate = function (form, validationResult) {
        $.removeData(form[0], 'validator');
        var serverValidationErrors = [];
        for (var property in validationResult) {
            var elementId = property.toLowerCase();
            elementId = elementId.substr(elementId.indexOf('.') + 1);
            var item = form.find('#' + elementId);
            serverValidationErrors.push(item);
            item.attr('data-val-failure', validationResult[property][0]);
            jQuery.validator.unobtrusive.parseElement(item[0]);
        }
        form.valid();
        $.removeData(form[0], 'validator');
        $.each(serverValidationErrors, function () {
            this.removeAttr('data-val-failure');
            jQuery.validator.unobtrusive.parseElement(this[0]);
        });
    }

    var form = $('#newCommentForm');
    form.submit(function () {
        var form = $(this);
        if (!form.valid()) {
            return false;
        }

        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);
                },
                400 /* BadRequest */: function (jqxhr) {
                    var validationResult = $.parseJSON(jqxhr.responseText);
                    $.validator.unobtrusive.revalidate(form, validationResult.ModelState);
                }
            }
        });

        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;
    });
});

 

Demo5：

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/demo5/get-formsauth.js"></script>
</head>
<body>
    <nav>
        <div class="demo-navigation">
            <a href="demo4-validation.htm">&lt;&lt;&lt; Back</a> 
            | Demo 5 Authorization |
        </div>
    </nav>
    <div id="content">
        <div id="demo-actions">
            <div>
                <legend>Authorization</legend>
                <button id="getCommentsFormsAuth">Forms Authentication</button> 
            </div>
        </div>


        <div id="article">
            <p>
                <strong>Forms Authentication</strong> demonstrates calling a service method that 
                requires authentication using Forms Authentication. To require authentication for the 
                Web API uncomment the <code>[Authorize]</code> attribute on the 
                <code>CommentsController</code>.
            </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:

get-formsauth.js

$(function () {
    $("#getCommentsFormsAuth").click(function () {
        viewModel.comments([]);
        $.ajax({ url: "/api/comments",
            accepts: "application/json",
            cache: false,
            statusCode: {
                200: function(data) {
                    viewModel.comments(data);
                },
                401: function(jqXHR, textStatus, errorThrown) {
                    self.location = '/Account/Login/';
                }
            }
        });
    });
});

 

下载地址：http://code.msdn.microsoft.com/ASPNET-Web-API-JavaScript-d0d64dd7

谢谢浏览！