前台界面（1显示，2添加）

@{
    ViewBag.Title = "Show";
}

<h2>Show</h2>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<span>产品列表</span>
<table class="table table-bordered">
    <thead>
        <tr>
            <td>编号</td>
            <td>产品名称</td>
            <td>价格</td>
        </tr>
    </thead>
    <tbody id="Body"></tbody>
</table>

<span>订单列表</span>
<table class="table table-bordered">
    <thead>
        <tr>
            <td>编号</td>
            <td>订单号</td>
            <td>总价</td>
        </tr>
    </thead>
    <tbody id="BodyDan"></tbody>
</table>

<script>
    $(function () {
        ShowChanPin();
    })

    function ShowChanPin() {
        $.ajax({
            url: "http://localhost:62506/api/ChanPin",
            DataType: "json",
            type: "get",
            success: function (i) {

                ShowDingDan();

                $("#Body").empty();

                var line;

                $(i).each(function () {
                    line = '<tr>' +
                        '<td>' + this.Id + '</td>' +
                        '<td>' + this.Name + '</td>' +
                        '<td>' + this.Money + '</td>' +
                        '</tr>';
                    $("#Body").append(line);

                })
            }
        })
    }

        function ShowDingDan() {
        $.ajax({
            url: "http://localhost:62506/api/DingDan",
            DataType: "json",
            type: "get",
            success: function (i) {

                $("#BodyDan").empty();

                var line;

                $(i).each(function () {
                    line = '<tr>' +
                        '<td>' + this.Id + '</td>' +
                        '<td>' + this.DanHao + '</td>' +
                        '<td>' + this.SumMoney + '</td>' +
                        '</tr>';
                    $("#BodyDan").append(line);

                })
            }
        })
    }
</script>