我們這篇會一次從取得資料庫的訂單資料一直到動態生成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的部分混一起，
導致程式閱讀困難。