2013年5月29日 星期三

[ASP.NET MVC]Twitter Bootstrap 專案-新增選單與相關頁面

前言

小弟前一陣子有寫過「[ASP.NET MVC]新增一個ASP.NET MVC 4的TWITTER BOOTSTRAP專案!」,以往建置企業化網站或個人網站往往會花很多時間在版面上,現在使用MVC至NuGet下載此套件來開發,則可很快速的可建置出個人化網站。今天要介紹如何定義自己的選單,及產生新的頁面。

Step 1 新增一個Controller

至Controller資料夾->點選加入->控制器,這邊建了一個CodeSkillController

2013-05-29_193419

移至Controller,將想增加的頁面加上,規劃為一個StartPage頁面,而底下有三個子頁面

image

Step 2 將四個頁面加入檢視(View)

再上面四個頁面點選右鍵->加入檢視,則會跳出下方視窗,我們點選使用配置或主版頁面

image 

這邊會看到很多樣本可以選,最主要的差別在於版面的差異

image

加完後架構應該如下,CodeSkill下有四個頁面

image

Step 3 增加選單連結

在App_Start中,跟以往內建的MVC專案一樣會載入一些打包壓縮、路由規則、過濾器…等獨立檔案,在這邊不多做介紹,我們點選ExamplelayoutsRouteConfig.cs

 image

這邊是Sample Code幫我們產生的預設目錄,之後可以依需求更改,可設定Routes,來選擇要載入的頁面,即顯示名稱

image

我們在底下加入剛剛寫好的頁面,CodeSkillCntroller,及對應的View,StartPage為母選單,其他頁面使用.AddChildRoute加入

image

完成!Run看看吧

選單目錄

image

_BootstrapLayout.basic.cshtml 樣板

image

_BootstrapLayout.empty.cshtml樣板

image

_BootstrapLayout.narrow.cshtml樣板

image

後記

學新東西我覺得看Sample Code學習最快速,且現在資訊發達,很多事情都有人幫你架構好,所以建置一個新網站再也不是一件難事,希望能幫助到有打算剛要學習MVC或建需新網站的初心者一點忙。

 

相關文章

[ASP.NET MVC]新增一個ASP.NET MVC 4的TWITTER BOOTSTRAP專案!

2013年5月28日 星期二

[ASP.NET]用ConvertAll 泛型方法來進行Array或List轉型

今天無意間發現ConvertAll這個語法小技巧,覺得蠻實用的,研究了一下趕緊記錄下來,首先先來看看MSDN的解釋
image
簡單來講,這個語法可以將Array或者是List<object>來進行轉型,廢話不多說,以下寫了兩個簡單範例來分享
List<int> -> List<string>
此範例我們將一個INT List轉換成String List,在以往可能不會想很多就直接用foreach去丟,現在用此語法只要一行就可以解決,而TransTostring是用來進行轉換的function,如果有其他轉換需求,就可寫在此function裡面。
image
List<object> –> List<object>
來搞點複雜一點的,此範例我們用計算BMI值來Demo,首先先建一個BMI的class,裡面包含身高體重和BMI值,接著新增兩筆身高體重資料,再用ComvertAll去計算BMI值,我這邊直接把計算結果丟回原本的List,當然你也可以New一個List<double>來儲存資料,只要修改成new<Converter<BmiModel,double>即可,如此就不用迴圈去處理計算了,程式碼也比較簡潔一點。
image
執行結果,寫完文章才發現BMI值怪怪的,原來是我公式抄錯了,不管了那不是重點 囧
image
--
Reference
http://msdn.microsoft.com/zh-tw/library/73fe8cwf(v=vs.80).aspx

2013年5月27日 星期一

[Office]利用Excel來解析SQL Command

常常寫Stored procedure或者是ADO.NET時,INSERT字串出錯常常還蠻惱人想砸螢幕的(對小弟SQL能力而言啦…),例如下列語法,如果某個欄位出錯,閱讀不易的關係要一個一個去檢查,今天看到同事利用Excel來解析和Debug SQL Command的小技巧,偷偷把他學了起來,來分享一下(小弟見識淺薄…也許很多人早就知道了… T__T)

INSERT INTO dbo.Customer (ClientID,fname,lname,birthday) values ('B10000','Kyle','Shen','12345')

欄位少還好,如果欄位一拖拉庫,要解析那個欄位出錯就不太容易,這時我們可以用Excel的功能來處理。

解析逗號字串

先在SQL輸入sp_help dbo.Customer語法

image

再將欄位貼到Excel

image

再將INSERT的字串'B10000','Kyle','Shen','12345'貼到Excel

image

點選資料->資料剖析

image

選擇逗號分隔

image

image

接著欄位就會拆開了,然後把四個欄位複製

image

回到剛剛的工作表,點右鍵->選擇性貼上->選擇橫向轉直向的圖示

image

完成圖,可以一個一個去看到底哪個欄位出錯了!!!

image

2013年5月25日 星期六

[JQuery]判斷頁面圖片是否載入完成並延遲載入

需求
當頁面圖片很多、網路又不快時,圖片顯示會由上往下慢慢顯示,這會讓使用者觀感很不好,故我希望在圖片載入完成時,再將該圖片顯示,並用文字提示載入完成,雖然這個需求有很多JQuery的套件可以完成,且效果都還不錯,如 MasonryLazy Load,但還是自己想親手試試,當作給自己的一個小習題 :P
首先先找圖片(找超久..),因放localhost載入會很快,所以我去Google了一些圖片,特別要注意的事,這些圖片像素都很大,我在img標籤指定大小,但這樣實際傳輸的大小會跟原始圖片一樣大,並不會因為指定Size後而有所改變
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img1" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img2" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img3" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img4" width="300" height="451" />
<img src="http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg" id="Img5" width="300" height="451" />
<img src="http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg" id="Img6" width="300" height="451" />
接著於<head></head>放入以下程式碼,當然請記得載入JQuery,程式大概邏輯是,先抓取每個圖片的DOM,利用this.complete的語法來判斷是否已載入完成,如果載入完成就將此圖片顯示,並印出此DOM的ID,至於GetRumdomStr函式則可忽略,我只是要在每個Src後面加入參數,讓瀏覽器認為這是一個未cache過的圖片。
<script type="text/javascript">
    GetRumdomStr = function () {
        var str = "";
        var maxNum = 10;
        var minNum = 0;
        var n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
        for (var i = 1; i <= 50; i++) {
            n = Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum;
            str += n.toString();
        }
        return str;
    };

    $(document).ready(function () {
        $('img').hide(); //先把所有圖片先隱藏
        var ImgCount = $('img').length; //取得圖片的個數
        $('img').each(function () {
            var str = GetRumdomStr(); //請忽略,讓圖片加隨機亂數,視為模擬未曾下載過的圖片
            var url = $(this).attr("src");
            $(this).attr("src", url + "?" + str);

            function ImageLoading() {
                msg = "Image ID : " + this.id + "....done";
                console.log(msg);
                $('#msg').append("<div>" + msg + "</div>");
                $(this).fadeIn(2000);
                ImgCount--;
                if (ImgCount === 0) {
                    console.log("All images Loaded..");
                }
            }

            if ($(this).complete) {
                imageLoaded.call(this);
            } else {
                $(this).one('load', ImageLoading);
            }
        });
    });
</script>

完成圖&程式碼下載

image

--

圖片參考

http://figurehobbyclub.tw/forum/data/attachment/forum/201305/10/153647wfx1i5xc5a011rz0.jpg

http://img.miigii.com.tw/Files/Gonglue/20110201/3d524ac9ddcd45ffa73af674630ad079.jpg

2013年5月24日 星期五

[MS SQL]含有上午or下午字串轉成DateTime之錯誤處理

前言

此篇文章標題實在很難下,所以我需要描述一下情境。因最近接手一個國外的Project,首先必須先將開發環境建置起來,但有關日期的程式寫法,都是在C#將Datetime直接ToString,然後這個string直接丟到SP去處理,正式環境都跑得好好的,測試環境在DB就發生了日期轉型錯誤的Exception。

還原&除錯

在C#裡,會產生出類似這種string,Response的結果會是2013/5/25 上午 00:21:25這種格式

image

之後這個string,會丟到SP做一些處理,這種格式就會發生錯誤

image

當然可以修改程式,讓ToString時可以自己指定格式,如下圖

image

但整個工程太浩大,暫時不想花那麼多時間去重構程式,因DataTime的時間,是抓該台Server的日期設定格式,故朝著修改Server設定的想法去做,讓測試環境能Run起來,而到時因正式環境會全是英文,故比較不會出現有中文字串之問題。

首先先到控制台>時間語言語和區域>地區及語言

image

調整日期格式,將tt hh:mm調整為HH:mm: ss(24小時制)

QQ截圖20130523143252 QQ截圖20130523143309

照理修改完後,去頁面執行應該會是輸出此格式,但發現還是沒變(重開機也一樣)

真的很詭異,後來發現登錄檔的值根本沒變,故直接朝著他下手…在執行視窗輸入執行regedit.exe

image

進入底下路徑,將sShortTime及sTimeFormat的tt格式拿掉,之後再重開機

image

如此在頁面上,Response出來就會是2013/5/25 00:33:29這種格式,丟進SP也不會出錯了

image

後記

其實看不同國家的Code還蠻有趣的,會考慮到語系、編碼之類的問題,在看這些Code也覺得這些小地方可能要再多考慮一點,如Datetime還是把他格式標準化比較好。

[IIS]從伺服器端指定回應的IE瀏覽器版本

因公司內部古老元件只吃IE8以下,偏偏我的電腦都已升到IE10,又不太習慣使用IE Test等輔助工具,所以常常都是按F12進入開發者模式,再將模式調成IE8,但這樣真的很麻煩,IE瀏覽器也沒有固定流覽器模式的設定,所以只能從Server-Side下手。

在Html裡,其實可以直接利用meta-tag指定IE的版本,語法如下:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

但這樣每支程式改玩都已天荒地老了,所以可以在IIS的Http回應標頭設定:

點選你的站台,右方會看到HTTP回應標頭。

1

接著設定標頭,如此在整個網站下,都會以IE8相容模式瀏覽。

2

---

Reference

http://blog.miniasp.com/post/2009/03/12/work-around-webpage-display-issues-in-Internet-Explorer-80.aspx

http://nathanmint.pixnet.net/blog/post/98531870-ie-%E7%9B%B8%E5%AE%B9%E6%80%A7%E6%AA%A2%E8%A6%96%E8%A8%AD%E5%AE%9A-%26-%E6%96%BC%E7%80%8F%E8%A6%BD%E5%99%A8%E4%B8%AD%E5%BC%B7%E8%BF%AB%E6%8C%87%E5%AE%9Aie%E7%89%88

2013年5月6日 星期一

[研討會]2013/05/04 微軟實戰課程日會後心得

前言

雖然最近都忙著上海出差行程,但還是抽空參加了微軟實戰課程日,這是首次微軟MVP Open day,有非常多的課程主題,講師皆為現任專業的微軟MVP,課程規劃媲美tech day,重點還是免費的,甚至還提供午餐,真的是太棒了,所以現場也是人山人海,希望下次還有類似活動。

1 (圖片擷取至活動頁面)

除一些主題研討外,小弟選修課程選了ASP.NET using SPA、雲與端的整合、TypeScript,趁著這一兩天記憶猶新,趕快做個重點紀錄與分享課堂的Slider

『傑克與魔豆』『雲裡霧裡走一遭,從一顆豆芽開始』

這場可以說是大師級人物的面談會,主題可以稱做是資訊產業的黑暗面嗎(笑),由曹祖聖老師當主持人詢問一些資訊產業常遇到的問題,及處理方式。

1.資訊產業就像一個金字塔,頂端總會有一個大師,如Sql Server領域的胡百敬老師,要拿到此領域,最重要的還是要有興趣及持之以恆,因為大師會老,B咖會長大。

2.專案常常收不到錢的悲哀,結論該說台灣環境就是如此嗎!?只能試著訪談用一些小技巧或者是在專案裡面埋黑暗大法吧(誤)。

3.技術日新月異,最重要的還是打好基本功,再未來即使即使再變化都能駕輕就熟。

4.學新技術不建議一個人走,會非常辛苦,找志同道合的夥伴會進步非常快,且對程式要有愛。

5.雲端產業未來看好,但大型架構最好要會切割,就算是雲端Server也不是無上限。

6.使用者一定會有天方夜譚的想法,要會教育使用者。

7.工作與學習要能拿到平衡,試著想想Survey的新技術能再一年後能feedback給公司,公司會比較支持,肯花這些學習成本。

8.不要因為App現在很火紅就已收入為切入點,最重要的還是有要愛與興趣(是的,這次本場最大的結論)。

9.F#或許現在很冷門,但肯投資、肯分享,難保未來會成為趨勢,就像曹祖聖老師玩.NET 1.0 beta被笑一樣(笑)

『點部落社群發展的心得』

進到會場大鈞前輩已講到一半,總之經營社群一定很多的甘苦談,我們要給予支持,讓台灣IT產業越來越好

「使用ASP.NET MVC開發SPA網站」

IMG_0599

這場是由Sky及Demo前輩講解,可不是教如何開發溫泉業者的網站(笑),SAP又為(Single Page Application),整個概念就是讓網頁只更新部分資訊,聽起來有點就是Ajax的意思,但用SPA發的話,就只會有一個網頁來支持不同的裝置,好處是資料傳輸小(Json傳遞),前端與資料完全分離,定義好ViewModel即可前後端分開開發,壞處是不好做SEO,故需評估一下網站的性質。小弟認為SPA是個大學問,講師能在50分鐘類整理出大方向已經算很厲害了,如有興趣能參考投影片的資源去Survey。

投影片下載 (來源為twmvcStudy4)

「雲雨端的整合與企業應用」

IMG_0601

這場是董大偉老師的課,小弟最早學Silverlight就是看著老師的書入門的,現在已經面臨悲劇了,但我認為學到的對未來的技術都會有些相關,所以也不算是無言的結局阿。這場老師又重申開發人員的重要性,未來可能眼鏡、手錶等等裝置都有可能放入你寫的程式,要有價值的產出是很重要的,這場最讓我驚豔的就是Azure的Mobile Service,竟然可以在短短的幾分鐘之類完成工作分配的功能,還支援各裝置,手機通知功能,真的能讓開發人員省了很多時間。

董大偉老師文章連結及投影片下載 (來源為董大偉老師Blog)

「TypeScript開發實戰」

IMG_0605

這場是保哥講解,Typescript是由C#學之父所設計的新程式語言,最主要是給JavaScript型別的概念,保哥現場考了大家JavaScript型別的考題(還不少…),真的是考死大家了,所以JavaScript是一個全世界最讓人誤會的程式語言真的是無誤,typescript目前專案可直接導入沒問題,附檔名為.ts,可完全用Javascript or Jquery撰寫,但有些寫法需要改成較嚴謹,目前Bug持續再發生,但微軟有一組team再修這些Bug,所以是可參考投資的明日之星!

投影片下載 (來源為保哥的技術交流中心)

後記

我一直覺得研討會主要學到的是方向,而不是讓你學會精通這些技術,講師幫你創造了一條跑道,要不要選擇這條路就是看自己的興趣,有時因為時間的關係沒辦法說得的很完整,也不能太苛責講師,畢竟他們可是花了好幾個月或好幾年學這些新技術,把它整理成精華的一堂課阿,真的該給這些講師&前輩拍拍手!

----

如上敘筆記內容有錯,麻煩提醒小弟,我將盡快處理(我也是不熟才選這些課阿…Q_Q)