MVC跨域API

API

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;
using yue5API.Models;

namespace yue5API.Controllers
{
[EnableCors("*", "*", "*")]
public class BookApiController : ApiController
{
// GET: api/BookApi
yue5DBEntities db = new yue5DBEntities();
public IEnumerable<stu> Get()
{
return db.stus.ToList();
}

// GET: api/BookApi/5
public stu Get(int id)
{
var tt = db.stus.Where(s => s.ID == id).FirstOrDefault();

return tt;
}

// POST: api/BookApi
public void Post([FromBody]stu value)
{
db.stus.Add(value);
db.SaveChanges();
}

// PUT: api/BookApi/5
public void Put(int id, [FromBody]stu value)
{
var tt = db.stus.Where(s => s.ID == id).FirstOrDefault();
if (tt != null)
tt.ID = value.ID;
tt.Name = value.Name;
tt.Num = value.Num;
tt.Price = value.Price;
db.SaveChanges();
}

// DELETE: api/BookApi/5
public HttpResponseMessage Delete(int id)
{
var tt = db.stus.Where(s => s.ID == id).FirstOrDefault();
if (tt != null)
{
db.stus.Remove(tt);
db.SaveChanges();
return new HttpResponseMessage() { StatusCode = HttpStatusCode.OK };
}
else
{
return new HttpResponseMessage() { StatusCode = HttpStatusCode.NoContent };
}
}
}
}

MVC

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web;
using System.Web.Mvc;
using yue5MVC.Models;
using Newtonsoft.Json;
namespace yue5MVC.Controllers
{
public class showController : Controller
{

//显示
// GET: show
public ActionResult Index()
{
Uri uri = new Uri("http://localhost:4970");
HttpClient client = new HttpClient();
client.BaseAddress = uri;
client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage message=client.GetAsync("api/BookApi").Result;
List<All> tt = new List<All>();
if (message.IsSuccessStatusCode)
{
string pp = message.Content.ReadAsStringAsync().Result;
tt = JsonConvert.DeserializeObject<List<All>>(pp);
}
client.Dispose();

return View(tt);
}
public ActionResult add()
{
return View();
}

//删除
public ActionResult shan(int id)
{
Uri uri = new Uri("http://localhost:4970");
HttpClient client = new HttpClient();
client.BaseAddress = uri;
client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage message = client.DeleteAsync("api/BookApi/"+id).Result;

if (message.IsSuccessStatusCode)
{
return Content("<script>alert('删除成功');location.href='/show/Index'</script>");
}
else
{
return Content("<script>alert('删除失败')</script>");
}
}

//修改
public ActionResult xiu(int id)
{
ViewBag.id = id;

return View();
}

}
}

前台修改

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>xiu</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
<p>名称:<input id="txtname" type="text" name="Name" /></p>
<p>数量:<input id="txtnum" type="text" name="Num" /></p>
<p>价格:<input id="txtprice" type="text" name="Price" /></p>
<input id="Submit1" type="submit" value="sub修改" />
<input id="Button1" type="button" value="修改" onclick="xiu()" />
<script>
$(function () {
show();
})
function show() {
var id = '@ViewBag.id';
$.ajax({
url: "http://localhost:4970/api/Bookapi/"+id,
type: "Get",
success: function (data) {
$("#txtname").val(data.Name);
$("#txtnum").val(data.Num);
$("#txtprice").val(data.Price);
}

})
}
function xiu() {
var id = '@ViewBag.id';
$.ajax({
url: "http://localhost:4970/api/Bookapi/"+id,
type: "Put",
data:{ID:id,Name:$("#txtname").val(),Num:$("#txtnum").val(),Price:$("#txtprice").val()},
success: function (data) {
alert("修改成功");
location.href = '/show/Index';
}

})

}
</script>
</div>
</body>
</html>

添加

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>add</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
<p>名称:<input id="txtname" type="text" /></p>
<p>数量:<input id="txtnum" type="text" /></p>
<p>价格:<input id="txtprice" type="text" /></p>
<input id="Button1" type="button" value="添加" onclick="tian()" />
<script>
function tian() {
$.ajax({
url: "http://localhost:4970/api/Bookapi",
type: "Post",
dataType: "json",
data: { Name: $("#txtname").val(), Num: $("#txtnum").val(), Price: $("#txtprice").val() },
success: function (data) {
alert("添加成功");
location.href = '/show/Index';
}

})
}
</script>
</div>
</body>
</html>

显示

@{
Layout = null;
}
@model List<yue5MVC.Models.All>
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>
<table>
<tr>
<td>名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>@item.Num</td>
<td>@item.Price</td>
<td><a href="#" onclick="shan(@item.ID)">删除</a>
<a href="/show/xiu/@item.ID">修改</a></td>
</tr>

}
</tbody>
</table>
<table id="show"></table>
<script>
$(function () {
show();
})
function show() {

$.ajax({
url: "http://localhost:4970/api/Bookapi/"+id,
type: "Get",
success: function (data) {

var str = "";

str += "<tr><td>" + data.Name+ "</td></tr>";
str += "<tr><td>" + data.Num + "</td></tr>";
str += "<tr><td>" + data.Price + "</td></tr>";

$("#show").val();
}

})
function shan(id){

location.href='/show/shan?id='+id;
}
</script>
</div>
</body>
</html>