我们这篇会一次从取得资料库的订单资料一直到动态生成html语法生成未完成清单的画面。

取得资料库资料

为了将已完成和未完成的资料库资料取得方式有所区别所以我们先将原本ProprietorModel中的SelectOrder()改名成SelectUndoOrder()。
1.在ProprietorModel.cs中修改SelectOrder()名称

public List<Order> SelectUndoOrder(IConfiguration config){
//这边内容都不需要修改
}

2. 在 HomeController.cs复原Proprietor()内容

public IActionResult Proprietor()
        {
            
            return View();
        }

我们之後会透过ajax取得後台的json资料，所以不需要再从这边送资料。
一方面可以加快读取速度，另一方面之後，我们需要重复呼叫时比较方便。
3. 在 HomeController.cs 新增 GetUndoOrder()

[HttpPost]
        public IActionResult GetUndoOrder()
        {
            var proprietor = ProprietorModel.proprietor;
            var list = proprietor.SelectUndoOrder(_config);
            //自动转成json格式
            return Json(list);
        }

这边有两点要注意，一样是取得资料，如果是取得资料库的资料我们习惯使用
Select开头，若是其他一般取得资料就会使用Get开头。
第二点是上次没说到的，我们可以在function()上面写**[HttpPost]**
表示我们是要使用post的方式来进行资料传送

资料抛转到前台

刚刚我们传送的值是json格式的，所以我们等一下再接收的时候要注意给他资料格式是json。

1. 在Proprietor.cshtml 新增ajax的script语法接收後台资料

function setUndoOrder() {
        var json = 0
        $.ajax({
        url: "@Url.Action("GetUndoOrder")",
            type: "post",
            dataType: "json",
            success: function (data) {
                //资料的处理
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("status: " + xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
        return json
    }

这边有两个地方要注意，第一个是我们的dataType 要设成json，
另外一个就是我们的type需要与GetUndoOrder() 对应。

动态生成 html语法

这边选择用js中append的方式来生成我们的清单

1. 打开Proprietor.cshtml
2. 新增script undo_order(订单的外框)

function undo_order(head, bodys) {
        var formNum = head.formnum
        var count = bodys.length

        var html_text = `
<li class="list-group-item  justify-content-between align-items-center list-group-item-success">
    <table id="${formNum}" class="table table-borderless list-group-item-success">
        <thead>
            <tr>
                <th>
                    订单编号 ${formNum}
                    <span class="badge bg-primary rounded-pill">${count}</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="list-group item_list">

                    </div>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <button id="done" type="button" class="btn btn-success">
                        完成
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
</li>
`
        $('#undo_list').append(html_text)

        bodys.forEach((item) => {
            var item_html = undo_order_item(item.item, item.count)
            var selector = `#${formNum}>tbody>tr>td>div`
            console.log(selector)
            $(selector).append(item_html)
        }
        )

    }

之後再做呼叫的时候我们会传入两个参数，一个是订单的表头(head)，另外一个是表身(bodys)，
会用formnum当作表单的ID，另外会将订单的种类(项目)bodys.length 显示在旁边。
3. 新增script undo_order_item(订单餐点项目)

function undo_order_item(item,count) {
        item_html =`
<label class="list-group-item list-group-item-primary">
    &ensp;
    <input class="form-check-input me-1" type="checkbox" value="">
    ${item} * ${count}
</label>
`
        return item_html
    }

item 是餐点名称，count 是数量
4. 完成 setUndoOrder()，动态生成订单

function setUndoOrder() {
        var json = 0
        $.ajax({
        url: "@Url.Action("GetUndoOrder")",
            type: "post",
            dataType: "json",
            success: function (data) {
                console.log(data)
                data.forEach((item) => {
                    undo_order(item.head,item.bodys)

                })
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("status: " + xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
        console.log(json)
        return json
    }

5. script完整语法

<script>
function undo_order_item(item,count)...
function undo_order(head, bodys)...
function setUndoOrder()...
setUndoOrder()...

...部分就是前面那四段的内容
6. 成果

结语

本篇有两个重点，
一是一般来说团队开发都会要求固定的coding style，
像是我们这篇提到的命名规则，SelectXXXX与GetXXXX的命名方式。
在多人开发中命名方式的默契十分的重要，大家有一个好的默契时，
可以很快地读懂彼此间开发的程序码，不需要将完整内容看完就可以了解对方的流程。

二是其实在asp.net Core中有 Partial View，
或是可以用 Razor中Model Bind的方式。
虽然这些工具都不错用，但是这会导致model 与 view的部分混一起，
导致程序阅读困难。