[ASP.NET MVC]新增一個ASP.NET MVC 4的Twitter Bootstrap專案!

本文章已移至分站點部落-程式宅急便

http://www.dotblogs.com.tw/kyleshen/archive/2013/04/17/101722.aspx

[ASP.NET]利用Jquery來實作Ajax—使用aspx篇

好啦，我知道這關鍵字「Jquery、Ajax、aspx」丟到Google去一定跑出無數的文章
但偏偏這功能又很常用，現在即使是WebForm只要使用Postback好像就Low掉的感覺
所以一直以來都很想寫篇文章自己記錄一下用法。
一般用法
新增AjaxStart.html、AjaxHandle.aspx兩支程式
AjaxStart.html用來實作向Server端發送Request
AjaxHandle.aspx用來接收Request並回傳結果

AjaxStart.html內容

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn_ajax').click(function () {
                $('#loading').show(); //開始Ajax，顯示讀取中圖片
                $.ajax({
                    type: 'POST',
                    url: 'AjaxHandle.aspx',
                    data: 'id=1', //發送參數
                    success: function (data) {
                        console.log(data); //輸出結果
                        $('#div_result').html(data); //將結果呈現在Div裡
                        $('#loading').hide(); //結束Ajax..關閉讀取中圖片
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        $("body").append(xhr.status);
                        $("body").append(xhr.responseText);
                        alert("Ajax發生錯誤!!");
                    }  
                });
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn_ajax" value="StartAjax" />
<span id="loading" style="display:none;">Loading....</span>
<div id="div_result" >
</div>
</body>
</html>

AjaxHandle.aspx.cs內容

在新增aspx後，第一步要先將預設產出的Html刪除掉，

以免Ajax回去後，也將這些Html一併回傳



我們可以在Page_Load裡撰寫Code，接收前端給我們參數，再做資料的處理

protected void Page_Load(object sender, EventArgs e)
{
    string ID = Request.Form["ID"]; //接受傳入的參數
    Response.Write("Hello ID Value : " + ID);
}

再將刪除的區塊改成回傳一個table標籤，當然實際情況會依Request傳入的參數顯示不同資訊



前端接收到可把它Append到一個Div標籤裡，即可完成Ajax動作



回傳Json資料的用法

有時我們會需要Server端回傳的是一個Json字串，再由前端去做資料的處理

可進行以下改寫：

AjaxHandel.aspx.cs內容

protected void Page_Load(object sender, EventArgs e)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    List<UserData> _list = new List<UserData>();
    
    //加入5筆假資料
    for (int i = 1; i <= 5; i++)
    {
        UserData _data = new UserData();
        _data.id = i;
        _data.name = "測試" + i;
        _list.Add(_data);
    }

    var retunJson = serializer.Serialize(_list);
    Response.Write(retunJson);
    Response.End();
}

public class UserData
{
    public int id { get; set; }
    public string name { get; set; }
}

AjaxStart.html內容

success: function (data) {
    console.log(data); //輸出結果
    $('#div_result').html(data); //將結果呈現在Div裡
    var array = $.parseJSON(data);
    //迴圈取出資料
    $.each(array, function (i, item) {
        var content = "id: " + item.id + "; name: " + item.name;
        var li = "<li>" + content + "</li>";
        $('#div_result').append(li);
    });
    $('#loading').hide(); //結束Ajax..關閉讀取中圖片
},

[ASP.NET MVC]如何設定Area底下的頁面為起始頁(網址路由Routing)

今天突然收到朋友的Line : 你知道怎麼把MVC Routing設定為Area底下的頁面嗎?
當下很帥氣的回覆：在Global底下Application Start裡的Routing設定就好了阿(煙)
但其實這是很不負責的答案阿XDD 回家到電腦旁趕緊試一下！
首先要先淺談一下MVC的Area
在開發較大型的MVC網站中，通常會進行模組化的規劃，如一直在同一個Controller資料夾底下新增會越來越龐大
另一個問題就是Controller不允許有相同命名的存在，偏偏模組中常有父子關係，有時子模組命名相同就會造成錯誤
為了區別而去修改命名又不是一個好架構，以上種種因素都會造成維護上的困難
故我們通常會在專案底下加入Area，每個Area底下又會有獨自的MVC資料夾，Area通常會看公司&網站的屬性去規劃
以我前公司的經驗，因是內部系統，故我們會By部門去切割Area，當然電子商務網站，就可考慮By功能性
Area規劃及使用方式，可參考以下文章：
[MVC]專案客製化方式
使用Areas分离ASP.NET MVC项目（前后台以及对应功能模块）
切割Area後但存在相同命名Controller依然出錯可參考此篇
設定MVC的Routing
以下在專案新增一個SurveyArea，並新增一個Hello的Controller，在產生一個Index的View

再來我們執行網站，該頁面的網紙就會如下：
http://localhost:9937/SurveyArea/Hello/index
http://localhost:9937/Area/Controller/View

那要怎麼讓使用者打http://localhost:9937/就能進到此頁面呢
這都定義在Global.asax裡面RouteConfig的靜態類別

進入RouteConfig，會發現預設會是以下的Code
可看到Routing預設對應的Controller、action、Get參數
MVC會逐筆去對應Contorller，並產生以上的網址

但這種方式是不會去掃Area底下的，故我們要指定Area讓他去抓底下的Contorller

Done!!

[CSS]利用Bootstrap打造友善介面-CSS篇

在一般Web分工通常Layout會由網頁設計師提供Prototype(版型)，
然後程式設計師再將功能面完成，但有時一些內部系統，
可能網頁設計師就沒那個時程幫你客製化Layout，
再加上程式設計師多半對介面較沒有Sense…
導致調配色調半天畫面看起來還是像當機一樣T__T
Bootstrap就是一帖良藥，程式設計師不用一直去調CSS啦!!
雖然官網已經寫得非常清楚了，但還是記錄一下用法並附範例檔，
希望能幫助到看英文就眼花的人，也讓我未來能直接複製貼上
這篇主要先介紹Bootstap CSS的部分
首先，先產生一些常用的Html控制項

接著至Bootstap首頁下載檔案，下載回來後會是一個壓縮檔
會有css、img、js資料夾，js這篇文章就不多講了，他還是有提供一些API供使用

CSS資料夾裡面會有四個檔案，min是指壓縮過後的檔案，檔案大小會比較小
bootstrap-responsive.css主要是針對各種不同裝置(手機、平板)時，畫面會自動調到合適的大小
真是彿心來的，詳細用法可至Bootstrap首頁->Scaffolding查看

接下來就將控制項大改造吧，只要在頁面載入bootstrap.css，
就會發現有些標籤樣式已變，如text、h1-6、Button
如要變更其他樣式，只要控制項套入css class即可，真的很方便!

當然也不用完全去官網查看class，intellisense都看得到

Text

Button

按鈕大小在去設定.btn-large, .btn-small, or .btn-mini即可

Image

Table

當然預設顏色不滿意，可去.css檔調整，像我會把hover的顏色改掉：

完成圖

結論：程式設計還是好好寫Code，介面美化就交給Bootstrap吧XD
Sample Code

[好用網站]overapi.com幫您整合各程式語言API函式庫

無意間發現一個挺實用的網站－overapi.com

此網站整合了很多程式語言的API查詢，如Javascript、Jquery、CSS、Node.js…

我自己常用的當然就是Web相關的

各API也幫你分類好了，非常一目瞭然!

以Jquery為例，點選之後就幫你導向官網

有這種彿心來的網站真的省了不少時間!!

[ASP.NET MVC]使用ELMAH監控網站時，一直發生action找不到之錯誤信

ELMAH是一套用來監控網站的套件，如程式出錯，可將錯誤訊息Mail至開發人員，進行最快速的處理
相關使用方法網路上也寫到爛掉了，以下是一些前輩的文章：

如何在 ASP.NET MVC 4 套用 ELMAH 錯誤紀錄模組

使用 Elmah 來記錄 ASP.NET 網站的錯誤

攻略 ASP.NET MVC - 偵測監控「ASP.NET MVC 偵測監控與 Log 記錄」

但今日專案上卻一直收到以下錯誤信：

什麼!? 找不到Index這個方法，但我Controller根本沒這個Action阿
且使用者也沒奪命連環Call打來幹譙系統出錯…
找了半天結果是某支View，在Html的IMG標籤將Src設定為空白：
<img id=”img_test” scr=’’ />
這種情形下，如使用者到這頁面就會發出錯誤訊息，
且經測試只有IE8會有此情況…IE9+ and Chome , Firefox皆正常不會發送
還蠻詭異的，花了我一個小時，趕快紀錄一下!!

[JavaScript]透過Script直接設定列印邊界

Blog停擺好久!!!原因為前一份工作專案較忙，後來又決定踏入人生第一次轉職，

故一直到最近面試階段才有比較空閒的時間，離題離很大，總之希望Blog接下來能好好經營，

該多花點時間Study之前想碰的新技術了。當然這過程還是有將一些程式記錄在Evernote，

今天要分享在前端直接設定列印邊界的程式，之前的需求是列印的數據要直接印在紙本報表上

當然邊界的設定就很重要，故在列印前就用程式去指定

以免使用者去動過設定，格式整個就會跑掉。

Survey過程中，意外發現兩個套件(IE Only)，紀錄一下：

ScriptX為一個前端的套件，透過此套件可以輕易的用Script去操控印表機設定

只要下載套件，將smax.cab加入網站，再於Html指定以下Code：

就可輕易的去操控印表機設定，免費版就有以下功能了，還可設定不跳出瀏覽直接Print：

當然最後還是沒有採用此Solutions，因在localhost跑得好好的，

未注意到如要放至Server上會無法使用，因需購買License，如是用免費版必須將Domain address寄給作者申請。

另一個套件叫Pazu，是大陸四方在線所開發的套件，他們的網站已有詳細的中文Sample Code了

一樣你可在localhost試用，如覺得不錯用要放在Server的話可再跟作者申請，再這就不詳細說明了

以上兩個套件完了半天都才發現要申請，故最後還是放棄了決定自己Survey，

其實要修改列印邊界，不外乎就是用到IE的ActiveX，故以上兩個套件也是IE Only

邊界設定都存在於Client端的登錄檔，故可用以下程式去修改：

var path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; 
var _Reg = new ActiveXObject("WScript.Shell"); 
_Reg.RegWrite(path+"header",""); //頁首 
_Reg.RegWrite(path+"footer",""); //頁尾
_Reg.RegWrite(path+"margin_bottom",parseFloat(10.0)/10/2.54); //登錄檔的單位為公吋 
_Reg.RegWrite(path+"margin_left",parseFloat(10.0)/10/2.54); 
_Reg.RegWrite(path+"margin_right",parseFloat(10.0)/10/2.54); 
_Reg.RegWrite(path+"margin_top,parseFloat(10.0)/10/2.54); 

因使用到ActiveX，故IE瀏覽器設定上需將此區域加入信任，

或至IE->網頁網路選項，將ActiveX調為啟用或提示：

如此在列印之前就能去將瀏覽器的邊界列印設定改掉～

但後來發現即使邊界設定一樣…不同印表機印出的結果也不一樣…

這就是另一段故事了…我必須針對不同印表機去測試出邊界數據來解決….T_____T