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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
谈谈React中的Render Props模式
Dec 06 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
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
php minixml详解
2008/07/19 PHP
PHP 柱状图实现代码
2009/12/04 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
jquery中:input和input的区别分析
2011/07/13 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Python简单实现网页内容抓取功能示例
2018/06/07 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
pygame实现非图片按钮效果
2019/10/29 Python
python 实现任务管理清单案例
2020/04/25 Python
Pycharm Git 设置方法
2020/09/15 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
保荐人的岗位职责
2013/11/19 职场文书
40岁生日感言
2014/02/15 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
党支部半年考察意见
2015/06/01 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python