JQuery对ASP.NET MVC数据进行更新删除


Posted in Javascript onJuly 13, 2016

以前学习ASP.NET MVC时,学习与应用,操作过数据显示,添加,编辑,更新和删除等功能。
很多方法是相通的,看自己是怎样来进行方便,快捷,高效率。
今天Insus.NET写的练习,是直接对绑定在Table的数据进行更新,删除。
在项目中,创建一个实体,也就是说,对数据库时行通信,对数据进行操作:

JQuery对ASP.NET MVC数据进行更新删除

public IEnumerable<ToolLocation> GetAllToolLocations()
  {
   sp.ConnectionString = DB.ConnectionString;
   sp.Parameters = null;
   sp.ProcedureName = "usp_ToolLocation_GetAll";
   DataTable dt = sp.ExecuteDataSet().Tables[0];
   return dt.ToList<ToolLocation>();
  }

  public void Update(ToolLocation tl)
  {
   List<Parameter> param = new List<Parameter>() {
         new Parameter("@ToolLocation_nbr", SqlDbType.SmallInt, 2, tl.ToolLocation_nbr),
         new Parameter("@LocationName",SqlDbType.NVarChar,-1,tl.LocationName),
         new Parameter("@Description",SqlDbType.NVarChar,-1,tl.Description),
         new Parameter("@IsActive",SqlDbType.Bit,1,tl.IsActive)
   };
   sp.ConnectionString = DB.ConnectionString;
   sp.Parameters = param;
   sp.ProcedureName = "usp_ToolLocation_Update";
   sp.Execute();
  }

  public void Delete(ToolLocation tl)
  {
   List<Parameter> param = new List<Parameter>() {
         new Parameter("@ToolLocation_nbr", SqlDbType.SmallInt, 2, tl.ToolLocation_nbr)
   };
   sp.ConnectionString = DB.ConnectionString;
   sp.Parameters = param;
   sp.ProcedureName = "usp_ToolLocation_Delete";
   sp.Execute();
  }

在项目的控制器中:

JQuery对ASP.NET MVC数据进行更新删除

创建视图,并绑定数据:

JQuery对ASP.NET MVC数据进行更新删除

@using Insus.NET.Models;
@model IEnumerable<ToolLocation>

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Edit</title>
 <link href="~/Content/css/table.css" rel="stylesheet" />
 <script src="~/Scripts/jquery-2.2.1.js"></script>
 
</head>
<body>
 <div>
  <table>
   <tr>
    <td>ToolLocation_nbr</td>
    <td>LocationName</td>
    <td>Description</td>
    <td>IsActive</td>
    <td></td>
   </tr>
   @foreach (var tl in Model)
   {
    <tr>
     <td>@tl.ToolLocation_nbr<input id="Hidden1" type="hidden" value="@tl.ToolLocation_nbr" /></td>
     <td>@Html.TextBox("LocationName", tl.LocationName)</td>
     <td>@Html.TextBox("Description", tl.Description) </td>
     <td>@Html.CheckBox("IsActive", tl.IsActive)</td>
     <td>
      <input class="Update" type="button" title="Update" value="Update" />
     </td>
    </tr>
   }
  </table>
 </div>
</body>
</html>

Source Code

上面步骤#4的jQuery代码:

JQuery对ASP.NET MVC数据进行更新删除

运行一下,看看效果:

JQuery对ASP.NET MVC数据进行更新删除

上面是对数据进行更新的功能,下面的实现,是对Table内的数据删除。

JQuery对ASP.NET MVC数据进行更新删除

@using Insus.NET.Models;
@model IEnumerable<ToolLocation>

<!DOCTYPE html>

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Delete</title>
 <link href="~/Content/css/table.css" rel="stylesheet" />
 <script src="~/Scripts/jquery-2.2.1.js"></script>

</head>
<body>
 <div>
  <table>
   <tr>
    <td>ToolLocation_nbr</td>
    <td>LocationName</td>
    <td>Description</td>
    <td>IsActive</td>
    <td></td>
   </tr>
   @foreach (var tl in Model)
   {
    <tr>
     <td>@tl.ToolLocation_nbr<input id="Hidden1" type="hidden" value="@tl.ToolLocation_nbr" /></td>
     <td>@tl.LocationName</td>
     <td>@tl.Description</td>
     <td>@Html.CheckBox("IsActive", tl.IsActive, new { disabled = "disabled" })</td>
     <td>
      <input class="Delete" type="button" title="Delete" value="Delete" />
     </td>
    </tr>
   }
  </table>
 </div>
</body>
</html>

上面标记#4的jQuery代码,即是删除的核心功能:

JQuery对ASP.NET MVC数据进行更新删除

运行程序,看看删除的效果:

JQuery对ASP.NET MVC数据进行更新删除

删除成功之后,我们不必重导向,只需要删除这行html即可,来达到:

JQuery对ASP.NET MVC数据进行更新删除

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
js中for in语句的用法讲解
Apr 24 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
JQuery学习总结【一】
Dec 01 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 #Javascript
Bootstrap登陆注册页面开发教程
Jul 12 #Javascript
深入浅析knockout源码分析之订阅
Jul 12 #Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 #Javascript
JavaScript导航脚本判断当前导航
Jul 12 #Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 #Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 #Javascript
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP 存储文本换行实现方法
2010/01/05 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python之循环结构
2019/01/15 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
增大python字体的方法步骤
2020/07/05 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
会计电算化专业毕业生推荐信
2013/12/24 职场文书
内业资料员岗位职责
2014/01/04 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
销售团队激励口号
2014/06/06 职场文书
滴水洞导游词
2015/02/10 职场文书
毕业生政审意见范文
2015/06/04 职场文书
培训感想范文
2015/08/07 职场文书
感恩的心主题班会
2015/08/12 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS