2019/0531/ASP.NET_WebformAllView物件功能清單&ListView實作&第十次專案報告(完整循序圖)

#Webform 自訂程度比較高的 View ， ListView

每個View都有不同的強項功用

不知道用哪種選ListView可能最大滿足你要的功能

Webform大重點，View物件功能清單

總共有6種 可以涵蓋目前所有的顯示方式。

ListView物件因為什麼都有所以屬性要自訂的地方非常多。

新的開發案通常都是MVC，但進入業界通常都做維護所以是Webform開始。

很多都是舊的Webform要改為MVC。

MVC存在的時間跟Webform差不多，但開發太慢，到了MVC5自動產生文件，才比較好開發。

##ListView

一樣先重DataSource引入資料庫開始

接著擺一個 ListView 不實作Template直接預覽就會報錯

有很多種Template

接著實作ItemTemplate

接著讀資料用data binding explanation ?綁定

Logodata binding explanation - Google SearchGoogle

相對其他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不然沒辦法寫網頁應用程式

### ftp://web@10.10.3.189/ASPnet/43ListView.aspx 

<%@ 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

Logodata binding explanation - Google SearchGoogle

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

稍微調整一下新增的內容

完成

只是要示範C#可以完全不用寫程式 80%都可以

### ftp://web@10.10.3.189/ASPnet/43ListView.aspx 

<%@ 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 姓名=@姓名, 電話=@電話 where 學號=@學號"
                  DeleteCommand="delete from [學生] where 學號=@學號"
                 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 單一 不寫是 擇一也可以多選???

講了一下六月的報告進度 包含 文案與實做

Previous2019/0530/原本是伺服器的課，但拿來做專題。Next201906

Last updated