2013年1月15日 星期二

[Jquery]使用Cycle Plugin輕鬆做出輪播功能

Jquery 是一個Javascript的函示庫,基本上不用太多介紹,它變成Web Dveloper必備的技能之一
套件多到每天逛也逛不完,今天要介紹最近工作有使用到的輪播/跑馬燈套件
目前網頁設計多半不會塞滿了文字,所以圖片輪播在網頁上還蠻常見的,
使用Jquery Cycle 套件只要幾行程式碼就可以完成此功能
官網已經有很多Demo的範例,這邊把一些比較會用到的功能做個紀錄: 
製作最陽春的輪播
Step 1 加入圖片檔,並塞至一個div標籤裡,內容可以換成Span or input 標籤當成文字跑馬燈
<div id="slideshow">
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>

Step 2 調整CSS
<style type="text/css">
#slideshow 
{  
    top: 0px; 
    left: 0px;  
    float: left;  
    width: 200px;  
    height: 10px;
    z-index: -5; 
} 
</style>

Step 3 加入Script
<!-- <script src="../jquery.cycle.lite.js" type="text/javascript"></script>-->
<script src="../jquery.cycle.all.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () { 
         $('#slideshow').cycle({  
             fx: "scrollHorz"  
         }); 
    });
</script>

是的,就是那麼容易,輪播功能已經完成了,
fx參數是切換的效果,如果不用太多炫麗的效果,
只要載入lite檔就夠了畢竟cycle.all.js檔會比較肥大,
切換效果參數的設定可以至此頁面參考,
加入分頁切換功能
圖片輪播完成了,但圖片很多總不能叫使用者傻傻等吧!
也是只要加入個div,設定幾個餐數就可以完成!
<div id="slideshow">
    <div id="nav1"></div>
    <img src="img1.png" />
    <img src="img2.png" />
    <img src="img3.png" />
</div>
$(document).ready(function () { 
    $('#slideshow').cycle({ 
         fx: "scrollHorz", 
         speed: 'fast', 
           timeout: 3000,  
           pager: '#nav', 
           slideexpr: 'img'
      }); 
});

如果要搭配Ajax去抓資料
如要使用Ajax,去做局部更新的效果
此套件也有很多事件可以控制:
$(document).ready(function () { 
    $('#slideshow').cycle({ 
         fx: "scrollHorz", 
         speed: 'fast', 
           timeout: 3000,  
           pager: '#nav', 
           slideexpr: 'img', 
        before: function (currslideelement, nextslideelement, options, forwardflag) {
              //抓到目前圖片的index  
              $('#txt_index').val($(nextslideelement).index());
            // do something .....  
        }  
      }); 
});

以上,還有很多功能可以去官網玩看看!!

















2013年1月12日 星期六

[ASP.NET]點選下載PDF,跳出下載視窗

目前大多瀏覽器都有內建Adobe Reader,可以直接在網頁上瀏覽

如果想讓使用者下載PDF的話只要使用WebClient類別

即使有裝Reader也會跳出下載提示了!

測試過手機瀏覽器也能正常下載:


System.Net.WebClient wb = new System.Net.WebClient();
//檔案路徑
string link = "http://localhost:56303/TempWebsite/Areas/DownloadPDF/Test.pdf";
Response.ClearHeaders();
Response.Clear();
Response.Expires = 0;
Response.Buffer = true;
Response.AddHeader("Accept-Language", "zh-tw");
Response.AddHeader("Content-Disposition", "Attachment;FileName=" + System.Web.HttpUtility.UrlEncode("測試PDF.pdf", System.Text.Encoding.UTF8));
Response.ContentType = "Application/pdf";

Response.BinaryWrite(wb.DownloadData(link));
Response.End();

2013年1月10日 星期四

[Visual Studio]使用Adobe Source Code Pro字型~使用VS2010

Adobe推出了程式碼字型-Source Code Pro,可以將原本比較死板的程式碼變為較活潑XD

官方全文似乎是針對VS 2012,不知道VS 2010能不能修改,所以趕緊來試試

首先先去下載頁面,下載完解壓縮後會產生以下檔案:

2
字型檔會有ttf和otf,筆者試過安裝otf在VS 2010下竟然找不到(原因待查...),故先點擊ttf安裝吧!

安裝完後打開VS 2010→工具→選項→字型與色彩,文字編輯器應該已經可以看到剛剛安裝的字型

10

選擇後,就會發現Code變成另一種Style啦~

3

但後來網路上發現有些人安裝看不到效果,甚至字體變毛毛的

保哥FB粉絲團分享國外有此解決方案,原文連結

為了某些人看到英文就眼花,在這裡筆者把它改成中文,順便為自己做個紀錄

Step 1 在左下角搜尋 ‘Clear ‘ →點選調整ClearType文字

4

Step 2 關閉此功能

5

Step 3 至我的電腦按右鍵→內容→進階系統設定→效能→設定

將視窗內部的控制向和元素的勾勾取消

6

Step 4 接著重啟VS 2010

會發現工作視窗的文字有些會變模糊

7

Step 5 再回到工具→選項→字型與色彩,選擇環境字型

將字型設定為Microsoft Sans Serif

10

照以上這些步驟,應該工作列跟Code都變正常了!!

想換心情、看膩預設的字型可以更改看看喔 ,XD

9

參考資料:
http://blog.sanc.idv.tw/2012/09/visual-studio-visual-studioadobesource.html
http://blogs.adobe.com/typblography/2012/09/source-code-pro.html
http://blog.miniasp.com/
http://blogs.msdn.com/b/visualstudio/archive/2010/03/15/visual-studio-2010-text-clarity-cleartype-and-aliased-fonts.aspx

2013年1月9日 星期三

[ASP.NET]防止使用者重複送出表單的幾種方式



有時候使用者的操作往往讓人不敢恭維,儘管再怎樣嚴密的測試

在上線後往往會因為這些可怕的操作造成抱怨!

所以在設計介面時,往往都要把各種可能的狀態做處理

今天要介紹蠻容易忽略的小地方-重複送出表單

起源於使用者不管點什麼一定都是Double Click XD

如果不防止這種情況,可能導致重複寫入資料庫,

如果資料牽扯到很多Table,後續處理就會非常的麻煩 這邊已寫入txt做範例

protected void btn_submit_Click(object sender, EventArgs e)
{
        string path = Server.MapPath("") + "\\DataFile.txt";
        //已寫入文字檔案代替寫入DB
        string tempfile = Path.GetTempFileName();
        StreamWriter writer = new StreamWriter(tempfile);
        StreamReader reader = new StreamReader(path);
        //寫入時間做紀錄
        writer.WriteLine(DateTime.Now);
        while (!reader.EndOfStream)
            writer.WriteLine(reader.ReadLine());
        writer.Close();
        reader.Close();
        File.Copy(tempfile, path, true);
        //讓執行續休息3秒模擬DB Connection
        System.Threading.Thread.Sleep(3000);
}














如果寫入資料很敏感,可能造成報表重複計算之類的問題

可以用以下幾種方式來處理:

在Server端加入防呆功能

  
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //將按鈕Disable,並修改顯示文字
            btn_submit.Attributes["onclick"] = "this.disabled = true;this.value = 'Please wait..';" + Page.ClientScript.GetPostBackEventReference(btn_submit, "");
        }
    }

我們可以在Page Load時將按鈕加入onclick事件

讓使用者點選時將按鈕鎖住

如是Gridview的話,可以RowDataBound事件裡動態加入










使用Jquery BlockUI 套件


BlockUI是一個很方便能做到訊息遮罩的Jquery套件

故只要在Click時在前端加入以下程式碼即可啟用遮罩



  
 
    
    

因為.NET PostBack的特性,故會回到Page_Load裡,故不用撰寫關閉的程式

若使用Ajax,可加入$.unblockUI()來關閉遮罩



2013年1月6日 星期日

[ASP.NET]DataTable分頁Function

在ASP.NET Gridview雖然內建就有開啟分頁的功能,
但在實作上,通常不會使用此內建功能
通常我會搭配AspNetPager這種套件使用
此套件在官方網站都有很詳細的說明(簡中)
甚至有sample source可以下載,故在此不再說明
在資料來源時,可以使用以下的Function將DataTable做簡易的分頁處理
(其實這篇是要讓我換新專案時方便複製貼上而已 XD)
///  將DataTable進行分頁 
///  原DataTable
///  選擇第N頁
///  每頁的頁數 
///  新DataTable
public DataTable GetPagedTable(DataTable dt, int PageIndex, int PageSize)
{
   if (PageIndex == 0)
   {
      return dt;
   }
   DataTable NewDt = dt.Copy();
   NewDt.Clear();
   //起始列
   int rowbegin = (PageIndex - 1) * PageSize;
   //結束列
   int rowend = PageIndex * PageSize;
   if (rowbegin >= dt.Rows.Count)
   {
        return NewDt;
   }

   if (rowend > dt.Rows.Count)
   {
       rowend = dt.Rows.Count;
   }
   //產生新的DataTable
   for (int i = rowbegin; i <= rowend - 1; i++)
   {
      DataRow newdr = NewDt.NewRow();
      DataRow dr = dt.Rows[i];
      foreach (DataColumn column in dt.Columns)
      {
          newdr[column.ColumnName] = dr[column.ColumnName];
      }
          NewDt.Rows.Add(newdr);
  }
  return NewDt;
}

使用方式很簡單:
  DataTable Old_dt = GetData();//至DB抓資料,在此省略
  DataTable New_dt = GetPagedTable(Old_dt,NowIndex,PageSize);
  grid_data.Datasource = New_dt;//繫結至GridView
  grid_data.DataBind();

記得將Gridview的EnableViewState屬性設定為false
因我們已經不需要那些肥大的ViewState了 此function在面對資料量不大時,是很方便的做法, 但如果資料量很大,就不建議,
畢竟此方法還是把所有資料抓回來再做分頁處理
可以考慮在DB使用Row_Number()的方式處理

2013年1月4日 星期五

[ASP]判斷來源頁,防止惡意侵入

在設計表單相關的程式時,Submit後POST到的頁面,通常透過Session判斷外 最好再加上來源頁判斷,以防有心人士透過URL傳遞參數,導致錯誤的資料寫入資料庫 在ASP可以用以下翻法來判斷:
  HTTP_REFERER = Request.ServerVariables("HTTP_REFERER") 
  if instr(HTTP_REFERER,"xxx.asp")>0 then
     '如是由xxx.asp導向此頁,可做一些處理
  else
     '來源頁不為xxx.asp,導向Error頁或首頁
  end if
這種語法可以再做很多事,如可以透過來源頁再導向該有的網址
  HTTP_REFERER = Request.ServerVariables("HTTP_REFERER") 
  Select Case HTTP_REFERER 
    Case "http://www.test1.com"
        Response.Redirect "test1.asp"
    Case "http://www.test2.com"
        Response.Redirect "test2.asp"
    Case Else
        Response.Write "index.html"
  End Select