首先，先定義一下所需要的 Model 架構：
//C#: Model
public class Movie
{
public int ID { get; set; }
[StringLength(60, MinimumLength = 3)]
[Required]
public string Title { get; set; }
[Display(Name = "Release Date")]
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
[Range(1, 100)]
[DataType(DataType.Currency)]
public decimal Price { get; set; }
[RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")]
[Required]
[StringLength(30)]
public string Genre { get; set; }
[RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")]
[StringLength(5)]
[Required]
public string Rating { get; set; }
}
1. 後端資料傳遞給前端
後端傳遞給前端的作法還滿單純的，只要建立一個回傳型別為JsonResult的 Action，並回傳一個 JSON 物件即可
//C#: Controller
public JsonResult GetMovies()
{
List＜Movie＞ lstMovie = new List(){
new Movie
{
Title = "When Harry Met Sally",
ReleaseDate = DateTime.Parse("1989-1-11"),
Genre = "Romantic Comedy",
Price = 7.99M
},
new Movie
{
Title = "Ghostbusters ",
ReleaseDate = DateTime.Parse("1984-3-13"),
Genre = "Comedy",
Price = 8.99M
},
new Movie
{
Title = "Ghostbusters 2",
ReleaseDate = DateTime.Parse("1986-2-23"),
Genre = "Comedy",
Price = 9.99M
},
new Movie
{
Title = "Rio Bravo",
ReleaseDate = DateTime.Parse("1959-4-15"),
Genre = "Western",
Price = 3.99M
}
};
return Json(new { MoviesList = JsonConvert.SerializeObject(lstMovie) });
}
data.PropertyName方式取得資料。
//C#: View (JavaScript)
function GetMovies() {
$.post(
'@Url.Action("GetMovies")',
'',
function (data) {
alert(typeof data.moviesList); //return "string"
var lst = JSON.parse(data.moviesList);
alert(typeof lst); //return "object"
for (var i = 0; i < lst.length; i++) {
alert('Title: ' + lst[i].Title);
}
},
'json');
}
JsonConvert.SerializeObject()方式將清單內容序列化成字串，待前端取得資料後，再使用 JavaScript 的
JSON.parse()將已序列字串的內容再次反序列回 JSON 物件。
2. 前端資料傳遞給後端
前端資料傳遞到後端有兩種方式，第一種是直接將 JSON 物件序列化後以字串方式傳遞給 Server 端，另一種是不產生 JSON，而是產生矩陣 (Array) 物件，並以「參數」的方式將矩陣方式傳遞給 Server 端。2.1 使用 JSON
此種方式最主要的關鍵在於資料傳遞至 Server 端前，先將 JSON 物件透過JSON.stringify()方法轉換成序列化的字串。
//C#: View (JavaScript)
//透過已 stringifly 的字串，將資料傳至 Server 後端
function AddMovie_PassString() {
var movie = [
//Movie 1
{
"ID": 1,
"Title": "movie title 1",
"ReleaseDate": "2017-08-15",
"Price" : 15.89,
"Genre": "Comedy",
"Rating": "4.5"
},
//Movie 2
{
"ID": 2,
"Title": "movie title 2",
"ReleaseDate": "2017-08-15",
"Price": 14.99,
"Genre": "Comedy",
"Rating": "3.5"
}];
//Post data to server
$.post(
'@Url.Action("AddMovies_ByPassString")',
{ "dataPost": JSON.stringify(movie) },
function (data) {
//Do something here...
},
'json'
);
}
當 Server 端接收到字串後，再透過
JsonConvert.DeserializeObject()方式轉型成 List<T> 型別物件。
//C#: Controller
public JsonResult AddMovies_ByPassString(string dataPost)
{
List lst = JsonConvert.DeserializeObject＜List＜Movie＞＞(dataPost);
return Json(new { Result = true, Msg = "OK" });
}
2.2 使用 Array
上述 2.1 透過 JSON 物件麻煩處在於資料傳遞至後端時需要進行序列化的轉換，但若透過陣列作為參數進行傳遞，再搭配 MVC 的 DataBinding 的機制，資訊取得後並不需要任何型別轉換即可立即使用，似乎更加適合懶人的我。//C#: View (JavaScript)
//透過已陣列物件，將資料傳至 Server 後端
function AddMovie_PassArray() {
var data_array = [];
data_array.push({
"ID": 3,
"Title": "movie by array 1",
"ReleaseDate": "2017-08-15",
"Price": 18.99,
"Genre": "Comedy",
"Rating": "4.5"
});
data_array.push({
"ID": 4,
"Title": "movie by array 2",
"ReleaseDate": "2017-08-15",
"Price": 21.98,
"Genre": "Comedy",
"Rating": "3"
});
//Post datas to server
$.post(
'@Url.Action("AddMovies_ByArrayObj")',
{ "dataPost": data_array },
function (result) {
//Do something here...
},
"json"
);
}
//C#: Controller
public JsonResult AddMovies_ByArrayObj(IEnumerable dataPost)
{
return Json(new { Result = true, Msg = "OK" });
}
