这篇我们接着做:

1. 取得网页上栏位资料
2. 资料送往後台
3. 资料写回资料库

取得栏位资料

在送资料到後台之前我们先来取得element上面的资料。
程序码:

$("#menu_body > tr").each(function () {
        alert(
            $(this).children(".item").text() + ":"
            + $(this).children(".price").text() + ":"
            + $(this).children(".count").children("div").children("input").val()
        )
        
    })

我们可以透过JQery的选择器帮我们想要的栏位，最後再透过.text()或.val()
取得栏位中的资料。

资料传回後台

1. 开启Customer.cshtml，将我们的按钮新增click事件

$("#submitBtn").click(function () {
// do something
}

2. 接着在里面添加.ajax()

$.ajax({
        url: "@Url.Action("Test")",
            type: "post",
            data: { "data": data},
        success: function (data) {

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

        }

        })

这边@Url这个写法是cshtml中特有的写法，能直接帮忙指定对应Controller中的function()
3. 将菜单资料转成json格式

var datamap = {}
        $("#menu_body > tr").each(function () {
            
            var count = $(this).children(".count").children("div").children("input").val()
            
            if (count > 0) {//有点餐的才写入
                var uid = $(this).attr("id").replace("uid", "")//去头"uid"，只留数字部分
                item = $(this).children(".item").text()
                price = $(this).children(".price").text()
                datamap[uid] = {
                    "uid":uid,"item": item, "price":price,"count":count }
                
            }
               
        })
        
        //将资料转成 json格式
        var data = JSON.stringify(datamap)
        alert(data.toString())

这边需要注意，请勿使用map来写，map 与json的传送在某些版本上是有问题的。
4. 完成整个click事件

$("#submitBtn").click(function () {
        var datamap = {}
        $("#menu_body > tr").each(function () {
            
            var count = $(this).children(".count").children("div").children("input").val()
            
            if (count > 0) {//有点餐的才写入
                var uid = $(this).attr("id").replace("uid", "")//去头"uid"，只留数字部分
                item = $(this).children(".item").text()
                price = $(this).children(".price").text()
                datamap[uid] = {
                    "uid":uid,"item": item, "price":price,"count":count }
                
            }
               
        })
        
        //将资料转成 json格式
        var data = JSON.stringify(datamap)
        alert(data.toString())
        $.ajax({
        url: "@Url.Action("CreateOrder")",
            type: "post",
            data: { "data": data},
        success: function (data) {

            //开启互动视窗
            $("#commitModal").modal('show');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(xhr.responseText);
            alert(thrownError);
        },
        complete: function () {

        }

        })
    })

结语

我们现在已经可以把资料传到後台了，
下一篇会接着做一些资料的处理跟写入资料库