יום שבת, 1 ביוני 2013

Very simple web api call part 1

Create a new project based of web api template.
The view
Replace all the content of Index.cshtml with the following code

  1: <!DOCTYPE html>
  2: <html lang="en">
  3: <head>
  4:     <title>Routes Web API</title>
  5:     <link href="../../Content/Site.css" rel="stylesheet" />
  6:  
  7: </head>
  8: <body id="body" >
  9:     <div class="main-content">
 10:         <div>
 11:             <h1>All Routes</h1>
 12:             <ul id="RoutesList"/>
 13:         </div>
 14:         <div>
 15:             <input type="button" id="CallWebApi" value="Call web api" />
 16:             <p id="product" />
 17:         </div>
 18:     </div>
 19:       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 20:        <script>
 21:          
 22:            $(document).ready(function () {
 23:                
 24:                $("#CallWebApi").on("click", function (event) {
 25:                    // Send an AJAX request
 26:                    $.getJSON("api/values/",
 27:                    function (data) {
 28:                        // On success, 'data' contains a list of products.
 29:                        $.each(data, function (key, val) {
 30: 
 31:                            // Format the text to display.
 32:                            var theRouteName = val.Name ;
 33: 
 34:                            // Add a route for the routes list.
 35:                            $('<li/>', { text: theRouteName })
 36:                            .appendTo($('#RoutesList'));
 37:                        });
 38:                    });
 39:                });
 40:          });
 41:         
 42:        </script>
 43: </body>
 44: </html>

The modal
Create a simple Route modal

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Web;
  5: 
  6: namespace MvcApplication1.Models
  7: {
  8:     public class Route
  9:     {
 10:         public Route()
 11:         {
 12: 
 13:         }
 14:         public int Id { get; set; }
 15:         public string Name { get; set; }
 16:     }
 17: }

The controller
change the values controller as follow


  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Net;
  5: using System.Net.Http;
  6: using System.Web.Http;
  7: using MvcApplication1.Models;
  8: 
  9: namespace MvcApplication1.Controllers
 10: {
 11:     public class ValuesController : ApiController
 12:     {
 13:         Route[] Routes = new Route[] 
 14:         { 
 15:             new Route { Id = 1, Name = "To Scoll" }, 
 16:             new Route { Id = 2, Name = "To Home" } 
 17:         };
 18:         public ValuesController()
 19:         {
 20: 
 21:         }
 22:         // GET api/values
 23:         public IEnumerable<Route> Get()
 24:         {
 25:             return Routes; 
 26:         }
 27: 
 28:         // GET api/values/5
 29:         public string Get(int id)
 30:         {
 31:             return "value";
 32:         }
 33: 
 34:         // POST api/values
 35:         public void Post([FromBody]string value)
 36:         {
 37:         }
 38: 
 39:         // PUT api/values/5
 40:         public void Put(int id, [FromBody]string value)
 41:         {
 42:         }
 43: 
 44:         // DELETE api/values/5
 45:         public void Delete(int id)
 46:         {
 47:         }
 48:     }
 49: }

The Result after clicking the button:
Capture22

ב-
תוויות: , , ,

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)