網頁: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);
}

arrow
arrow
    全站熱搜

    湯瑪的吳 發表在 痞客邦 留言(0) 人氣()