利用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網頁(三)