2013年5月29日 星期三

jQuery Cycle plugin

要在網頁做圖片輪撥的效果可以使用 jQuery Cycle Plugin,官網在http://jquery.malsup.com/cycle/

在Visual Studio 2012 可以使用NuGet下載

image

按安裝之後,自動下載相關js檔案:

image

在網頁中,引用js檔案,並加入想要輪撥的圖片,利用javascript叫用cycle plugin就OK了

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.5.2.min.js"></script>
    <script src="Scripts/jquery.cycle.all.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'fade'
            });
        });
    </script>
</head>
<body>
    <div class="slideshow">
        <img src="Images/oIMG_5060.jpg" />
        <img src="Images/oIMG_5665.jpg" />
        <img src="Images/oIMG_5783.jpg" />
        <img src="Images/oIMG_5829.jpg" />
    </div>
</body>
</html>

網頁一執行,就會自動輪流撥放圖片,並有淡入淡出的換場效果

image

image

image

jQuery DataTables Library

 

要在網頁呈現表格式資料時,可以使用jQuery DataTables Library,它提供許多功能,像表格資料排序、換頁…等等,讓表格資料的顯示更為簡便。

官方網站在:http://datatables.net/

在Visual Studio 2012的網站中,可以直接利用NuGet下載。

image

安裝之後在網站專案中會增加許多檔案放在Content與Scripts目錄:

image

建立一個簡單HTML,加入一個<table>標籤,設定資料與id:

image

引用DataTable樣式與JavaScript,然後在jQuery ready事件,呼叫dataTable:

image

執行網頁,預設畫面就會長這樣,可以設定一頁顯示的筆數,以及換頁效果。

image

蠻簡易使用的。

image

2013年5月23日 星期四

SiteMap for MVC

在ASP.NET MVC 4專案,可以很容易建立選單與網站地圖,利用類似ASP.NET Web Forms中SiteMap的做法。

  • 建一個ASP.NET MVC 4 專案試試

image

  • NuGet

image

  • 安裝 MvcSiteMapProvider

image

  • 會自動建立Mvc.sitemap檔案,開啟編輯之

image

  • 設定mvcSiteMapNode
<mvcSiteMapNode title="Home" controller="Home" action="Index" >
  <mvcSiteMapNode title="About" controller="Home" action="About"/>
  <mvcSiteMapNode title="Contact" controller="Home" action="Contact"/> 
</mvcSiteMapNode>
  • 修改_Layout.cshtml,在<nav>內:
<nav>
                         @Html.MvcSiteMap().Menu(false, false, true)
                         目前位置 : @Html.MvcSiteMap().SiteMapPath()
</nav>
  • 執行網站馬上有效果:

image

image

2013年5月22日 星期三

Entity Framework Code First DB命名

使用Entity Framework 5  Code First 技術建立DB時,預設會根據DbContext類別名稱來命名資料庫預設會使用完全識別名稱來命名資料庫 : "Namespace.Class”,根據網站組態檔的定義,建立在SQL Server Express or LocalDB上,

例如以下組態設定,會建立在SQL Express

<entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
  </entityFramework>

以下組態設定,會建立在LocalDB

<entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="v11.0" />
      </parameters>
    </defaultConnectionFactory>
  </entityFramework>

例如有一個MyDBContext類別定義如下:

public class MyDBContext : DbContext { 
    public DbSet<Employee> Employees { get; set; }
  }

以下範例只有定義MyDBContext類別,資料庫名稱為 : Ch11_CodeFirst.Models.MyDBContext,DB建立在SQL Server Express上:

image

若要改用(LocalDB)或其它料庫伺服器,除了設定defaultConnectionFactory的做法之外,可以在config檔案設定連接字串,connectinString的name要和DbContext類別名稱相同,資料庫檔案預設會放在App_Data目錄(網站專案):

image

若connectinString的name要和DbContext類別名稱不同,則DbContext可以撰寫Constructor,呼叫父類別constructor,並傳入連接字串的name:

image

也可以這樣寫:

image

2013年5月20日 星期一

使用NuGet小技巧

最近使用NuGet下載套件時,發現有些套件已經改版了,如Entity Framework 有一個5.0.0穩定版,與一個6.0.0-alpha3版,然後找不到舊的5.0.0穩定版。

image

你可以設定"僅限穩定"項目,這樣就可以找到5.0.0穩定版

image

你也可以直接下指定,開啟"套件管理主控台"

image

直接下指令,預設會裝穩定版

install-Package EntityFramework

以目前為例,安裝的是5.0.0

image

移除套件可以用:

uninstall-Package EntityFramework

image

若安裝時加了-Pre參數,會安裝最新版本,含"發行前版本" :

install-Package EntityFramework -Pre

以目前為例,裝的是6.0.0-alpha版

image

若已安裝了 Entity Framework 5.0.0,想要更新最新版本,在"管理NuGet套件"視窗,選左方"更新",將5.0.0 upgrade到最新版:

image

或者在console下指令

update-package EntityFramework –Pre

image

2013年5月16日 星期四

將資料放到SQL Azure

本文為給<jQuery Mobile與ASP.NET實戰開發>一書讀者的參考資料。

將第十一章,範例網站的資料庫,移轉至SQL Azure資料庫,專案名稱為Ch11_CodeFirst.sln。若非本書讀者,可以自己找一個使用Entity Framework Code First 技術的程式來測試。

您需要先有一個Windows Azure帳號,免費試用三個月請到此網站伸請:http://www.windowsazure.com/

image

  • 自定義創建

image

  • 設定資料庫伺服器名稱

image

  • 設定登入SQL Server帳號與密碼

image

  • 建立完成之後,點選新建的MyDB

image

  • 管理IP

image

  • 設定可以存取DB的IP,以下把目前電腦的IP加到允許清單,記的按"保存"

image

  • 顯示connection string

image

  • copy ADO.NET區塊的連線字串

image

  • 修改你的應用程式之連接字串
<connectionStrings>   
    <add name="MyDBContext" connectionString="貼上上一步驟copy來的字串,並設定密碼;"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
  • 修改MyDbInitializer 類別繼承DropCreateDatabaseAlways。此類別為Entity Framework用來初始化DB資料的類別
public class MyDbInitializer : DropCreateDatabaseAlways<MyDBContext> {
  • 按CTRL+F5執行你的程式

image

image

  • 新增查詢

image

  • 查詢Employees資料表內容

image

總網頁瀏覽量