.Net Core Web Api_筆記14_api結合ADO.NET資料庫操作part2_資料查詢呈現

 


在上一篇辛辛苦苦地完成了專案前置準備
並寫好新增功能的api呼叫(透過POST方式)
現在資料庫中有存入一些剛存進來的內容
我想把他們查詢呈現在畫面上
此時改用GET方式


藉由ado.net查詢回來存入List泛型


傳入自定義的model class 
也就是每一筆都為NewsType.cs 這個DTO class



在NewsTypeController新增
一個Action Method命名為ShowNewsType

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[HttpGet("Show")]
public ActionResult<List<NewsType>> ShowNewsType()
{
    string strSQL = @"select * from NewsType";
    Hashtable htParms = new Hashtable();
    SqlDataReader dataReader = MSSQLHelper.GetSqlDataReader(strSQL);
    if (!dataReader.HasRows)
        return NotFound();

    List<NewsType> lsNewsType = new List<NewsType>();

    while (dataReader.Read())
    {
        lsNewsType.Add(new NewsType()
        {
            NewsTypeId = dataReader.GetInt32(0),
            NewsTypeName = dataReader.GetString(1),
            isEnabled = dataReader.GetBoolean(2)
        });
    }
    dataReader.Close();
    return lsNewsType;
}


在瀏覽器或PostMan上測試也可正常查出目標資料
這裡有特別一點就是回傳回來原先屬性開頭大寫的變小寫
以postman回傳的為主





一樣新增一個畫面專for資料呈現的
Show.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Show NewsType</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/jquery/jquery.min.js"></script>
</head>
<body style="margin:20px;">
    <table id="tbNewsType" class="table table-bordered">
        <thead>
            <tr>
                <td>文章ID</td>
                <td>分類</td>
                <td>是否啟用</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script type="text/javascript">
        $(function () {
            var tbody = $('#tbNewsType tbody')
            $.ajax({
                type: 'get',
                url: '/api/NewsType/Show',
                dataType: 'json',
                success: function (result) {
                    $.each(result, function (n, value) {
                        var IsEnabled;
                        value.isEnabled ? IsEnabled = '啟用' : IsEnabled = '關閉';
                        var tr_val = "";
                        tr_val += "<tr><td>" + value.newsTypeId + "</td><td>" + value.newsTypeName + "</td><td>" + IsEnabled + "</td></tr>";
                        tbody += tr_val;
                    });
                    $('#tbNewsType').append(tbody);
                }
            });
        });
    </script>
</body>
</html>


















留言

這個網誌中的熱門文章

經得起原始碼資安弱點掃描的程式設計習慣培養(五)_Missing HSTS Header

經得起原始碼資安弱點掃描的程式設計習慣培養(三)_7.Cross Site Scripting(XSS)_Stored XSS_Reflected XSS All Clients

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題