分類:asp.net

使用Visual Studio 2013 開發資訊設備管理-1

1.新增網站

 

2.使用NuGet安裝專案內的套件

http://blogs.msdn.com/b/msdntaiwan/archive/2013/09/10/visual-studio-gallery-and-nuget.aspx

安裝Bootstrap 、 jQuery與font-awesome。安裝完成之後,Visual Studio 2013會在網站中加入三個資料夾:Content、fonts、Scripts。

Content資料夾中包含Bootstrap內建的樣式,以及預設的佈景主題CSS檔案。Fonts資料夾則存放適用於各種不同瀏覽器的字型檔案,內含Bootstrap內建的圖示。Scripts資料夾中則包含Bootstrap程式庫以及相依的jQuery程式庫,請參考下圖所示:


 

3.新增ASP.NET Web Forms網頁 : test1.aspx

或按加入新項目,新增其他類型檔案

 

4.在Content加入自訂樣式表default.css,與javascript檔案default.js

 

5.引用bootstrap、font-awesome以及jQuery程式庫,在<head>標籤中設定viewport以及引用bootstrap、font-awesome及自訂的Custom.css 樣式,在</body>前引用jQuery,程式庫版本是否相同需與方案總管的檔名對照加以檢查,可以利用拖曳的方式將檔案加入原始檔中。將以下程式碼加入至.aspx原始檔中試試,原始檔中的第一行不可以刪除哦。(01-05.txt)

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0″ />
<meta charset="utf-8″ />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/default.css" rel="stylesheet" />
</head>
<body>
<form id="form1″ runat="server">
<!–內容–>

<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p> This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
</div>
</div>

<!–end 內容–>
</form>

<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/default.js"></script>
</body>
</html>

程式頁太亂、不整齊怎麼辦,按一下格式化整化文件或Ctrl+K,Ctrl+D

 

6.在瀏覽器中檢視:在方案總管的網站中,在要檢視的.aspx文件上按右鍵 / 在瀏覽器中檢視

 

7.將Chrome設為預設的檢視瀏覽器:從方案總管的網站中,按右鍵 / 瀏覽方式 將該瀏覽器設為預設值即可


 

8.新增主版畫面

在 [方案總管] 中,以滑鼠右鍵按一下網站名稱,然後按一下 加入 / 加入新頁目。



參考網頁

ASP.NET 主版頁面概觀

https://msdn.microsoft.com/zh-tw/library/wtxbf3hh(v=vs.100).aspx

逐步解說:在 Visual Web Developer 中建立和使用 ASP.NET 主版頁面

https://msdn.microsoft.com/zh-tw/library/ehszf8ax(v=vs.100).aspx

主版頁面

http://dns2.asia.edu.tw/~rikki/mwt103/ch08rev.pdf

 

9.在主版頁面中加入html碼(01-09.txt),主版頁面無法在瀏覽中檢視,需另外新增套用此主版頁面的web form網頁才能呈現

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<meta name="viewport" content="width=device-width, initial-scale=1.0″ />

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/default.css" rel="stylesheet" />

<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!–header–>
<div class="navbar navbar-inverse navbar-static-top">
<!–<div class="navbar navbar-inverse navbar-fixed-top">–>
<div class="container">
<a href="#" class="navbar-brand">新北留言板</a>
<!– 放在縮合組合的上方 collapse:縮合,Dropdown下拉,#collapseMenu : id selector –>
<button class="navbar-toggle" data-toggle="collapse" data-target="#collapseMenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!– 縮合用,當畫面太小時會呈現–>
<div class="collapse navbar-collapse" id="collapseMenu">

<!– 左邊 menu –>
<ul class="nav navbar-nav navbar-left" id="leftmenu">
<li>
<a href="#Home"><span class="glyphicon glyphicon-home “></span>
<!– icon fa-spin for rotate–>
首頁</a>
</li>
<li class="active">
<a href="#blog">
<span class="fa fa-coffee fa-spin"></span>
<!– icon –>
功能區
</a>
</li>

<li class="dropdown">
<!– menu item –>
<a href="#share" class="dropdown-toggle" data-toggle="dropdown">
<!– menu item 中的 button –>
<span class="fa fa-group"></span>
<!– 群組 icon –>
群組 <b class="caret"></b>
<!– 提示可下拉的倒三角形 –>
</a>
<ul class="dropdown-menu">
<li class="active"><a href="#grp/a">群組A</a></li>
<li><a href="#grp/b">群組B</a></li>
<li class="divider"></li>
<li><a href="#grp/add">建立群組</a></li>
</ul>
</li>
</ul>

<!– 右邊 menu –>
<ul class="nav navbar-nav navbar-right" id="rightmenu">
<li class="dropdown">
<!– menu item –>
<a href="#share" class="dropdown-toggle" data-toggle="dropdown">
<!– menu item 中的 button –>
<span class="fa fa-group"></span>
<!– 群組 icon –>
登入 <b class="caret"></b>
<!– 提示可下拉的倒三角形 –>
</a>
<ul class="dropdown-menu">
<li>
<a href="#grp/a">
<span class="fa fa-google-plus-square" style="font-size: 20px; color: red;"></span>
Google
</a>
</li>
<li>
<a href="#grp/a">
<span class="fa fa-facebook-square" style="font-size: 20px; color: blue;"></span>
Facebook
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!–end header–>

<form id="form1″ runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1″ runat="server">
</asp:ContentPlaceHolder>
</div>
</form>

<!–footer–>
<div class="navbar navbar-default">
<div class="container “>
<p class="navbar-text">ENCTC © 2015</p>
</div>
</div>
<!–end footer–>

<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/default.js"></script>
</body>
</html>

 

10.加入含主版頁的WebForm:在方案的網站上 右鍵 /加入 / 加入新項目 或 WebForm(含主版畫面),test2.aspx


在<asp:Content ID="Content2″ ContentPlaceHolderID="ContentPlaceHolder1″ Runat="Server">與

</asp:Content>兩行中間加入些bootstrap語法,再瀏覽看是否是正常(01-10-1.txt)

範例碼:

 

<div class="jumbotron">
<div class="container">
<h1>Hello, master page!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
</div>
</div>

加入含主版頁的WebForm : default.aspx , 將上面的html加入所新增的WebForm中,在網頁上檢視一下(01-10-2.txt)

 

11.加入資料連接

 




 

 

12.LINQ:Language-Integrated Query (LINQ) 是 Visual Studio 2008 引進的一組功能,可將強大的查詢功能擴充至 C# 和 Visual Basic 的語言語法。

 

LINQ 推出標準且容易學習的資料查詢與更新模式,而且這項技術可擴充為支援幾乎所有類型的資料存放區。 Visual Studio 包括 LINQ 提供者組件,可讓您使用 LINQ 搭配 .NET Framework 集合、SQL Server 資料庫、ADO.NET 資料集和 XML 文件。

 

 

Language-Integrated Query (LINQ) 是 Visual Studio 2008 和 .NET Framework 3.5 版中引進的創新技術,用來填補物件與資料之間的缺口。 

 

傳統上,資料查詢是以簡單的字串表示,既不會在編譯時期進行型別檢查,也不支援 IntelliSense。 此外,您還必須針對每種資料來源學習不同的查詢語言:SQL 資料庫、XML 文件、各種 Web 服務等等。 LINQ 為物件領域和資料領域間架起了一座橋樑,只要使用語言關鍵字和您熟悉的運算子,就可以針對任何由支援 IEnumerable 或泛型 IEnumerable<T> 介面的物件組成的集合撰寫查詢。

 

13.開始使用 C# 中的 LINQ : 

 

14.LINQ to SQL:LINQ to SQL 提供執行階段基礎結構,以物件方式管理關聯式資料。在 LINQ to SQL 中的關聯式資料庫資料模型,會對應至程式開發人員的程式設計語言中所表示的物件模型。

執行應用程式時,LINQ to SQL 會將物件模型中的 Language-integrated Query 轉譯成 SQL,並將這些查詢傳送至資料庫進行執行。 當資料庫傳回結果時,LINQ to SQL 會將結果轉譯回您可以管理的物件。

15.使用 LINQ to SQL 的一般步驟 :建立物件模型與使用物件模型

 

16.建立 LINQ to SQL 類別:使用物件關聯式設計工具 (O/R 設計工具),建立以資料庫中之物件為基礎的 LINQ to SQL [LINQ to SQL] 實體類別和關聯。

在方案的網站上 右鍵 /加入 / 加入新項目,點選LINQ to SQL 類別,並輸入檔名DeviceInfo.dbml(存檔時會建議你把該檔放案會App_code資料夾)。在打開的版面中將資料表中的四個資料表一起加入,儲存之後,O/R 設計工具會產生具型別的 DataContext 和實體類別。開啟App_code/DeviceInfo.designer.cs 以及 web.config 檢視。資料表中的欄位如有新增或修改,將dbml檔打開,移除全部後,重新拉進所有資料表,儲存即可更新資料類別。



請參考

逐步解說:建立 LINQ to SQL 類別 (O/R 設計工具) , 快快樂樂學LINQ系列

 

17.使用者介面:使用FormView進行資料表的查詢、新增、修改及刪除。加入含主版頁的WebForm,命名為Manufacture1.aspx,做為廠商資料管理。將左下角檢視狀態切換至設計模式,接著從上角的工具箱中將FormView拉至頁面ContentPlaceHolder1中(出現+時再放開),(如無法插入,可以切回原始檔模式,將FormView拉至ContentPlaceHolder1中亦可,再回到設計模式)

 


 

 

18.以智慧標籤進行資料來源設定:點選右上角的 > 符號顯示智慧標籤進行來源設定與編輯樣本內容,

 

資料來源:新資料來源,類型:LINQ,

 

設定資料來源ID,選擇內容物件:DeviceInfoDataContext,由LINQ to SQL 類別所產生的DataContext物件,

 

資料表:請選擇對應的資料表Manufacture,* 代表選取所有欄位內容,

 

進階:啟用刪除、修改與插入功能

 

完成後啟用分頁功能。

 

預覽:進行資料、新增、修改及刪除測試

 

檢視網頁原始檔,如何與bootstrap結合

 


 


 


 

 

19. FormView的屬性 RenderOuterTable="False",加入bootstrap css 美化一下 ,

 

樣式1樣式2樣式3button,(02-19.txt)

 

 

20.使用者介面:使用GridView進行資料表的查詢。:加入含主版頁的WebForm,命名為Gridview_Product1 .aspx,做為資訊產品瀏覽,資料來源中進階不設定,完成之後在瀏覽檢視一下。修改表格標題HeaderText以及移除不必要的欄位並加入CSS 美化頁面,GridView 的 GridLines="none",最後另外加入超連結來顯示相關的資訊設備的財產清單。

 

在<Columns>下加入:

 

<asp:HyperLinkField DataTextField="Description" DataNavigateUrlFields="ProductUid" HeaderText="型號規格" DataNavigateUrlFormatString="device1.aspx?uid={0}" />

 

 

21.GridView:加入含主版頁的WebForm,命名為Device1.aspx做為財產清單瀏覽。在設定資料來源的設定資料選取範圍中,在Where中加入選取資料的條件,order中加入排序條件,進階選項不設定,完成之後在瀏覽檢視一下。修改表格標題HeaderText以及移除不必要的欄位並加入CSS 美化頁面,GridView 的 GridLines="none"。

 


 

 

22.ListView:加入含主版頁的WebForm,命名為Listview_Manufacture1.aspx。將左下角檢視狀態切換至設計模式,接著從上角的工具箱中將FormView拉至頁面ContentPlaceHolder1中(出現+時再放開),(如無法插入,可以切回原始檔模式,將FormView拉至ContentPlaceHolder1中亦可,再回到設計模式),接著進行資料來源及外觀設定,檢視原始碼加入bootstrap css 美化一下 ,樣式1

 

 

 

ListView 基本概念

 

ListView 是一種以樣板導向的控制項,這表示它預設並不會呈現任何東西 — 您必須以樣板的形式,完整指定希望它呈現的 HTML。與大多數樣板控制項一樣,ItemTemplate 也將成為您大部分工作的重點,因為這就是您放置 HTML 內容的位置,且會針對繫結資料集的每一個資料列重覆執行。

 

ListView 中引進了LayoutTemplate新功能。LayoutTemplate 就是可在最上層定義的 HTML,這會輸出成控制項呈現資訊的一部分。例如,如果您希望 ListView 會呈現出資料表,就可以在 LayoutTemplate 中納入最上層的 <table>,也可以納入 <thead> 項目,然後由 ItemTemplate 呈現資料列和儲存格。 

 

LayoutTemplate 與 ItemTemplate 之間的關聯,是利用 LayoutTemplate 中伺服器端的單一控制項,並將 ID 設定為 itemPlaceholder 來達成的 (您可以使用 ListView 的 ItemPlaceholderID 屬性,來變更 ID 字串的預設值)。在第一個範例中,我在想要加入 ItemTemplate 內容的樣板位置,使用了放置 PlaceHolder 控制項之執行個體的技巧。請注意,雖然可做為預留位置的控制項型別並沒有限制,但是它必須支援子控制項 — ID 才是最重要的。