- @{
- Layout =null;
- }
- "viewport"content="width=device-width"/>
- "~/Scripts/jquery-1.10.2.min.js"type="text/javascript">
- ASP.NET web API (CRUD)
- "btnGetProductList"name="btnGetProductList"type="button"value="Get Product List"/>"productsBlock"style="padding-top:10px;display:none;">"padding-left:5px;">Product List"products">
- "btnCreateProduct"name="btnCreateProduct"type="button"value="Create Product"/>"editProductBlock"style="padding:10px;width:20%;border:1px solid green;display:none;">"typeBlock"style="font-weight:bold;">Edit Product
- Product ID:
- "txtProductID"name="txtProductID"type="text"disabled />
- Product Name:"txtProductName"name="txtProductName"type="text"/>
- Count:"txtCount"name="txtCount"type="text"/>
- Price:"txtPrice"name="txtPrice"type="text"/>
- Description:"txtDescription"name="txtDescription"type="text"/>"padding-top:5px;">"message"style="color:green;">"btnSave"name="btnSave"type="button"value="Save"/>"btnCreate"name="btnCreate"type="button"value="Create"/>
- // Click get product list$('#btnGetProductList').click(function () {
- LoadProductList();
- });
- // Load product list
- function LoadProductList() {
- $.ajax({
- url: '/api/products',
- contentType: 'application/html; charset=utf-8',
- type: 'GET',
- dataType: 'json'
- }).success(function (result) {
- $('#productsBlock').show();
- DisplayProductList(result);
- }).error(function (data) {
- alert(data);
- });
- }
- // Display product list
- function DisplayProductList(result) {
- varproductTable = $("<table cellpadding='5' cellspacing='5'></table>");
- varproductTableTitle = $("<tr style='background-color:#7FBA00;'><th>Product ID</th><th>Product Name</th><th>Price</th><th>Count</th><th>Description</th><th></th></tr>");
- productTableTitle.appendTo(productTable);
- for(vari =0; i < result.length; i++) {
- varproductTableContent = $("<tr style='background-color: #7FBA00; color: white;'><td>"+ result[i].ProductID +"</td><td>"+ result[i].ProductName +"</td><td>"+ result[i].Price +"</td><td>"+ result[i].Count +"</td><td>"+ result[i].Description +"</td>"+"<td><a href='#' onclick='ViewProduct("+ result[i].ProductID +")'>View</a></td></tr>");
- productTableContent.appendTo(productTable);
- }
- $('#products').html(productTable);
- }
- // View product
- function ViewProduct(productId) {
- $('#editProductBlock').show();
- $('#btnCreate').hide();
- $.ajax({
- url: '/api/products/'+ productId,
- contentType: 'application/html;charset=utf-8',
- type: 'GET'
- }).success(function (result) {
- if(result !=null) {
- $("#txtProductID").val(result.ProductID);
- $("#txtProductName").val(result.ProductName);
- $("#txtCount").val(result.Count);
- $("#txtPrice").val(result.Price);
- $("#txtDescription").val(result.Description);
- }
- }).error(function (data) {
- alert(data);
- });
- }
- $('#btnCreateProduct').click(function () {
- $('#editProductBlock').show();
- $('#btnCreate').show();
- $('#btnSave').hide();
- $('#typeBlock').html("Create Product");
- });
- // Create product$('#btnCreate').click(function () {
- varproduct = {
- ProductID: 0,
- ProductName: $('#txtProductName').val(),
- Price: $('#txtPrice').val(),
- Count: $('#txtCount').val(),
- Description: $('#txtDescription').val()
- };
- $.ajax({
- url: '/api/products/',
- type: 'POST',
- data: JSON.stringify(product),
- contentType: 'application/json'
- }).success(function (result) {
- LoadProductList();
- $('#message').html("Product create success.");
- }).error(function (data) {
- alert(data);
- });
- });
来源: http://www.bubuko.com/infodetail-1963450.html