程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> ASP.NET筆記之 ListView 與 DropDownList的使用

ASP.NET筆記之 ListView 與 DropDownList的使用

編輯：ASP.NET基礎

1、Repeater用來顯示數據、ListView用來操作數據

InsertItemTemplate和updateItemTemplate
**Eval（顯示數據）和Bind（雙向綁定：不僅是需要展現，更需要把數據綁定到數據庫中）

ItemPlaceholderID：占位符，決定占位，把頭部（之上）和尾部（之下）分隔開
ItemTemplate：展示功能

自動生成的ListView需要調整的地方
（1、生成的樣式要提到style中，不要用內聯的方式
（2、ItemTemplate裡面一半沒必要用<asp:Label>展示只讀數據，所以可以直接輸出
<%#Eval("id")%>
(3、LayoutTemplate中必須有一個ItempPlaceholderID 的服務端控件
(4、LayoutTemplate中表頭的位置要漢化，所有template中的不需顯示的字段需刪除或更改位置

2、事件
流程同Repeater：

//首先判斷數據行的類型
e.Item.ItemType==ListViewItemType.DataItem

//把e.Item轉化成ListViewDataItem才能拿到DataItem
ListViewDataItem lvDataItem=(ListViewDataItem)e.Item;
DataRowView rowView=(DataRowView)lvDataItem.DataItem;
//獲得某一列
var xRow=(...DAL.DataSet1.T_UserRow)rowVIew.Row;
//獲得某一列的值
xRow.Age、xRow.sName...etc.

3、具體注意
（1、設定相應的按鈕、控件、Validator為童顏的ValidationGroup，
防止不同模板中的Validator互相干擾，
（2、將Cancel按鈕中的CausesValidation="false"使得插入修改數據時
可以取消操作，這樣即使在同一個分組內也可以不互相影響

4、給InsertItemplate增加默認值
//在ItemCreate屬性中進入函數
if(e.Item.ItemType==ListViewItemType.InsertItem){
TextBox AgeText=（TextBox)e.Item.FindControl("AgeID");
AgeText.Text="20";
}

5、主鍵Guid：插入到數據庫

（1、ListView的ItemInserting屬性：
//要插入到數據庫之前的數據的鍵值對
e.values["id"]=Guid.NewGuid();

（2、ListView的ItemUpdateing屬性：
e.ItemIdex
e.OldValues//更新前的值
e.NewValues["Age"]//更新後的值
e.Cancel=true;//取消非法數據插入

ObjectDataSource
綁定id為guid 類型的時候

6、DropDrownList

（1、
//包含在DropDrownList中的項
<asp:ListItem value="man">男</asp:ListItem>

（2、
**後台代碼：更新的時候
//找到ListView
//ListView1.Item[e.ItemIndex].FindControl("ID");
//它是一個DropViewList
DropDrownList d=(DropDrownList)listView1.Item[e.ItemIndex].FindControl("ID");
//賦值
e.NewValues=["字段"]=d.SelectedValue;

（3、
**後台代碼：實現編輯時顯示原先的數據
//有數據行
if(e.Item.ItemType==ListVIewDataList.DataItem){
//取控件
DropDownList d=(DropDownLIst)e.Item.FindControl("ID");

if(d!=null){
//取到這一行綁定的數據
ListViewDataItem lv=(ListViewDataItem)e.Item;
DataRowItem row=(dataRowItem)lv.DataItem;
//如果這一行有數據
if(row!=null){
//讀取數據庫該Row的值
var myRow=(項目名稱.DAL.DataSetUsers.T_Users)row.Row;

//將讀取打偶的Row值設置為下拉菜單中的選項
d.SelectedValue=myRow.字段;
}
}
}

（4、可以看不可以用 Enabled="false

友情鏈接管理：

效果：

存在問題總結：

（1、警告 1 元素“ListView”不是已知元素。原因可能是網站中存在編譯錯誤，或者缺少 web.config 文件。 E:\code\Projects\WebSite_zzl01\友情鏈接\LinkUrl_Admin.aspx 39 10 友情鏈接

（2、onLinkTypeChange(this,'" + logoID.ClientID + "') 中傳給前台javascript的ID不是客戶端的ID，會導致顯示和隱藏的功能無法實現，所以增加一個myID

： logoID.Attributes["myid"] = logoID.ClientID; 來傳遞參數

LinkUrl_Admin.aspx.cs
復制代碼代碼如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace 友情鏈接
{
     public partial class LinkUrl_Admin : System.Web.UI.Page
     {
         protected void Page_Load(object sender, EventArgs e)
         {

         }

         protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
         {
             //ListView1的屬性ItemDataBound數據綁定每一行
             //顯示數據
             if (e.Item.ItemType == ListViewItemType.DataItem) {
                 DropDownList ddlsLinkType = (DropDownList)e.Item.FindControl("ddlsLinkType");
                 ListViewDataItem dataitem = (ListViewDataItem)e.Item;
                 DataRowView myrow = (DataRowView)dataitem.DataItem;

                 if (ddlsLinkType != null && myrow != null) {
                     var sUrl = (友情鏈接.ADL.DataSet1.T_LinksRow)myrow.Row;
                     ddlsLinkType.SelectedValue = sUrl.sLinkType;
                 }
             }

         }

         protected void ListView1_ItemInserting(object sender, ListViewInsertEventArgs e)
         {
             //插入數據
             DropDownList ddlsLinkType = (DropDownList)e.Item.FindControl("ddlsLinkType");
             e.Values["sLinkType"] = ddlsLinkType.SelectedValue;
         }

         protected void ListView1_ItemUpdating(object sender, ListViewUpdateEventArgs e)
         {
             //更新數據
             DropDownList ddlsLinkType = (DropDownList)ListView1.Items[e.ItemIndex].FindControl("ddlsLinkType");
             e.NewValues["sLinkType"] = ddlsLinkType.SelectedValue;
         }

         protected void ListView1_ItemCreated(object sender, ListViewItemEventArgs e)
         {
             if (e.Item.ItemType == ListViewItemType.DataItem || e.Item.ItemType ==
                 ListViewItemType.InsertItem) {
                DropDownList ddlsLinkType = (DropDownList)e.Item.FindControl("ddlsLinkType");
                TextBox logoID = (TextBox)e.Item.FindControl("LogoUrlTextBox");
                 if (ddlsLinkType != null&&logoID!=null) {
                     //onchange是html中select的屬性
                     //onLinkTypeChange是後台代碼調用前台javascript中自定義的jQuery函數

                     logoID.Attributes["myid"] = logoID.ClientID;

                     ddlsLinkType.Attributes["onchange"] = "onLinkTypeChange(this,'" + logoID.ClientID + "')";
                     if(ddlsLinkType.SelectedValue=="Text"){
                         logoID.Style["display"] = "none";
                     }
                 }
             }
         }
     }
}

LinkUrl_Admin.aspx
復制代碼代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LinkUrl_Admin.aspx.cs" Inherits="友情鏈接.LinkUrl_Admin" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <title>友情鏈接管理頁面</title>
     <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
     <script type="text/javascript">
         function onLinkTypeChange(urlType, logoID) {
             if ($(urlType).val() == "Text") {
                 $("input:text[myid=" + logoID + "]").hide();
                 //$("#" + logoID).hide(); //傳到到客戶端不是客戶端的id
                 //$("#ListView1_LogoURLTextBox").hide();//真正的id
             }
             else {
                 $("input:text[myid=" + logoID + "]").show();
                 //$("#" + logoID).show();
             }
         }
     </script>
</head>
<body>
     <form id="form1" runat="server">
     <div>

         <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
             DeleteMethod="Delete" InsertMethod="Insert"
             OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
             TypeName="友情鏈接.ADL.DataSet1TableAdapters.T_LinksTableAdapter"
             UpdateMethod="Update">
             <DeleteParameters>
                 <asp:Parameter Name="Original_ID" Type="Int64" />
             </DeleteParameters>
             <InsertParameters>
                 <asp:Parameter Name="SeoNo" Type="Int32" />
                 <asp:Parameter Name="SiteName" Type="String" />
                 <asp:Parameter Name="sLinkType" Type="String" />
                 <asp:Parameter Name="SiteUrl" Type="String" />
                 <asp:Parameter Name="LogoUrl" Type="String" />
             </InsertParameters>
             <UpdateParameters>
                 <asp:Parameter Name="SeoNo" Type="Int32" />
                 <asp:Parameter Name="SiteName" Type="String" />
                 <asp:Parameter Name="sLinkType" Type="String" />
                 <asp:Parameter Name="SiteUrl" Type="String" />
                 <asp:Parameter Name="LogoUrl" Type="String" />
                 <asp:Parameter Name="Original_ID" Type="Int64" />
             </UpdateParameters>
         </asp:ObjectDataSource>

     </div>
     <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID"
         DataSourceID="ObjectDataSource1" InsertItemPosition="LastItem"
         onitemdatabound="ListView1_ItemDataBound"
         oniteminserting="ListView1_ItemInserting"
         onitemupdating="ListView1_ItemUpdating"
         onitemcreated="ListView1_ItemCreated">

         <EditItemTemplate>
             <tr style="background-color: #999999;">
                 <td>
                     <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
                     <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
                 </td>
                 <td>
                     <asp:TextBox ID="SeoNoTextBox" runat="server" Text='<%# Bind("SeoNo") %>' />
                 </td>
                 <td>
                     <asp:TextBox ID="SiteNameTextBox" runat="server"
                         Text='<%# Bind("SiteName") %>' />
                 </td>
                 <td>
                    <asp:DropDownList ID="ddlsLinkType" runat="server">
                      <asp:ListItem Value="Text">文本</asp:ListItem>
                      <asp:ListItem Value="Pic">圖片</asp:ListItem>
                    </asp:DropDownList>
                 </td>
                 <td>
                     <asp:TextBox ID="SiteUrlTextBox" runat="server" Text='<%# Bind("SiteUrl") %>' />
                 </td>
                 <td>
                     <asp:TextBox ID="LogoUrlTextBox" runat="server" Text='<%# Bind("LogoUrl") %>' />
                 </td>
             </tr>
         </EditItemTemplate>
         <EmptyDataTemplate>
             <table runat="server"
                 style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;">
                 <tr>
                     <td>
                         未返回數據。</td>
                 </tr>
             </table>
         </EmptyDataTemplate>
         <InsertItemTemplate>
             <tr style="">
                 <td>
                     <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" ValidationGroup="Insert" />
                     <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
                 </td>
                 <td>
                     <asp:TextBox ID="SeoNoTextBox" ValidationGroup="Insert" runat="server" Text='<%# Bind("SeoNo") %>' />
                     <asp:RequiredFieldValidator ValidationGroup="Insert" ID="RequiredFieldValidator1" runat="server" ErrorMessage="*" ControlToValidate="SeoNoTextBox">
                     </asp:RequiredFieldValidator>
                     <asp:CompareValidator ValidationGroup="Insert" ID="CompareValidator1" runat="server" ErrorMessage="序號必須為整數" ControlToValidate="SeoNoTextBox" Operator="DataTypeCheck" Type="Integer">
                     </asp:CompareValidator>
                 </td>
                 <td>
                     <asp:TextBox ID="SiteNameTextBox" ValidationGroup="Insert" runat="server" MaxLength="50"
                         Text='<%# Bind("SiteName") %>' />
                     <asp:RequiredFieldValidator ValidationGroup="Insert" ID="RequiredFieldValidator2" runat="server" ErrorMessage="*" ControlToValidate="SiteNameTextBox">
                     </asp:RequiredFieldValidator>
                 </td>
                 <td>
                    <asp:DropDownList ID="ddlsLinkType" ValidationGroup="Insert" runat="server" >
                      <asp:ListItem Value="Text">文本</asp:ListItem>
                      <asp:ListItem Value="Pic">圖片</asp:ListItem>
                    </asp:DropDownList>
                 </td>
                 <td>
                     <asp:TextBox ID="SiteUrlTextBox" ValidationGroup="Insert" runat="server" Text='<%# Bind("SiteUrl") %>' />
                     <asp:RequiredFieldValidator ValidationGroup="Insert" ID="RequiredFieldValidator3" runat="server" ErrorMessage="*" ControlToValidate="SiteUrlTextBox">
                     </asp:RequiredFieldValidator>
                 </td>
                 <td>
                     <asp:TextBox ID="LogoUrlTextBox" ValidationGroup="Insert" runat="server" Text='<%# Bind("LogoUrl") %>' />
                 </td>
             </tr>
         </InsertItemTemplate>
         <ItemTemplate>
             <tr style="background-color: #E0FFFF;color: #333333;">
                 <td>
                     <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="刪除" />
                     <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編輯" />
                 </td>
                 <td>
                     <asp:Label ID="SeoNoLabel" runat="server" Text='<%# Eval("SeoNo") %>' />
                 </td>
                 <td>
                     <asp:Label ID="SiteNameLabel" runat="server" Text='<%# Eval("SiteName") %>' />
                 </td>
                 <td>
                    <asp:DropDownList ID="ddlsLinkType" runat="server" Enabled="false">
                      <asp:ListItem Value="Text">文本</asp:ListItem>
                      <asp:ListItem Value="Pic">圖片</asp:ListItem>
                    </asp:DropDownList>
                 </td>
                 <td>
                     <asp:Label ID="SiteUrlLabel" runat="server" Text='<%# Eval("SiteUrl") %>' />
                 </td>
                 <td>
                     <asp:Label ID="LogoUrlLabel" runat="server" Text='<%# Eval("LogoUrl") %>' />
                 </td>
             </tr>
         </ItemTemplate>
         <LayoutTemplate>
             <table runat="server">
                 <tr runat="server">
                     <td runat="server">
                         <table ID="itemPlaceholderContainer" runat="server" border="1"
                             style="background-color: #FFFFFF;border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px;font-family: Verdana, Arial, Helvetica, sans-serif;">
                             <tr runat="server" style="background-color: #E0FFFF;color: #333333;">
                                 <th runat="server">
                                 </th>
                                 <th runat="server">
                                     序號</th>
                                 <th runat="server">
                                     網站名稱</th>
                                 <th runat="server">
                                     鏈接類型</th>
                                 <th runat="server">
                                     網站網址</th>
                                 <th runat="server">
                                     logo網址</th>
                             </tr>
                             <tr ID="itemPlaceholder" runat="server">
                             </tr>
                         </table>
                     </td>
                 </tr>
                 <tr runat="server">
                     <td runat="server"
                         style="text-align: center;background-color: #5D7B9D;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF">
                         <asp:DataPager ID="DataPager1" runat="server">
                             <Fields>
                                 <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
                                     ShowLastPageButton="True" />
                             </Fields>
                         </asp:DataPager>
                     </td>
                 </tr>
             </table>
         </LayoutTemplate>
     </asp:ListView>
     </form>
</body>
</html>