iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0
Modern Web

從零開始使用Microsoft MVC架構來搭建web server系列 第 20

DAY 20 從SQL Server抓取資料到網頁上面呈現

  • 分享至 

  • xImage
  •  

今天我們要從資料庫中抓取資料呈現在網頁上面,我們先看看成品展示:
https://ithelp.ithome.com.tw/upload/images/20241003/20168332oEDX3i414S.png
上述的資料都是從SQL Server抓取出來的資料,在日常生活中例如蝦皮、momo等購物網站上的產品資訊也都是從資料庫中抓取資料傳送到頁面上的,我們將在MVC上實現這個功能。

我們在實作之前先來構建一下程式邏輯:
Controller
連接資料庫->將資料放到容器list中->傳送到前端頁面中
View
使用foreach迴圈將資料呈現出來

我們可以先事前準備好我們所需要的資料,先開啟SQL Server之後在之前建立的Login資料表內插入資料,輸入以下新增資料語法,之後按下執行
insert into Login values('andy123','1234'),('jim','2345');
https://ithelp.ithome.com.tw/upload/images/20241003/20168332eDszwnsrbi.png
在Controller與view當中寫入以下程式碼:
view
在view中新增一個頁面,我將他取名為"seeall"

<h2>Seeall</h2>

@using new_project.Models;
@{
   List<loginfo> users = ViewBag.users;
}

<h2>Login Information</h2>

<table class="table">
   <thead>
       <tr>
           <th>Username</th>
           <th>Password</th>
       </tr>
   </thead>
   <tbody>
       @foreach (loginfo user in users)
       {
       <tr>
           <td>@user.Account</td>  <!-- 顯示 Username -->
           <td>@user.Password</td>  <!-- 顯示 Password -->
       </tr>
       }
   </tbody>
</table>

Controller
這邊的連接字串一樣要將密碼改成使用者密碼。

    public ActionResult Seeall()
    {
        List<loginfo>users = new List<loginfo>();
        string connstr = "Data Source=CSIE-TEST2;Initial Catalog=Student_data;User ID=TEST03;Password=*****;Encrypt=False";
        SqlConnection conn = new SqlConnection(connstr);
        conn.Open();
        SqlCommand cmd = new SqlCommand("select * from Login");
        cmd.Connection = conn;
        SqlDataReader reader = cmd.ExecuteReader();
        while (reader.Read()) // 逐行讀取查詢結果
        {
            loginfo user = new loginfo
            {
                Account = reader["Account"].ToString(),  // 假設資料表中的欄位名是 Username
                Password = reader["Password"].ToString()   // 假設資料表中的欄位名是 Password
            };

            users.Add(user);  // 將每一筆資料加入列表
        }
        ViewBag.users = users;
        return View();
    }
}

Model

 public class loginfo
 {
     public string Account { get; set; }
     public string Password { get; set; }
 };

可以先測試是否可以運行,有幾個必需要注意的事項,
1.在Controller中的public ActionResult Seeall()必須與view的頁面的名稱相同都為seeall
2.sql語句當中的資料表一定要是Login或是自行設置的資料表名稱

總結:這篇旨在帶過程式邏輯以及實現的部分,在下一篇會介紹詳細的程式碼。


上一篇
DAY 19 登入案例演示_總結
下一篇
DAY 21 從SQL Server 抓取資料到網頁上呈現
系列文
從零開始使用Microsoft MVC架構來搭建web server30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言