MVC前台显示(仅供参考) （表格的形式来显示界面）

 （表格的形式来显示界面）

//通过前台控制器跳转生成的

@{
    ViewBag.Title = "Show";
}

<h2>优惠券领取记录</h2>

<table class="table">
    <tr>
        <td>优惠券类型：</td>
        <td>
            <input type="radio" name="yhfs" value="" checked/>不限
            <input type="radio" name="yhfs" value="立减" />立减
            <input type="radio" name="yhfs" value="打折" />打折
            <input type="radio" name="yhfs" value="返利" />返利
        </td>
        <td>
            <input type="text" id="mc" placeholder="优惠券名称" />
        </td>
    </tr>
    <tr>
        <td>核销状态</td>
        <td>
            <input type="radio" name="hxzt" value="" checked/>不限
            <input type="radio" name="hxzt" value="未核销" />未核销
            <input type="radio" name="hxzt" value="已核销" />已核销
        </td>
        <td>
            <input type="button" value="查询" onclick="show(1)" />
            <a href="/Shopping/Add">新增优惠券</a>
        </td>
    </tr>
</table>

<table class="table">
    <thead>
        <tr style="
            <th>用户昵称</th>
            <th>优惠券名称</th>
            <th>优惠券类型</th>
            <th>使用门槛</th>
            <th>优惠额度</th>
            <th>优惠券编号</th>
            <th>领取时间</th>
            <th>核销状态</th>
        </tr>
    </thead>
    <tbody id="tb">
    </tbody>
</table>

<table class="table">
    <tr>
        <td>总共<span id="totalCount"></span>条记录</td>
        <td>第<span id="currentPage"></span>页</td>
        <td>共<span id="totalPage"></span>页</td>
        <td><a href="javascript:;" onclick="show(1)">首页</a></td>
        <td><a href="javascript:;" onclick="show(currentPage-1)">上一页</a></td>
        <td><a href="javascript:;" onclick="show(currentPage+1)">下一页</a></td>
        <td><a href="javascript:;" onclick="show(totalPage)">尾页</a></td>
    </tr>
</table>

@section scripts{
    <script>
        var currentPage = 1;
        var totalPage = 1;

        $(function () {
            show(1);
        });

        function show(page) {
            var obj = {};
            obj.pageSize = 3;
            obj.currentPage = page;
            obj.yhfs = $("input[name='yhfs']:checked").val();
            obj.hxzt = $("input[name='hxzt']:checked").val();
            obj.mc = $("#mc").val();

            $.ajax({
                url: "http://localhost:51807/api/shopping",
                type: "get",
                data: obj,
                success: function (data) {
                    $("#totalCount").html(data.totalCount);
                    $("#totalPage").html(data.totalPage);
                    $("#currentPage").html(data.currentPage);
                    currentPage = data.currentPage;
                    totalPage = data.totalPage;

                    $("#tb").empty();
                    $(data.list).each(function () {
                        var line = "<tr>";
                        line += "<td>" + this.Name + "</td>";
                        line += "<td>" + this.mc + "</td>";
                        line += "<td>" + this.sytj + "</td>";
                        line += "<td>" + this.yhfs + "</td>";
                        line += "<td>" + this.yhfs1 + "</td>";
                        line += "<td>" + this.Id + "</td>";
                        line += "<td>" + this.lqsh + "</td>";
                        line += "<td>" + this.hxzt + "</td>";
                        line += "</tr>";
                        $("#tb").append(line);
                    });
                }
            });
        }

    </script>   
    }