ASP.NET MVC2.0實現資料的增、刪、改、查(續)

3.試圖。在views目錄下建立product目錄，添加視圖。視圖名稱和conreol中的方法名（action名）一一對應.

在index視圖中添加以下代碼(這些代碼都是對應介面上實現增刪改查的。裡面使用AJAX+JSON方式傳送資料到Action)：

 $(function () {
            //查看詳細
            $(".ShowDetail").click(function () {
                //                debugger;
                var currentTr = $(this).parent().parent(); //當前行
                var currentTd = $("#tdID", currentTr).text(); //當前行所對應的productid
                var url = '<%=Url.Action("Detail") %>';
                url = url + "/" + currentTd;
                //                alert(currentTd);
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    success: ShowDetailResult
                })
            });
            function ShowDetailResult(result) {
                $("#txtProductID").val(result.ProductID);
                $("#txtProductName").val(result.ProductName);
                $("#txtProductPrice").val(result.ProductPrice);
                $("#txtProductDate").val(result.ProductDateStr);
                easyDialog.open({
                    container: 'divProductDetail'
                });
            }
            $("#aClose").click(function () {
                easyDialog.close();
            });

            //刪除
            $(".del").click(function () {
                var url = '<%=Url.Action("Delete") %>';
                var currentTr = $(this).parent().parent(); //當前行
                var currentTd = $("#tdID", currentTr).text(); //當前行所對應的productid
                url = url + "/" + currentTd;
                //                alert(currentTd);
                $.ajax({
                    url: url,
                    type: "GET",
                    dataType: "json",
                    success: function () {
                        currentTr.remove();
                    }
                })
            });

            //修改
            var ctr; //當前行
            $(".modify").click(function () {
                var currentTr = $(this).parent().parent(); //當前行
                ctr = currentTr; //提交後移除當前行
                //debugger;
                var currentTd = $("#tdID", currentTr).text(); //當前行所對應的productid
                var url = '<%=Url.Action("Detail") %>';
                url = url + "/" + currentTd;
                //                alert(currentTd);
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    success: ShowResult
                })
            });
            function ShowResult(result) {
                $("#txtMProductID").val(result.ProductID);
                $("#txtMProductName").val(result.ProductName);
                $("#txtMProductPrice").val(result.ProductPrice);
                $("#txtMProductDate").val(result.ProductDateStr);
                easyDialog.open({
                    container: 'divModify'
                });
            }
            $("#aaClose").click(function () {
                easyDialog.close();
            });

            //提交
            $("#btnModify").click(function () {
                easyDialog.close();
                var productID = $("#txtMProductID").val();
                var productName = $("#txtMProductName").val();
                var productPrice = $("#txtMProductPrice").val();
                var productDate = $("#txtMProductDate").val();
                var productDateStr = productDate;
                var Product = { "ProductID": productID, "ProductName": productName, "ProductPrice": parseFloat(productPrice), "ProductDate": productDate, "ProductDateStr": productDateStr };
                var url = '<%=Url.Action("Modify") %>';
                //debugger;
                $.ajax({
                    url: url,
                    type: 'POST',
                    dateType: 'json',
                    data: $.toJSON(Product),
                    contentType: 'application/json;charset=utf-8',
                    success: function () {
                        ctr.remove();
                        //debugger;
                        ShowAddResult(Product);
                    }
                });
            });

            //添加
            $("#btnAdd").click(function () {
                var productID = $("#txtNewProductID").val();
                var productName = $("#txtNewProductName").val();
                var productPrice = $("#txtNewProductPrice").val();
                var productDate = $("#txtNewProductDate").val();

                var Product = { "ProductID": parseInt(productID), "ProductName": productName, "ProductPrice": productPrice, "ProductDate": productDate };
                var url = '<%=Url.Action("AddProduct") %>';
                $.ajax({
                    url: url,
                    type: 'POST',
                    dateType: 'json',
                    data: $.toJSON(Product),
                    contentType: 'application/json;charset=utf-8',
                    success: ShowAddResult
                });
            });
            function ShowAddResult(result) {
                //debugger;
                var tr1 = '<tr id="' + 1 + result.ProductID + '">';
                var td1 = '<td align="left"><a href="#" class="ShowDetail">查看詳細</a>&nbsp;&nbsp;<a href="#" id="del" class="del">刪除</a>&nbsp;&nbsp;<a href="#" id="modify" class="modify">修改</a></td>';
                var td2 = '<td id="tdID">' + result.ProductID + '</td>';
                var td3 = '<td>' + result.ProductName + '</td>';
                var td4 = '<td>' + result.ProductPrice + '</td>';
                var td5 = '<td>' + result.ProductDateStr + '</td>';
                var tr2 = '</tr>';
                var tr = tr1 + td1 + td2 + td3 + td4 + td5 + tr2;
                $(tr).appendTo('#tbl');

                $(".del").unbind("click").bind("click", function () {
                    var url = '<%=Url.Action("Delete") %>';
                    var currentTr = $(this).parent().parent(); //當前行
                    var currentTd = $("#tdID", currentTr).text(); //當前行所對應的productid
                    url = url + "/" + currentTd;
                    //alert(currentTd);
                    $.ajax({
                        url: url,
                        type: "GET",
                        dataType: "json",
                        success: function () {
                            currentTr.remove();
                        }
                    })
                });

                $(".ShowDetail").unbind("click").bind("click", function () {
                    var currentTr = $(this).parent().parent(); //當前行
                    var currentTd = $("#tdID", currentTr).text(); //當前行所對應的productid
                    var url = '<%=Url.Action("Detail") %>';
                    url = url + "/" + currentTd;
                    //                    alert(currentTd);
                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        success: ShowDetailResult
                    })
                });

                $(".modify").unbind("click").bind("click", function () {
                    var currentTr = $(this).parent().parent(); //當前行
                    var currentTd = $("#tdID", currentTr).text(); //當前行所對應的productid
                    ctr = currentTr; //提交後移除當前行
                    var url = '<%=Url.Action("Detail") %>';
                    url = url + "/" + currentTd;
                    //                    alert(currentTd);
                    $.ajax({
                        url: url,
                        type: "POST",
                        dataType: "json",
                        success: ShowResult
                    })
                });
            }
        });

4.介面展示

    <br />
    <div>
    <table id="tabAdd">
    <tr>
    <td>ProductID</td>
    <td><input type="text" id="txtNewProductID" class="required"/></td>
    <td>ProductName:</td>
    <td><input type="text" id="txtNewProductName" class="required"/></td>
    </tr>
    <tr>
    <td>ProductPrice:</td>
    <td><input type="text" id="txtNewProductPrice" /></td>
    <td>ProductDate:</td>
    <td><input type="text" id="txtNewProductDate" /></td>
    <td><input type="button" value="添加" id="btnAdd"/></td>
    </tr>
    </table>
    </div>

    <div>
    <% List<TestJquery.Models.Product> _ProductList = ViewData["ProductList"] as List<TestJquery.Models.Product>; %>
        <%if (_ProductList != null)
          {
        %>
        <table id="tbl">
        <thead><tr><td style="width:200px;">操作</td>
        <td style="width:50px;">ProductID</td>
        <td style="width:50px;">ProductName</td>
        <td style="width:50px;">ProductPrice</td>
        <td style="width:150px;">ProductDate</td></tr></thead>
        <tbody >
            <%foreach (TestJquery.Models.Product tmp in _ProductList)
              { %>
                <tr id="<%:1+tmp.ProductID  %>">
                <td align="left">
               <a href="#" class="ShowDetail">查看詳細</a>&nbsp;&nbsp;
               <a href="#" id="del" class="del">刪除</a>&nbsp;&nbsp;
               <a href="#" id="modify" class="modify">修改</a>
                </td>
                <td id="tdID">
                <%:tmp.ProductID %>
                </td>
                <td>
                <%:tmp.ProductName %>
                </td>
                <td>
                <%:tmp.ProductPrice %>
                </td>
                <td>
                <%:tmp.ProductDate %>
                </td>
                </tr>
            <%} %> 
        <%} %>
    </tbody>
    </table>
    </div>

    <!--彈出詳細層-->
    <div id="divProductDetail" class="hide_box" style="display:none;">
        <h4><a id="aClose" href="javascript:void(0)" title="關閉視窗">&times;</a>詳細資料</h4>
        <table>
        <tr>
        <td>ProductID:</td>
        <td><input type="text" id="txtProductID" /></td>
        </tr>
        <tr>
        <td>ProductName:</td>
        <td><input type="text" id="txtProductName" /></td>
        </tr>
        <tr>
        <td>ProductPrice:</td>
        <td><input type="text" id="txtProductPrice" /></td>
        </tr>
        <tr>
        <td>ProductDate:</td>
        <td><input type="text" id="txtProductDate" /></td>
        </tr>
        </table>
    </div>

    <!--彈出修改層-->
    <div>
    <div id="divModify" class="hide_box" style="display:none;">
        <h4><a id="aaClose" href="javascript:void(0)" title="關閉視窗">&times;</a>修改資訊</h4>
        <table>
        <tr>
        <td>ProductID:</td>
        <td><input type="text" id="txtMProductID" /></td>
        </tr>
        <tr>
        <td>ProductName:</td>
        <td><input type="text" id="txtMProductName" /></td>
        </tr>
        <tr>
        <td>ProductPrice:</td>
        <td><input type="text" id="txtMProductPrice" /></td>
        </tr>
        <tr>
        <td>ProductDate:</td>
        <td><input type="text" id="txtMProductDate" /></td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td align="center"><input id="btnModify" type="button" value="提交" /></td>
        </tr>
        </table>
    </div>
    </div>

5.：  源碼：http://download.csdn.net/source/3559195