JQuery对ASP.NET MVC数据进行更新删除
以前学习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即可，来达到：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Asp.net mvc 数据调用示例代码
(1)首先我们创建一个mvc项目,当然最好是mvc1.0版本以上. (2)我这个小Demo,没有重新配置路由解析,使用的是mvc项目默认的路由解析地址.当然如果谁感兴趣也可以自己添加一个默认路由! (3)我这里有一个名字叫Database1.mdf的数据库,里面包含一个News表. (4)然后我们右击Models文件夹,Models>添加新项,选择: 名字可以自己随便起.我这里叫做Test.edmx,然后点击添加. 下一步: 这里我们可以点击新建连接,来选择自己想要的数据库,最下面的是WebCo
-
ASP.NET MVC 数据验证及相关内容
一.数据验证 数据验证的步骤在模型类中添加与验证相关的特性标记在客户端导入与验证相关的js文件和css文件使用与验证相关的Html辅助方法在服务器端判断是否通过服务器端验证常用的验证标记 Required:非空验证StringLength:验证字符串的长度RegularExpression:正则表达式验证Compare:比较两个字段的值是否相等Range:范围验证Remote:服务器验证(需要在controller中编写返回值为JsonResult的Action)自定义验证标记与验证相关的js文
-
ASP.NET Mvc开发之查询数据
对于.NET平台上开发WebForm项目,程序员操作数据的方法主要是通过使用ADO.NET.而我们MVC操作数据库呢?与ADO.NET相比又有怎样的优势呢? 一.大家都在谈的EF到底是什么? EF,全称EntityFramWork.就是微软以ADO.NET为基础发展的所谓ORM(对象关系映射框架,或者说是数据持久化框架). 简单的来说就是根据实体对象操作数据表中数据的一种面向对象的操作框架,具体的底层也是调用ADO.NET. 下面我们就来演示怎么使用EF来操作数据库: 在数据库关系图中,表之间的
-
ASP.NET中MVC从后台控制器传递数据到前台视图的方式
本文实例讲述了ASP.NET中MVC从后台控制器传递数据到前台视图的方式.分享给大家供大家参考.具体分析如下: 数据存储模型Model: 复制代码 代码如下: public class CalendarEvent { public string id { get; set; } public DateTime start { get; set; } public DateTime end { get; set; } public string backgroundColor { get; set
-
利用ASP.NET MVC+EasyUI+SqlServer搭建企业开发框架
我们要搭建的框架是企业级开发框架,适用用企业管理信息系统的开发,如:OA.HR等 1.框架名称:sampleFrame. 2.搭建原则:最少知识原则. 3.先定义一个简单的编码规范:除类名和接口名外,其余首字母小写. 4.准备开发环境:vs2010及以上(mvc4).sqlserver.jquery2.0和easyui1.4.5 首先来看一下列表页面的效果图: 我们期望简洁带前台代码,如下: <table id="dataGrid" class="easyui-data
-
ASP.NET MVC使用EPPlus，导出数据到Excel中
好久没写博客了,今天特地来更新一下,今天我们要学习的是如何导出数据到Excel文件中,这里我使用的是免费开源的Epplus组件. 源代码下载:https://github.com/caofangsheng93/ExcelExportInMvc 介绍 这篇文章,介绍的是怎样导出数据到Excel文件中,大多数的后端程序都有报表功能:把显示在Grid中的数据导出到Excel文件中,这篇文章中使用的是EPPlus组件. EPPlus是一个基于OOXML[Open Extended Markup Lang
-
ASP.NET中MVC传递数据的几种形式总结
本文实例讲述了ASP.NET中MVC传递数据的几种形式.分享给大家供大家参考.具体如下: 在Asp.net mvc开发中,Controller需要向View提供Model,然后View将此Model渲染成HTML.这篇文章介绍三种由Controller向View传递数据的方式,实现一个DropDownList的显示. 第一种:ViewData ViewData是一个Dictionary.使用非常简单,看下面代码: public ActionResult ViewDataWay(int id) {
-
ASP.NET Mvc开发之删除修改数据
之前那篇文章介绍了ASP.NET MVC使用EF来查询数据和EF中DbQuery<T>泛型对象对数据的延迟加载.今天我们就来看看我们怎么使用EF来删除数据. 其实现在的Web开发通用的模式就是前端使用Js和JQuery来和后端进行数据交互.那么我们就在前端来加两个删除和更新的脚本.代码如下: <!--遍历 Action方法 设置给 ViewData 的集合数据,生成HTML代码--> @foreach (BlogArticle a in ViewData["DataLis
-
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
调用jQuery的ajax方法时,jQuery会根据post或者get协议对参数data进行序列化; 如果提交的数据使用复杂的json数据,例如: {userId:32323,userName:{firstName:"李",lastName:"李大嘴"}} 那么服务器是无法正常接收到完整的参数,因为jQuery对data的序列化,是使用了键值对拼装的方式; 参数拼装成 userId=32323&userName=object ; userName所指向的对象
-
asp.net实现的MVC跨数据库多表联合动态条件查询功能示例
本文实例讲述了asp.net实现的MVC跨数据库多表联合动态条件查询功能.分享给大家供大家参考,具体如下: 一.控制器中方法 [HttpGet] public ActionResult Search() { ViewBag.HeadTitle = "搜索"; ViewBag.MetaKey = "\"123\""; ViewBag.MetaDes = "\"456\""; string whereText
-
asp.net mvc4 mysql制作简单分页组件（部分视图）
在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstrap分页组件,这可以参考http://v3.bootcss.com/components/. 先将生成项目效果截图呈上: 这里有需要预先知道的,是mysql分页查询与mssql分页查询实现不同点在于,mysql支持limit语句,limit格式为 limit pageIndex*pageSize,p
-
asp.net mvc 从数据库中读取图片的实现代码
首先是创建一个类,继承于ActionResult,记住要引用System.Web.Mvc命名空间,如下: 复制代码 代码如下: public class ImageResult : ActionResult { public ImageFormat ContentType { get; set; } public Image image { get; set; } public string SourceName { get; set; } public ImageResult(string _
-
ASP.NET MVC DropDownList数据绑定及使用详解
一:DropDownList 1.1 DropDownList绑定数据 1.1.1 DropDownList 固定绑定 这种方式适合那些已经固定的数据绑定到DropDownList上. 例 复制代码 代码如下: <asp:DropDownList runat="server" ID="ddlArea" Width="120px" > <asp:Listitem value="0">选择性别</as