2012年4月30日 星期一

利用javascript實做 MVC 網頁(二)

開發ASP.NET網頁總覺得卡卡地,故思能否將網頁與後端程式分離,原由見 利用javascript實做 MVC 網頁(一)
經幾日來的摸索,似乎無法達到完全分離的目標,畢竟由一個網頁submit表單到另一個網頁時,仍需依靠後端程式來接收及預做處理,接收的工作無法由前端的 Javascript 來達成,整個實作原則說明如下:(還望有高手指點,提供更佳做法)

一、如網頁不需接收表單資料(來自它頁或自頁),則此網頁可以單純以 Html+Javascript 撰寫,例如:Login頁

二、如果網頁需接收表單資料:
(方式一)利用 或 先引入(#include file="file.aspx" , <% =function()%>)接收表單資料的程式。
virtual:是相對於url的路徑;file:是相對於檔案系統的路徑。

(方式二)利用CodeBehind 將接收表單資料的程式寫在 Page_Init 區段或Page_Load區段。

不論使用方式一或方式二,都可以把表單結果以Javascript物件或陣列方式,插入網頁中。


<!--#include file="pageload_fun.aspx"--> 

<script language="javascript" type="text/javascript"> 

var formObj=<%=formData%> 

</script>
(20130525補充將Post的資料直接輸往前端,有時可能不妥,此時可利用 Session 先紀錄著,而傳送到前端的是 Session的 Index,這個 Index 可是使用 GUID)

則前端網頁之JavaScript就可以操作 formObj,利用此技巧,任何後端要交付前端處理的資料皆可輕鬆達成!


pageload_fun.aspx 內容:

<%@ Import Namespace="System.Web.Script.Serialization" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script language="C#" runat="Server">
    Dictionary<String, String[]> formItems = new Dictionary<string, String[]>(); //做為 json 轉換前的接收物件
    string retStr = "", jsonStr = "";

    void Page_Load(object sender, System.EventArgs e)
        {
            JavaScriptSerializer js=new JavaScriptSerializer();
          
            NameValueCollection postForm;
            postForm = Request.Form;
            String[] arrKeys = postForm.AllKeys;
            for (int i = 0; i < arrKeys.Length; i++)
            {
                retStr += arrKeys[i] + ":" + postForm.GetValues(arrKeys[i])[0];
                if ((i+1) < arrKeys.Length) retStr += "&";
                //上面是以字串拼接方式回傳,下面是用 Dictionary 轉 json 方式回傳
                formItems.Add(arrKeys[i],postForm.GetValues(arrKeys[i]));
            }
            if (null != Session["_ValCheckCode"]) retStr += "
Session:" + Session["_ValCheckCode"].ToString(); //只是為測試驗證碼是否有改變而已
            jsonStr =  js.Serialize(formItems);
            Response.Write(retStr + "
" + jsonStr);
        }
</script>

  如果希望後端傳回前端有關網頁欄位之產製資料(例如:要對 id 欄位設定值及style、size 等),則資料須以 Dictionary 傳回,而傳回的 Dictionary 型態為:

Dictionary<string, Dictionary<string, string>>

外層的 key 對應到網頁欄位的 id,而內層的 Dictionary 則是指定的 Attribute 及其值,參考代碼:
    Dictionary<string, string> Attr=new Dictionary<string,string>();
    Dictionary<string, Dictionary<string,string>> D=new Dictionary<string,Dictionary<string,string>>();
    Attr.Add("value", "i80091");
    Attr.Add("style", "color:red");
    D.Add("userid", Attr);
    Dictionary<string, string> Attr2 = new Dictionary<string, string>();
    Attr.Add("value", "cmj521204");
    Attr.Add("style", "color:blue");
    D.Add("pwd", Attr);           
           
    retVal = JSON.toJSON(D);

系列連結:
利用javascript實做 MVC網頁(一)
利用javascript實做 MVC網頁(三)

沒有留言:

張貼留言