《ASP.NET開發與應用實踐》例題複習用

deqi525發表於2020-11-26

1.labal控制元件----顯示當前日期

  1. 工具箱–>labal控制元件–>ID屬性改為lblMessage
  2. 切換到程式碼編輯器,在Page_Load事件輸入以下程式碼:
protected void Page_Load(object sender,EventArgs e)
{
		lblMessage.Text="當前日期為:"+DateTime.Now.ToLongDateString();
}

2.ListBox控制元件----選擇嚮往的城市

 本案例中,使用2個ListBox分別存放城市例表和被選中的城市名稱,通過2個按鈕,分別對所選城市在2個ListBox之間進行移動

ListBox控制元件例項

程式碼如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Button控制元件
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click1(object sender, EventArgs e)
        {
            //遍歷左側ListBox的每一項
            for (int i = ListBox1.Items.Count - 1; i >= 0; i--)
            {
                //取得當前項ListItem
                ListItem listItem = ListBox1.Items[i];
                if (listItem.Selected)//如果被選中
                {
                    //往右側ListBox中加如該項
                    ListBox1.Items.Remove(listItem);
                    //從左側ListBox中移除選中的專案
                    ListBox2.Items.Add(listItem);
                }
            }
        }

        protected void Button2_Click1(object sender, EventArgs e)
        {
            //遍歷左側ListBox的每一項
            for (int i = ListBox2.Items.Count - 1; i >= 0; i--)
            {
                //取得當前項ListItem
                ListItem listItem2 = ListBox2.Items[i];
                if (listItem2.Selected)//如果被選中
                {
                    //往右側ListBox中加如該項
                    ListBox2.Items.Remove(listItem2);
                    //從左側ListBox中移除選中的專案
                    ListBox1.Items.Add(listItem2);
                }
            }
        }
    }
}

源檢視

新增工具箱中html的表格Table控制元件,改的rowspan =“2”(單元格向下打通的欄數),改單元格的屬性style的“塊”的text-align為center

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Button控制元件.WebForm1" %>

<!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>
    <style type="text/css">
        .auto-style1 {
            height: 32px;
        }
        .auto-style2 {
            width: 100%;
            height: 281px;
        }
        .auto-style3 {
            width: 1px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table class="auto-style2">
                <tr >
                    <td rowspan="2" class="auto-style3">
                        <asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" Height="249px" SelectionMode="Multiple" Width="371px">
                            <asp:ListItem>廣州</asp:ListItem>
                            <asp:ListItem>上海</asp:ListItem>
                            <asp:ListItem>北京</asp:ListItem>
                            <asp:ListItem>杭州</asp:ListItem>
                            <asp:ListItem>鄭州</asp:ListItem>
                        </asp:ListBox>
                    </td>
                     <td class="auto-style1" style="text-align: center"> 
                         <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="--&gt;" />
                    </td>
                   <td rowspan="2">
                       <asp:ListBox ID="ListBox2" runat="server" Height="248px" SelectionMode="Multiple" Width="329px"></asp:ListBox>
                    </td>
                </tr>
                <tr>
                    
                    <td style="text-align: center">
                        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click1" Text="&lt;--" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

3.DropDownList控制元件----城市選擇

DropDownList控制元件例項

程式碼如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Button控制元件
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
               Label1.Text ="你選擇的城市是:"+ DropDownList1.SelectedItem.Text;
        }
    }
}

FileUpload控制元件

1. 使用FileUpload控制元件上傳圖片檔案

在這裡插入圖片描述

(1)頁面介面設計

  1. 在窗體上新增一個FileUpload控制元件,新增FileUpload控制元件後,出現一個文字框和一個按鈕。需要再新增一個上傳檔案的Button,ID屬性為“btnUpload”,執行將檔案上傳到伺服器快取的功能。再新增一個Label控制元件
  2. 在網站專案中新增一個名為UploImage的資料夾,用來存放上傳的檔案

(2)編寫程式碼
3. 為Button控制元件新增驗證上傳檔案的程式碼,如果是影像檔案,儲存到檔案系統中,否則提示檔案型別不接受。
4. 具體程式碼如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Button控制元件
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnUpload_Click(object sender, EventArgs e)
        {
            Boolean fileOK = false; //置檔案驗證fileOK的初始值為false
            string path = Server.MapPath("~/UploadImage/"); //設定檔案上傳路徑
            if(FileUpload1.HasFile)  //如果已經點選瀏覽並新增檔案到FileUpload文字框中
            {
                //獲取FileUpload文字框中的檔名,並轉為小寫字母
                string fileExtentision = System.IO.Path.GetExtension(FileUpload1.FileName).ToLower();
                //設定允許上傳圖片副檔名
                string[] allowdExtensions = { ".gif", ".png", ".jpeg", ".jpg" };
                //驗證新增的檔案是否屬於圖片檔案
                for(int i=0;i<allowdExtensions.Length;i++)
                {
                    if(fileExtentision==allowdExtensions[i])
                    {
                        fileOK = true;
                    }
                }
                //如果驗證上傳的是圖片檔案,開始上傳到伺服器的操作
                if(fileOK)
                {
                    try
                    {
                        //上傳到UploadImage目錄,並在Label中顯示資訊
                        FileUpload1.PostedFile.SaveAs(path + FileUpload1.FileName);
                        Label1.Text = "檔案已經上傳成功!<BR>" + "上傳檔名為:" + FileUpload1.FileName + "<BR>檔案大小為:" + FileUpload1.PostedFile.ContentLength / 1024 + "KB";
                    }
                    catch(Exception ex)
                    {
                        //如果捕獲到錯誤,提示錯誤資訊。
                        Label1.Text = "檔案上傳失敗!原因是:" + ex.Message;
                    }
               
                }
                else
                {
                    //圖個上傳的不是圖片檔案,提示錯誤資訊
                    Label1.Text = "不可接受的檔案型別!請上傳圖片檔案!";
                }
            }
        }
    }
}

2.上傳大檔案

(1)程式碼改字元陣列為:

string allowedExtensions = {".mp3"}

其他不變
(2)為支援大檔案的上傳,需要在web.config配置檔案的配置maxRequestlength和requwstLengthDiskThreshold屬性的值
在這裡插入圖片描述
在這裡插入圖片描述

相關文章