<link href="~/Content/themes/easyui/bootstrap/easyui.css" rel="stylesheet" />

<link href="~/Content/themes/easyui/icon.css" rel="stylesheet" />

<header>

    <div class="content-wrapper">

        <div class="float-left">

            <p class="site-title">

                <a href="~/">ASP.NET Web API</a>

            </p>

        </div>

    </div>

</header>

<div id="body">

    <section class="featured">

        <div class="content-wrapper">

            @*<hgroup class="title">

                <h1>欢迎使用 ASP.NET Web API!</h1>

                <h2>这是一个简单的WebAPI入门Demo.</h2>

            </hgroup>*@

            <p>

                <strong>搜索：</strong>

                ①产品类型：

                    <select id="productTypes" name="productTypes" style="width: 120px; height: 34px;">

                        <option value="-1">--请选择--</option>

                        <option value="0">移动电话</option>

                        <option value="1">便携式计算机</option>

                        <option value="2">电视游戏机</option>

                    </select>

                ②产品名称：<input id="productName" name="productName" type="text" />

                <input id="btnSearchByName" name="btnSearchByName" type="button" value="搜 索" />

                <input id="btnSearchAll" name="searchAll" type="button" value="全 部" />

            </p>

            <p>

                <strong>新增：</strong>

                 

                产品名称：<input id="newProductName" name="newProductName" type="text" />

                产品类型：<select id="newProductType" name="newProductType" style="width: 120px; height: 34px;">

                    <option value="-1">--请选择--</option>

                    <option value="0">移动电话</option>

                    <option value="1">便携式计算机</option>

                    <option value="2">电视游戏机</option>

                </select>

                 

                产品价格：<input id="newProductPrice" name="newProductPrice" type="text" />

                <input id="btnPostProduct" name="btnPostProduct" type="button" value="新 增" />

            </p>

        </div>

    </section>

    <section class="content-wrapper main-content clear-fix">

        <h3>下面是从WebAPI获取的数据集:</h3>

        <div id="result">

        </div>

        @*<ol class="round">

            <li class="one">

                <h5>开始使用</h5>

                ASP.NET Web API  是一个框架，，您可以通过该框架轻松生成可访问

                多种客户端(包括浏览器和移动设备)的 HTTP 服务。ASP.NET Web API

                是一个用于在 .NET Framework 之上生成 REST 样式的应用程序的理想平台。

                <a href="http://go.microsoft.com/fwlink/?LinkId=245160">了解详细信息...</a>

            </li>

        </ol>*@

    </section>

</div>

<!-- jBox modal -->

<div id="myMsgModal" class="notshow">

</div>

<!-- jBox edit modal -->

<div id="myEditModal" class="notshow">

    <input id="hiddProductId" type="hidden" />

    <table width="100%">

        <tr>

            <td align="right">产品名称：</td>

            <td>

                <input id="editProductName" name="editProductName" type="text" /></td>

        </tr>

        <tr>

            <td align="right">产品类型：</td>

            <td>

                <select id="editProductType" name="editProductType" style="width: 120px; height: 34px;">

                    <option value="-1">--请选择--</option>

                    <option value="0">移动电话</option>

                    <option value="1">便携式计算机</option>

                    <option value="2">电视游戏机</option>

                </select>

            </td>

        </tr>

        <tr>

            <td align="right">产品价格：</td>

            <td>

                <input id="editProductPrice" name="editProductPrice" type="text" />

            </td>

        </tr>

        <tr>

            <td colspan="2" align="center">

                <a id="btnPutProduct" href="#" class="easyui-linkbutton">确定</a>

                <a id="btnCloseModal" href="#" class="easyui-linkbutton">关闭</a>

            </td>

        </tr>

    </table>

</div>

@section scripts{

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>

    <script src="~/Content/themes/easyui/jquery.easyui.min.js"></script>

    <script src="~/Content/themes/easyui/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

        $(function () {

            initData();

            bindClick();

        });

 

        function initData() {

            $.getJSON("api/Product", function (data) {

                if (data != null) {

                    if ($("#resultList").length > 0) {

                        $("#resultList").remove();

                    }

 

                    var html = "<ol id=‘resultList‘ class=‘round‘>";

                    $.each(data, function (key, value) {