JQuery+ASP.NetWebAPI一个简单应用

public class Contact
{
    public string Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PhoneNo { get; set; }
    public string EmailAddress { get; set; }
} 

public class ContactController : ApiController
{
    private static List cOntacts= new List()
    {
        new Models.Contact { Id="001",FirstName="San",LastName="Zhang",PhOneNo="123",EmailAddress="Zhang.San@gmail.com
        new Models.Contact {Id="002",FirstName="Si",LastName="Li",PhOneNo="456",EmailAddress="Si.Li@gmail.com" }
    };

    public IEnumerable Get()
    {
        return contacts;
    }

    public Models.Contact Get(string id)
    {
         return contacts.FirstOrDefault(p => p.Id == id);
    }

    public void Put(Models.Contact contact)
    {
        if (string.IsNullOrEmpty(contact.Id))
            contact.Id = Guid.NewGuid().ToString();
        contacts.Add(contact);
    }

    public void Post(Models.Contact contact)
    {
        Delete(contact.Id);
        contacts.Add(contact);
    }
    public void Delete(string id)
    {
        Models.Contact contact = contacts.FirstOrDefault(p => p.Id == id);
        contacts.Remove(contact);
    }
}

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services
    // Configure Web API to use only bearer token authentication.
    config.SuppressDefaultHostAuthentication();
    config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}

public class QueryController : Controller
{
    // GET: Query
    public ActionResult Index()
    {
        return View();
    }
} 

<script src="~/Scripts/jquery-1.10.2.min.js">script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script type="text/Javascript">
    $(function () {
        loadAllContacts();
    })

    function loadAllContacts() {
        $.ajax({
            url: "/api/Contact/",
            type: "GET",
            dataType: "JSON",
            success: function (data) { renderContactList(data) }
        });
    }

    function renderContactList(contacts) {
        var html = "";
        html +="";
        for (var i =0; i < contacts.length; i++) {
            html += String.Format("",
                contacts[i].FirstName, contacts[i].LastName, contacts[i].PhoneNo);
            html += String.Format("", contacts[i].Id, contacts[i].EmailAddress);
            html +="";
        }
        html +="";
        html +="
 
First Name
Last Name
Phone No.
Email Address
Action
 
{0}
{1}
{2}
 
" + contacts[i].Id + "\")‘> Update      ";
            html += "" + contacts[i].Id + "\")‘> Delete      
 
" +
            "
" +
            "
" +
            "
" +
            "
 Craete 
 ";
        $("#contacts").html(html);
        $("table tr:odd").addClass("oddRow");
    }

    function deleteContact(id) {
        $.ajax({
            url: "/api/contact/" + id,
            type: "DELETE",
            success: function () { loadAllContacts(); }
        });
    }

    function updateContact(id) {
        var emailAddress = $("#" + id).val();
        $.ajax({
            url: "/api/Contact/" + id,
            type: "GET",
            dataType: "JSON",
            success: function (contact) {
                contact.EmailAddress = emailAddress;
                alert(emailAddress);
                alert(contact.EmailAddress);
                update(contact);
            },
            error: function (msg) { alert(msg); }
        });
    }

    function update(contact) {
        $.ajax({
            url: "/api/Contact/",
            type: "POST",
            data: JSON.stringify(contact),
            contentType: "application/json",
            success: function () { loadAllContacts(); },
            error: function (msg) { alert(msg); }
        });
    }

    function addContact() {
        var contact = new Object();
        contact.FirstName = $("#firstName").val();
        contact.LastName = $("#lastName").val();
        contact.PhoneNo = $("#phoneNo").val();
        contact.EmailAddress = $("#emailAddress").val();
        $.ajax({
            url: "/api/contact/",
            type: "PUT",
            data: JSON.stringify(contact),
            contentType: "application/json",
            success: function () { loadAllContacts(); }
        });
    }

    String.Format = function () {
        if (arguments.length == 0)
            return null;
        var str = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            var re = new RegExp(‘\\{‘ + (i - 1) + ‘\\}‘, ‘gm‘);
            str = str.replace(re, arguments[i]);
        }
        return str;
    }
script>
<div id="contacts">div>

String.Format = function () {
    if (arguments.length == 0)
        return null;
    var str = arguments[0];
    for (var i = 1; i ) {
        var re = new RegExp(‘\\{‘ + (i - 1) + ‘\\}‘, ‘gm‘);
        str = str.replace(re, arguments[i]);
    }
    return str;
}