ASP.NET MVC2.0实现数据的增、删、改、查(续)

最新推荐文章于 2022-05-10 14:06:52 发布
最新推荐文章于 2022-05-10 14:06:52 发布
阅读量4.8k 收藏
点赞数
分类专栏： ASP.NET MVC 文章标签： asp.net mvc function url class json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yoyoshaoye/article/details/6730878
版权

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

yoyoshaoye
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET MVC2.0实现数据增删改查
08-29
ASP.NET MVC2.0实现数据增删改查;注意其中要使用JSON序列化组建。
AspNetMvc2.0安装包
10-15
AspNetMvc2.0安装包
Asp.Net - MVC-实现增删改查
qq_59534628的博客
05-10 5092
添加Home控制器： 在引用MVCLession31Entities字段。 查询： public class HomeController : Controller { MVCLession31Entities db = new MVCLession31Entities(); // GET: Home public ActionResult Index() { //查询员工列表
asp.net MVC 增、删、改
my_my_heart的博客
06-02 306
asp.net MVC 增、删、改增删改 增 public ActionResult Add() { TestDB6Entities db = new TestDB6Entities(); var department = new Department() { Name = "行政部门", Remark = "大家啊睡懒觉" };
asp.net+ajax实现无刷新的增删改查
06-10
asp.net+ajax实现无刷新的增删改查
ASP.NET MVC2+SP1补丁
09-03
Vs2008，ASP.NET MVC2+SP1安装包
Asp.Net Mvc2 增删改查DEMO代码
10-27
接触mvc也有一段时间了（2.0），也看到园子里很多人在学习，自己也在园子里面看过前辈们写的博客，确实受益匪浅。本文写的都是基础中的基础，仅供想学习MVC的新手们入门之作
毕业设计：基于ASP.NET mvc2.0+Layui 权限管理系统.zip
最新发布
10-11
通过学习这个项目，你可以深入理解ASP.NET MVC2.0的架构，了解如何使用Layui构建响应式用户界面，以及如何实现用户权限管理和控制。此外，你还能了解到如何组织代码，如何处理HTTP请求，以及如何与数据库进行交互。...
asp.net mvc2.0
04-23
在ASP.NET MVC2.0中，`模型`是应用程序的核心，负责业务逻辑和数据管理。它与数据库或其他数据源交互，确保数据的准确性和完整性。`视图`则负责呈现用户界面，根据模型中的数据生成响应。而`控制器`是模型和视图之间...
Asp.Net Mvc2 增删改查DEMO附下载
10-28
接触mvc也有一段时间了（2.0），也看到园子里很多人在学习，自己也在园子里面看过前辈们写的博客，确实受益匪浅。本文写的都是基础中的基础，仅供想学习MVC的新手们入门之作
c#.net/asp.net增改查删的一个项目
01-03
用c#.net/asp.net做的增改查删的一个项目，有 access数据库， 比较简单，适合初学者哦
asp.net c#课程设计 附详细文档 大学生兼职系统 实现登陆增删改查
12-05
asp.net c#课程设计 附详细文档 大学生兼职系统 实现登陆增删改查
asp.net core mvc 项目搭建 三、增删改数据【干货教程】
maliangdyx1的博客
05-28 1855
三 数据的增删改查 实现思路 在Controller里面增加 两个页面分别是 List 和 Edit 对应的增加两个试图 试图中的核心代码 <div class="ibox float-e-margins"> <div class="ibox-content"> <form id="divForm" method="POST"> <div class="for...
MVC＋EF+AJAX增删改查小白码项目
qq_60521457的博客
07-29 407
1.进入vs，点击创建新项目，选择ASP.NET Web 应用程序(.NET Framework): 2. 输入项目名称，选择项目保存地址： 3.选择MVC项目： 4.项目创建成功，右键点击Ｍｏｄｅｌ文件夹： 5.点击添加—新建项： 6.选择数据—ADO.NET 实体数据模型：点击添加 7.选择来自数据库的EF设计器：点击下一步 8.点击新建连接: 9.输入服务器名".",选择数据库(这个点表示此电脑): 10.数据库连接起来之后,点...
我的 ASP.NET MVC2 学习笔记<二>：数据的新增、删除、编辑功能的实现
weixin_34177064的博客
09-24 158
新增功能的实现：先看控制器的代码 publicActionResultCreate() { returnView(); }在点击Index页面中的新增时执行上面这段代码打开Create.aspx页面 [HttpPost] publicActionResult...
ADO.Net（一）——增、删、改、查
weixin_30311605的博客
10-08 189
数据访问 对应命名空间：System.Data.SqlClient; SqlConnection:连接对象 SqlCommand:命令对象 SqlDataReader:读取器对象 CommandText：命令文本 增删改、查分以下几步： 1、造连接字符串 stringconnstring= "server=.;database=mydb;user=sa;pwd=12...
Asp.net MVC 学习之路-003（增删改查，后端手工，前端生成）
weixin_33758863的博客
03-09 2055
时间：2017-03-09 Asp.net Mvc实现增删改查 1， 创建数据库 可参考我写的EntityFramework实现过程：http://www.jianshu.com/nb/10166743 基于EF-ModelFirst思想在项目models文件夹下新建一个ADO.NET实体数据模型，完成实体和...
ASP.NET MVC WebAPI Put和Delete请求出现405(Method not allowed)错误
anbian4201的博客
04-18 741
解决办法： 在站点根目录下的web.config设置如下(主要参考添加项)： <system.webServer> <modules> <remove name="FormsAuthentication" /> <remove name="ApplicationInsightsWebTracking" /> ...
ASP.NET MVC 5 - 查询Details和Delete方法
weixin_34406061的博客
04-10 141
在这部分教程中，接下来我们将讨论自动生成的Details和Delete方法。查询Details和Delete方法打开Movie控制器并查看Details方法。public ActionResult Details(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } Mo...
【ASP.NET编程知识】Asp.Mvc 2.0用户服务器验证实例讲解(4).docx
05-15
【ASP.NET编程知识】Asp.Mvc 2.0用户服务器验证实例讲解(4).docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值