Mvc音乐商店demo的ajax异步删除功能总结
刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈!
来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的demo。
其他功能都很快实现了,但是那个异步的删除搞了好久,当然了,主要还是因为我不懂JavaScript,不懂jQuery,更不懂ajax。但最后还是勉强实现了。
首先在前台页面加一个属性,用来标记要删除的行的 id:data-id="@item.AlbumId",然后在每行中标记行号: <tr id="Row-@item.AlbumId">
@foreach (var item in Model) {
<tr id="Row-@item.AlbumId"> <td>
@Html.DisplayFor(modelItem => item.Title)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td>
@Html.DisplayFor(modelItem => item.AlbumArtUrl)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
@Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.AlbumId }) |
<a href="#" class="ajaxdeletelink" data-id="@item.AlbumId" data-name="@item.Title">ajax删除</a>
</td>
</tr>
}
然后在JavaScript中读取到行号,发送到服务器,进行删除操作,删除前后进行提醒,删除后把删除的那一行用jQuery隐藏掉
<script type="text/javascript">
//alert("test");
$(function () {
$(".ajaxdeletelink").click(function () {
var albumid = $(this).attr("data-id");
var albumname = $(this).attr("data-name");
if (confirm('确定要删除唱片:' + albumname + '吗?')); else return false;
if (albumid != '') {
$.post("/StoreManager/AjaxDeleteAlbum", { "id": albumid },
function (data) {
if (data.success = true) {
alert("删除成功!")
}
else {
alert("删除失败");
return;
}
$('#Row-' + albumid).fadeOut('slow');//隐藏掉已经删除的那一行
})
}
}
)
})
</script>
就这样,轻轻松松就解决了列表的异步删除功能了哦!!
为了大家参考,在此把后台代码和数据库连接的代码也附上,供大家参考
控制器代码
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MyMusicStore.Models;
using MyMusicStore.DALs; namespace MyMusicStore.Controllers
{
/// <summary>
/// 管理员操作类
/// </summary>
public class StoreManagerController : Controller
{
private ManagerSQLHelp manager = new ManagerSQLHelp(); //
// GET: /StoreManager/
/// <summary>
/// 获得唱片列表
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
var albums = manager.GetAlbumList();
return View(albums.ToList());
}
/// <summary>
/// 使用ajax异步删除数据
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public bool AjaxDeleteAlbum(int id)
{
Album album = manager.GetAlbumById(id);
bool result=manager.delete(album);
return result;///视图里面还没有实现同时删除掉,需要点击刷新后才显示,记得回来解决这个bug哦
} //
// GET: /StoreManager/Details/5
/// <summary>
/// 通过id获取唱片详情
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Details(int id)
{ var album = manager.GetAlbumById(id);
album.Artist = manager.GetArtistById(album.ArtistId);
album.Genre = manager.GetGenreById(album.GenreId);
return View(album);
} //
// GET: /StoreManager/Create
/// <summary>
/// 添加唱片
/// </summary>
/// <returns></returns>
public ActionResult Create()
{ var Genres = manager.GetGenreList();
var Artists = manager.GetArtistList();
ViewBag.GenreId = new SelectList(Genres, "GenreId", "Name");
ViewBag.ArtistId = new SelectList(Artists, "ArtistId", "Name");
return View();
} //
// POST: /StoreManager/Create
/// <summary>
/// 添加唱片第二次请求
/// </summary>
/// <param name="album"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Create(Album album)
{
//ManagerSQLHelp manager = new ManagerSQLHelp();
if (ModelState.IsValid)
{
//db.Albums.Add(album);
//db.SaveChanges();
//ManagerSQLHelp manager = new ManagerSQLHelp();
manager.AddAlbum(album);
return RedirectToAction("Index");
}
return View(album);
} //
// GET: /StoreManager/Edit/5
/// <summary>
/// 编辑唱片
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Edit(int id)
{ Album album = manager.GetAlbumById(id);
album.AlbumId = id;
var Genres = manager.GetGenreList();
var Artists = manager.GetArtistList();
if (album == null)
{
return HttpNotFound();
}
ViewBag.GenreId = new SelectList(Genres, "GenreId", "Name", album.GenreId);//通过id获取名字,显示在下拉框中
ViewBag.ArtistId = new SelectList(Artists, "ArtistId", "Name", album.ArtistId);
return View(album);
} //
// POST: /StoreManager/Edit/5
/// <summary>
/// 编辑唱片提交时
/// </summary>
/// <param name="album"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Edit(Album album)
{ if (ModelState.IsValid)
{ manager.UpdateAlbum(album);
return RedirectToAction("Index");
}
return View(album);
} //
// GET: /StoreManager/Delete/5
/// <summary>
/// 普通方式删除唱片
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public ActionResult Delete(int id = )
{
//Album album = db.Albums.Find(id);
Album album = manager.GetAlbumById(id);
if (album == null)
{
return HttpNotFound();
}
return View(album);
} //
// POST: /StoreManager/Delete/5
/// <summary>
/// 普通方式删除唱片确认时
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpPost, ActionName("Delete")]
public ActionResult DeleteConfirmed(int id)
{
Album album = manager.GetAlbumById(id);
manager.delete(album);
return RedirectToAction("Index");
} protected override void Dispose(bool disposing)
{
//db.Dispose();
base.Dispose(disposing);
}
}
}
数据库连接代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MyMusicStore.Models;
using Dapper; namespace MyMusicStore.DALs
{
/// <summary>
/// 管理员数据库操作类
/// </summary>
public class ManagerSQLHelp
{
/// <summary>
/// 获得唱片列表
/// </summary>
/// <returns></returns>
public List<Album> GetAlbumList()
{
var list = new List<Album>();
try
{
string sql = "select * from Album";
using (var context = DataBaseConnection.GetSqlServerConnection())
{
list = context.Query<Album>(sql).ToList();
context.Dispose();
} }
catch (Exception)
{ throw; }
return list;
}
/// <summary>
/// 获得分类列表
/// </summary>
/// <returns></returns>
public List<Genre> GetGenreList()
{
var list = new List<Genre>();
try
{
string sql = "select * from Genre";
using (var context = DataBaseConnection.GetSqlServerConnection())
{
list = context.Query<Genre>(sql).ToList();
context.Dispose();
} }
catch (Exception)
{ throw; }
return list;
}
/// <summary>
/// 获得艺术家列表
/// </summary>
/// <returns></returns>
public List<Artist> GetArtistList()
{
var list = new List<Artist>();
try
{
string sql = "select * from Artist";
using (var context = DataBaseConnection.GetSqlServerConnection())
{
list = context.Query<Artist>(sql).ToList();
context.Dispose();
} }
catch (Exception)
{ throw; }
return list;
}
/// <summary>
/// 通过唱片id获取唱片信息
/// </summary>
/// <param name="AlbumId"></param>
/// <returns></returns>
public Album GetAlbumById(int AlbumId)
{
var album = new Album();
try
{
string sql = "select * from Album where AlbumId=@AlbumId";
using (var context = DataBaseConnection.GetSqlServerConnection())
{
album = context.Query<Album>(sql, new { AlbumId = AlbumId }).FirstOrDefault();
context.Dispose();
}
}
catch (Exception)
{ throw;
}
return album;
}
/// <summary>
/// 通过id获取分类信息
/// </summary>
/// <param name="GenreId"></param>
/// <returns></returns>
public Genre GetGenreById(int GenreId)
{
var genre = new Genre();
try
{
string sql = "select * from Genre where GenreId=@GenreId";
using (var context = DataBaseConnection.GetSqlServerConnection())
{
genre = context.Query<Genre>(sql, new { GenreId = GenreId }).FirstOrDefault();
context.Dispose();
}
}
catch (Exception)
{ throw;
}
return genre;
}
/// <summary>
/// 通过id获取艺术家信息
/// </summary>
/// <param name="ArtistId"></param>
/// <returns></returns>
public Artist GetArtistById(int ArtistId)
{
var artist = new Artist();
try
{
string sql = "select * from Artist where ArtistId=@ArtistId";
using (var context = DataBaseConnection.GetSqlServerConnection())
{
artist = context.Query<Artist>(sql, new { ArtistId = ArtistId }).FirstOrDefault();
context.Dispose();
}
}
catch (Exception)
{ throw;
}
return artist;
}
/// <summary>
/// 添加唱片
/// </summary>
/// <param name="album"></param>
/// <returns></returns>
public bool AddAlbum(Album album)
{ bool result = false;
try
{
string sql = @"insert into Album (GenreId,ArtistId,Title,Price,AlbumArtUrl)values(@GenreId,@ArtistId,@Title,@Price,@AlbumUrl)";
var paras = new DynamicParameters();
paras.Add("GenreId", album.GenreId);
paras.Add("ArtistId", album.ArtistId);
paras.Add("Title", album.Title);
paras.Add("Price", album.Price);
paras.Add("AlbumUrl", album.AlbumArtUrl);
//var notice = new Notice();
using (var context = DataBaseConnection.GetSqlServerConnection())
{
var affectrow = context.Execute(sql, paras);
result = affectrow == ;
context.Dispose();
} }
catch (Exception)
{ //throw;
}
return result;
}
/// <summary>
/// 更新唱片
/// </summary>
/// <param name="album"></param>
/// <returns></returns>
public bool UpdateAlbum(Album album)
{ bool result = false;
try
{
string sql = @"update Album set GenreId=@GenreId,ArtistId=@ArtistId,Title=@Title,Price=@Price,AlbumArtUrl=@AlbumUrl where AlbumId=@AlbumId";
//insert into Album (GenreId,ArtistId,Title,Price,AlbumArtUrl)values(@GenreId,@ArtistId,@Title,@Price,@AlbumUrl)";
var paras = new DynamicParameters();
paras.Add("AlbumId", album.AlbumId);
paras.Add("GenreId", album.GenreId);
paras.Add("ArtistId", album.ArtistId);
paras.Add("Title", album.Title);
paras.Add("Price", album.Price);
paras.Add("AlbumUrl", album.AlbumArtUrl);
//var notice = new Notice();
using (var context = DataBaseConnection.GetSqlServerConnection())
{
var affectrow = context.Execute(sql, paras);
result = affectrow == ;
context.Dispose();
} }
catch (Exception)
{ //throw;
}
return result;
}
/// <summary>
/// 删除唱片
/// </summary>
/// <param name="album"></param>
/// <returns></returns>
public bool delete(Album album)
{
//var notice = new Notice();
//notice = model;
var result = false;
var albumid = album.AlbumId;
try
{
string sql = "delete from Album where AlbumId=@albumid";
using (var context = DataBaseConnection.GetSqlServerConnection())
{
var affectrow = context.Execute(sql, album);
result = affectrow == ;
context.Dispose();
}
}
catch (Exception)
{ throw;
} return result;
} }
}
Mvc音乐商店demo的ajax异步删除功能总结的更多相关文章
- ASP.NET MVC 音乐商店 - 目录
这一个系列的内容来自微软的音乐商店 Music Store, 这是项目在 Codeplex 上的地址:http://mvcmusicstore.codeplex.com/. 这个项目使用 ASP.NE ...
- MVC 音乐商店 第 8 部分: 购物车与 Ajax 更新
MVC 音乐商店是介绍,并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序. MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线,并实现 ...
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService
使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...
- MVC 音乐商店 第 9 部分: 注册和结帐
MVC 音乐商店是介绍,并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序. MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线,并实现 ...
- python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)
python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...
- ASP.NET MVC 音乐商店 - 3. 视图与模型
上一篇中使用字符串,这一篇我们就开始使用视图来处理. 我们已经可以从控制器的 Action 中返回一个字符串,这可以帮助我们更好地理解 Controller 是如何工作的.但是对于创建一个 Web 程 ...
- ASP.NET MVC 音乐商店 - 0 概览
这是一个系列文章,原文内容出自微软的 MusicStore. 首先对原文内容进行了简单的翻译,以方便大家参考,另外对于其中的部分内容,也进行了简单的分析,使用的 Visual Studio 也换成了中 ...
- MVC&WebForm对照学习:ajax异步请求
写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...
- AJAX异步删除操作
@Ajax.ActionLink("删除", "Delete", new {id = user.Id}, ajaxOption) @{ var ajaxOpti ...
随机推荐
- IntelliJ IDEA14如何配置tomcat
http://doc.okbase.net/frank1234/archive/121479.html
- 什么是JSONP以及它是怎么产生的
什么是JSONP以及它是怎么产生的 1.什么是jsonp JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Scr ...
- jQuery中Ajax事件顺序及各参数含义
Ajax会触发很多事件.有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle ...
- Android的init过程详解(一)(转)
本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 本文及后续几篇文章将对Android的初始化(init)过程进行详细地.剥丝抽茧式地分析,并且在其中穿插了大量的知识,希望 ...
- Unable to resolve target 'android-14' 解决办法
学习安卓的时候用Eclipse导入工程之后出现Unable to resolve target 'android-14' 这样的问题,代码确定没有问题,因为是从网上教程下载的示例代码,上网搜索了一下, ...
- python之路-随笔 python处理excel文件
小罗问我怎么从excel中读取数据,然后我百了一番,做下记录 以下代码来源于:http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html ...
- Scala-Partial Functions(偏函数)
如果你想定义一个函数,而让它只接受和处理其参数定义域范围内的子集,对于这个参数范围外的参数则抛出异常,这样的函数就是偏函数(顾名思异就是这个函数只处理传入来的部分参数). 偏函数是个特质其的类型为Pa ...
- Java的IO以及线程练习
文件的IO操作: 字节流: 输入字节流: InputStream 所有输入字节流的基类,抽象类. FileInputStream 读取文件的输入字节流. BufferedInputStream ...
- [转]Laravel 4之表单
Laravel 4之表单 http://dingjiannan.com/2013/laravel-forms/ 创建表单 除了原有的方式创建表单,Laravel提供了一种便捷的方式 <!-- a ...
- iOS8 Core Image In Swift:人脸检测以及马赛克
iOS8 Core Image In Swift:自动改善图像以及内置滤镜的使用 iOS8 Core Image In Swift:更复杂的滤镜 iOS8 Core Image In Swift:人脸 ...