• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > JQuery对ASP.NET MVC数据进行更新删除

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

作者:Insus.NET 字体:[增加 减小] 来源:互联网

Insus.NET 通过本文主要向大家介绍了JQuery,ASP.NET,MVC,数据等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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();
  }

在项目的控制器中:

创建视图,并绑定数据:

@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代码:

运行一下,看看效果:


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

@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代码,即是删除的核心功能:

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

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 基于jQuery判断两个元素是否有重叠部分的代码
  • jQuery遍历对象、数组、集合实例
  • jQuery中addClass()方法用法实例
  • jQuery选择器实例应用
  • jQuery使用$.ajax提交表单完整实例
  • Tab页界面 用jQuery及Ajax技术实现(php后台)
  • jquery动态增加text元素以及删除文本内容实例代码
  • jQuery Validate 校验多个相同name的方法
  • jQuery插件expander实现图片翻转特效
  • jQuery EasyUI API 中文文档 - Menu菜单

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • js实现碰撞检测特效代码分享
    • jquery全选/全不选/反选另一种实现方法(配合原生js)
    • jQuery 全选效果实现代码
    • DropDownList实现可输入可选择(两种版本可选)
    • 10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
    • 使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
    • JQuery datepicker 使用方法
    • 基于jquery实现多选下拉列表
    • IE10中flexigrid无法显示数据的解决方法
    • jQuery中setTimeout的几种使用方法小结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有