.Net Core Web Api_笔记16_api结合ADO.NET资料库操作part4_资料编辑提交更新

编辑则是会By特定编号捞取指定资料去做编辑
所以需要先把资料回填到表单
修改Show.html
这里改一下标题为操作(包含编辑,删除两种操作类型)

https://ithelp.ithome.com.tw/upload/images/20210930/201074522pirRfDKYl.png

<!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>
                <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><td><a href='Edit.html?id=" + value.newsTypeId + "'>编辑</a> " 
                            + "<a href='javascript:Del(" + value.newsTypeId + ")'>删除</a>"                            
                            + "</td></tr>";
                        tbody += tr_val;
                    });
                    $('#tbNewsType').append(tbody);
                }
            });
        });

        function Del(id) {
            $.ajax({
                type: "delete",
                url: "/api/newstype/delete?id=" + id,
                dataType: "json",
                success: function (result) {
                    if (result != "0") {
                        location.href = "Show.html";
                    }
                }
            });
        }
    </script>
</body>
</html>

扩充Action Method
GetSpecificNewsTypeById
帮我们把资料查询用来後续回填至画面上

[HttpGet("GetById")]
public ActionResult<NewsType> GetSpecificNewsTypeById(int? id)
{
    if (id == null)
        return NotFound();

    string strSQL = "select * from NewsType where NewsTypeId=@Id";
    Hashtable htParams = new Hashtable();
    htParams.Add("@Id", id);
    SqlDataReader dataReader = MSSQLHelper.GetSqlDataReader(strSQL,htParams);
    NewsType newsType = new NewsType();
    while (dataReader.Read())
    {
        newsType.NewsTypeId = dataReader.GetInt32(0);
        newsType.NewsTypeName = dataReader.GetString(1);
        newsType.isEnabled = dataReader.GetBoolean(2);
    }
    dataReader.Close();
    return newsType;
}

额外多增加编辑画面Edit.html
(跟Add.html一样的Layout)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Edit NewsType</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/jquery/jquery.min.js"></script>
</head>
<body>
    <div style="padding:20px;border:1px solid #0094ff;width:600px;margin:30px;">
        <h3>新闻文章类别</h3>
        <hr />
        <div class="form-horizontal">
            <div class="form-group col-4">
                <label>文章类别</label>
                <input type="text" class="form-control" id="NewsTypeName">
            </div>
            <div class="form-group col-4">
                <label>是否启用</label>
                <input type="checkbox" class="form-check" id="isEnabled">
            </div>
            <div class="form-group">
                <div class="col-md-2 col-md-10">
                    <button type="submit" id="btnSubmit" class="btn btn-primary">Submit</button>
                </div>
                <div>
                    <span id="msg" class="danger"></span>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function getQueryGetParams(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var idxVar = 0; idxVar < vars.length; idxVar++) {
                var pair = vars[idxVar].split("=");
                if (pair[0] == variable)
                    return pair[1];
            }
            return "";
        }

        $(function () {
            var id = getQueryGetParams("id");
            $.ajax({
                type: "get",
                url: "/api/newstype/getbyid?id=" + id,
                dataType: "json",
                success: function (result) {
                    //console.log(result);
                    $("#NewsTypeName").val(result.newsTypeName);
                    $("#isEnabled").attr("checked", result.isEnabled);
                }
            });
        });

    </script>
</body>
</html>

藉由getQueryGetParams 取得get网址问号後面的key-value pair参数
取得特定news id後再去藉由Route Template "GetById" 呼叫
GetSpecificNewsTypeById 的api action method

https://ithelp.ithome.com.tw/upload/images/20210930/20107452CzBQOZRHik.png

https://ithelp.ithome.com.tw/upload/images/20210930/20107452dEl9RavByz.png

回填至编辑页後再来就是提交PUT请求啦
如果还不知道PUT的请回去之前这篇看
.Net Core Web Api_笔记04_HTTP资源操作模式Put

在扩充一个put 的 更新用 action method

[HttpPut("Update")]
public ActionResult<int> UpdateNewsType(NewsType newsType)
{
    int RowCount = 0;
    if (newsType != null)
    {
        int enabled = (bool)newsType.isEnabled ? 1 : 0;
        string strSQL = @"update NewsType set NewsTypeName=@NewsTypeName , IsEnabled=@IsEnabled 
                            where NewsTypeId=@NewsTypeId ";
        Hashtable htParams = new Hashtable();
        htParams.Add("@NewsTypeId", newsType.NewsTypeId);
        htParams.Add("@NewsTypeName", newsType.NewsTypeName);
        htParams.Add("@IsEnabled", newsType.isEnabled);
        
        RowCount = MSSQLHelper.ExecuteNonQuery(strSQL, htParams);
    }
    return RowCount;
}

Edit.html 增加提交编辑更新的jQuery code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Edit NewsType</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/jquery/jquery.min.js"></script>
</head>
<body>
    <div style="padding:20px;border:1px solid #0094ff;width:600px;margin:30px;">
        <h3>新闻文章类别</h3>
        <hr />
        <div class="form-horizontal">
            <div class="form-group col-4">
                <label>文章类别</label>
                <input type="text" class="form-control" id="NewsTypeName">
            </div>
            <div class="form-group col-4">
                <label>是否启用</label>
                <input type="checkbox" class="form-check" id="isEnabled">
            </div>
            <div class="form-group">
                <div class="col-md-2 col-md-10">
                    <button type="submit" id="btnSubmit" class="btn btn-primary">Submit</button>
                </div>
                <div>
                    <span id="msg" class="danger"></span>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function getQueryGetParams(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var idxVar = 0; idxVar < vars.length; idxVar++) {
                var pair = vars[idxVar].split("=");
                if (pair[0] == variable)
                    return pair[1];
            }
            return "";
        }

        $(function () {
            var id = getQueryGetParams("id");
            $.ajax({
                type: "get",
                url: "/api/newstype/getbyid?id=" + id,
                dataType: "json",
                success: function (result) {
                    //console.log(result);
                    $("#NewsTypeName").val(result.newsTypeName);
                    $("#isEnabled").attr("checked", result.isEnabled);
                }
            });
        });

        $('#btnSubmit').click(function () {
            var id = getQueryGetParams("id");
            $.ajax({
                type: 'put',
                url: "/api/newstype/update",
                dataType: "text",
                data: JSON.stringify({
                    NewsTypeId: Number.parseInt(id),
                    NewsTypeName: $('#NewsTypeName').val(),
                    isEnabled: $('#isEnabled').prop('checked')
                }),
                contentType: 'application/json',
                success: function (result) {
                    if (result == "1") {
                        $('#msg').text('成功更新');
                    }
                }
            });
        });

    </script>
</body>
</html>

当我将生活类文章更新为启用时候打到server-side的DTO isEnabled被turn true
DB中也成功更新

https://ithelp.ithome.com.tw/upload/images/20210930/20107452g8521cUbf9.png

https://ithelp.ithome.com.tw/upload/images/20210930/20107452SoCnWaoJ5k.png

本篇已同步发表至个人部落格
https://coolmandiary.blogspot.com/2021/09/net-core-web-api16apiadonetpart4.html


<<:  [Day15] 团队管理：建立团队信赖感(4)

>>:  Day14：插曲(小结)

ADXL335三轴加速度晶片结合Arduino nano传数据

小弟想询问 因为专题需制作一个透过硬体记步数的功能 如何将Arduino nano蒐集起来的资讯 转...

[2020铁人赛] Day30 - .net core第一阶段结束，感谢IT邦!

完赛了，下次再出现决定要写进阶/实务上的内容，再分享给各位 :) 刚刚看完後觉得文章内容还可以再补...

[Day 12] 资料产品生命周期管理-加工资料（一）

加工资料泛指各种处理资料的行为，这部分要一篇文章写完真滴难，所以就也只能蜻蜓点水的各介绍一点，让大家...

[Day06] JavaScript - Hoisting 提升

在讲Hoisting之前，要先解释一下undefined 与 is not defined 的差异:...

用React刻自己的投资Dashboard Day4 - highcharts制作线图

tags: 2021铁人赛 React Javascript绘图套件 在搜寻chart librar...