C50108
Search…
職訓局里程碑
2019/0531/ASP.NET_WebformAllView物件功能清單&ListView實作&第十次專案報告(完整循序圖)

每個View都有不同的強項功用
不知道用哪種選ListView可能最大滿足你要的功能

總共有6種 可以涵蓋目前所有的顯示方式。
ListView物件因為什麼都有所以屬性要自訂的地方非常多。
新的開發案通常都是MVC,但進入業界通常都做維護所以是Webform開始。
很多都是舊的Webform要改為MVC。
MVC存在的時間跟Webform差不多,但開發太慢,到了MVC5自動產生文件,才比較好開發。

一樣先重DataSource引入資料庫開始
接著擺一個 ListView 不實作Template直接預覽就會報錯
有很多種Template
接著實作ItemTemplate
接著讀資料用data binding explanation ?綁定
data binding explanation - Google Search
Google
相對其他view非常好排版
Datalist 是用table排的 ( 無法拿掉
Repeater跟listview編譯完後會消失掉 ( 所以會很好排版
Itemtemplate只能一次讀一個模板出來
所以無法時做Bootstrap Card Component
這時就要用到
##LayoutTemplate ( listview的核心
把LayoutTemplate 當成DOM數的最上層
PlaceHolder ? MasterPage
ID一定要取名itemPlaceHolder這樣才會知道裡面是要放ItemTemplate
上下黏再一起所以調整margin mt-1 mb-1 …
接著做一些響應式排版 col-sm-6 … 字型 自訂style
排版的卡片高度不齊
所以要調整body或card的盒子
依照 box 特性(div span p …) 去裝 card 或 裡面的屬性去做調整
也可以inline把style:height寫死
同一種功能好幾種寫法 只要能實現即可
接著Grouptemplate現在比較沒有再用 ( 很像datalist
但是現在有了響應式所以可以很快排版就被淘汰了
前端功能太多框架太多所以不避免還是要會html5不然沒辦法寫網頁應用程式

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="43ListView.aspx.cs" Inherits="ASPnet._43ListView" %>
<!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>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div >
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:教務系統ConnectionString %>" SelectCommand="SELECT * FROM [學生]"></asp:SqlDataSource>
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<div class="container">
<div class="row">
<asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="col-md-4 col-sm-6 mt-2 mb-2">
<div class="card bg-light MyFont">
<div class="card-header">
<h3><strong><%# Eval("姓名") %></strong></h3>
</div>
<div class="card-body" style="height:200px;">
<p class="text-primary"><%# Eval("生日","{0:d}") %></p>
<p class="text-danger"><%# Eval("電話") %></p>
<p class="alert-danger"><%# Eval("性別") %></p>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="點台" class="btn btn-primary" />
</footer>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>
接著講排序跟分頁
雖然是物件上賦予的但是要實現在按鈕上就
必須要在layout上面做排序操作按鈕
靠commandname來操作按鈕 ( 以往都是新刪修 listview多了排序Sort
然後多了屬性 CommandArgument 排列依據
這樣即可完全不用程式撰寫
接著實現分頁功能
DataPager 為什麼物件要獨立出來 而不是屬性呢 ?
因為分頁必須要顯示按鈕 所以不是直接設定屬性
屬性可以調 PageSize 小一點去顯示
內容一定要用 fields 物件 才會 真的實作
而如果要改分頁的樣式呢?
其實就要寫Jqdom的樣式
但其實可以偷吃步
直接下 class 就算沒有提是字
也會直接編譯成文字硬塞過去還是會吃
但是要知道階層
但是不知道階層 就只能寫Jq …
老師直接示範最上層最外層的DOM到最底層最下層 就不用考慮ID問題
接著 上一頁下一頁物件 NextPreviousPagerField
ShowNextPageButton="false" PreviousPageText="&laquo;" ShowFirstPageButton="true"
ShowPreviousPageButton="false" NextPageText="&raquo;" ShowLastPageButton="true" LastPageText="&ge;"
用jqdom置換樣式與顯示文字
接著是資料修改很像datalist
但一般很少在listview提供修改
首先要有一個asp:botton用於顯示修改畫面
Commandname 一定要叫edit
允許改的部分要換成適合的控制項
Edititemtemplate
姓名能改 就要放入 asp:textbox
接著要有個asp:button commandname為update
但這樣並不是真的修改
必須去在datesourse增加command
在listview DataKeyNames=""
然後在家個deletecommand
Sqldatasourse
Ado.net
以上兩種都要crud語言
Entity Framework不用???
刪除按鈕上直接加上 onclientclick alert即可
唯一個同一個頁面 顯示又有新刪修
接著做新增
Insertitemtemplate物件
單純要讀出來要用eval 要寫進去就要用bind
data binding explanation - Google Search
Google
data binding explanation
listview 比較特別新增的 templet必須要靠某個屬性去控制它的存在
不寫按鈕
insertitemposition ( 會固定會有一個空的用於新增
有很多種方式調整
其中一種為從layouttemplate下手
簡單的方式為從前端處理 ( 做一個按鈕用於顯示隱藏 jqdom操作
<InsertItemTemplate>
<div class="col-md-4 col-sm-6 mt-2 mb-2 d-none" id="InsForm">
<div class="card bg-light MyFont">
初始為隱藏
Jqdom 按鈕按下後移除隱藏class
接著處理 insertcommand 這裡用的是 tsql 因為 datasourse綁的是sqlserver
Transact-SQL
Wikipedia
稍微調整一下新增的內容
完成
只是要示範C#可以完全不用寫程式 80%都可以

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="43ListView.aspx.cs" Inherits="ASPnet._43ListView" %>
<!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>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div >
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:教務系統ConnectionString %>"
SelectCommand="SELECT * FROM [學生]"
UpdateCommand="update [學生] set 姓名[email protected]姓名, 電話[email protected]電話 where 學號[email protected]學號"
DeleteCommand="delete from [學生] where 學號[email protected]學號"
InsertCommand="insert into [學生] values(@學號,@姓名,@性別,@電話,@生日)"
></asp:SqlDataSource>
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="學號" InsertItemPosition="FirstItem">
<LayoutTemplate>
<div class="container">
<div class="alert-success">排序功能</div>
<div>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-danger" CommandName="Sort" CommandArgument="學號">學號</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn btn-danger" CommandName="Sort" CommandArgument="姓名">姓名</asp:LinkButton>
</div>
<hr />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#InsForm">
新增
</button>
<hr />
<div class="row">
<asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
</div>
<nav class="nav justify-content-center" id="nav">
<asp:DataPager ID="DataPager1" runat="server" PageSize="3" class="pagination">
<Fields>
<asp:NextPreviousPagerField ShowNextPageButton="false" PreviousPageText="&laquo;" ShowFirstPageButton="true" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ShowPreviousPageButton="false" NextPageText="&raquo;" ShowLastPageButton="true" LastPageText="&ge;" />
</Fields>
</asp:DataPager>
</nav>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="col-md-4 col-sm-6 mt-2 mb-2">
<div class="card bg-light MyFont">
<div class="card-header">
<h3><strong><%# Eval("姓名") %></strong></h3>
</div>
<div class="card-body" style="height:200px;">
<p class="text-primary"><%# Eval("生日","{0:d}") %></p>
<p class="text-danger"><%# Eval("電話") %></p>
<p class="alert-danger"><%# Eval("性別") %></p>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="點台" class="btn btn-primary" />
<asp:Button ID="Button2" runat="server" Text="修改" CommandName="Edit" class="btn btn-secondary" />
</footer>
</div>
</div>
</ItemTemplate>
<EditItemTemplate>
<div class="col-md-4 col-sm-6 mt-2 mb-2">
<div class="card bg-danger MyFont">
<div class="card-header">
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("姓名") %>'></asp:TextBox>
</div>
<div class="card-body" style="height:200px;">
<p class="text-primary"><%# Eval("生日","{0:d}") %></p>
<p> <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("電話") %>'></asp:TextBox></p>
<p class="alert-danger"><%# Eval("性別") %></p>
</div>
<footer class="card-footer">
<asp:Button ID="Button3" runat="server" CommandName="Update" Text="儲存" class="btn btn-success" />
<asp:Button ID="Button4" runat="server" CommandName="Delete" Text="刪除" class="btn btn-warning" OnClientClick="" />
</footer>
</div>
</div>
</EditItemTemplate>
<InsertItemTemplate>
<div class="col-12 mt-2 mb-2 modal" tabindex="-1" id="InsForm">
<div class="modal-dialog">
<div class="modal-header">
<h5 class="modal-title">資料新增</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="card bg-light MyFont">
<div class="card-header">
姓名
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("姓名") %>' CssClass="form-control"></asp:TextBox>
</div>
<div class="card-body" style="height: 350px;">
<p class="">
學號
<asp:TextBox ID="TextBox7" runat="server" Text=' <%# Bind("學號") %>' CssClass="form-control"></asp:TextBox>
</p>
<p class="">
生日
<asp:TextBox ID="TextBox4" runat="server" Text=' <%# Bind("生日") %>' CssClass="form-control"></asp:TextBox>
</p>
<p class="">
電話
<asp:TextBox ID="TextBox5" runat="server" Text=' <%# Bind("電話") %>' CssClass="form-control"></asp:TextBox>
</p>
<p class="">
性別
<asp:TextBox ID="TextBox6" runat="server" Text=' <%# Bind("性別") %>' CssClass="form-control"></asp:TextBox>
</p>
</div>
<footer class="card-footer">
<asp:Button ID="Button2" runat="server" Text="儲存" CommandName="Insert" class="btn btn-secondary" />
</footer>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</InsertItemTemplate>
</asp:ListView>
</div>
</form>
<script src="http://localhost:63152/Scripts/jquery-3.0.0.min.js"></script>
<script>
$('#nav>span>a').addClass('page-link');
$('#nav>span>span').addClass('page-link Page');
//$('#Button10').click(function () {
// $('#InsForm').removeClass('d-none');
//});
</script>
</body>
</html>
早上 新增改為 一個新的類似alert的效果 ( 原本是前或後新增一個出來
只要用 bootstrap component
下一次rwd會講

Alt 系統做選擇 opt 使用者做選擇 (不一定 但大部分)
請求跟回復 要明確的動作直接寫在訊息(Message)上
AC = Application Core 應用程式核心
Par 同時都要做
Opt else 單一 不寫是 擇一也可以多選???
[UML] 使用循序圖傳達各物件互動及時序關係 | 搞搞就懂 - 點部落
搞搞就懂

Copy link
On this page
#Webform 自訂程度比較高的 View , ListView
Webform大重點,View物件功能清單
##ListView
#第十次專案報告 循序圖完整
講了一下六月的報告進度 包含 文案與實做