網頁:jQuery+ajax取得Controller所送過來的後端資訊(JSON)
後台:MVC架構,利用Controller取得物件資訊並轉換成JSON format回傳至網頁
網頁前端程式1:
透過ajax送出{欄位:參數}資訊至Controller端
取得result值(JSON Format)後,透過timetable轉成Html格式課表
$.ajax({
url: '/Data/TimeTable,
type: 'Get',
dataType: 'json',
cache: false,
contentType: ' application/json; charset=utf-8',
data: JSON.stringify({欄位1: 參數1,欄位2: 參數2:}),
success: function (result) { $("#mytimetable").html(mytable(result)); }
});
網頁前端程式2:轉成自訂格式課表
function mytable(data) {
var grid = "";
$.each(data, function (i, item) {
grid += item.SUN + "|";
grid += item.MON + "|";
grid += item.TUE + "|";
grid += item.WED + "|";
grid += item.THR + "|";
grid += item.FRI + "|";
grid += item.SAT + "|";
grid += "/跳行/";
});
return grid;
}
後端C#程式
//節次物件(每一節課:從週日到週六的課表)
public class TimeTableD {
public string SUN { get; set; }
public string MON { get; set; }
public string TUE { get; set; }
public string WED { get; set; }
public string THR { get; set; }
public string FRI { get; set; }
public string SAT { get; set; }
}
MVC Controller端程式
[HttpGet]
public ActionResult TimeTable(欄位1,欄位2) {
// 依參數取得資料.....
List myLists = new List ();
myLists.add(new TimeTableD() { SUN="國文",MON="自修",TUE="自修",WED="自修",THR="自修",FRI="",SAT="" }); //第一節
myLists.add(new TimeTableD() { SUN="國文",MON="英文",TUE="數學",WED="數學",THR="英文",FRI="",SAT="" }); //第二節
myLists.add(new TimeTableD() { SUN="國文",MON="英文",TUE="數學",WED="英文",THR="數學",FRI="",SAT="" }); //第三節....
//安全性的考量,MVC預設禁止Get傳回Json結果(POST則沒有限制)
return this.Json(myLists,JsonRequestBehavior.AllowGet);
}
- Dec 27 Tue 2011 14:19
[mvc3] jQuery Ajax+JSON (後端程式C#)
全站熱搜
留言列表
禁止留言