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 ...
随机推荐
- liunx下安装mysql没有初始密码的解决方法
#/etc/init.d/mysql stop #cd /usr/local/mysql #mysqld_safe --user=mysql --skip-grant-tables --skip-ne ...
- jquery.BannerRotator.js
项目地址:https://github.com/snipertulip/BannerRotator 演示地址:http://snipertulip.github.io/BannerRotator/de ...
- 生成bundle和移除bundle
1.命令行生成bundle $ php bin/console generate:bundle --namespace=Acme/TestBundle 2.移除bundle(新的bundle) App ...
- JDK Linux环境配置
① $sudo vi /etc/profile ② 在末尾行添加 #set java environment JAVA_HOME=/usr/local/jdk1.7.0 CLASSPATH=.:$JA ...
- IOS 面试 --- 动画 block
1 谈谈对Block 的理解?并写出一个使用Block执行UIVew动画? 答案:Block是可以获取其他函数局部变量的匿名函数,其不但方便开发,并且可以大幅提高应用的执行效率(多核心CPU可直接处理 ...
- iOS中构造函数与析构函数
一.构造函数 在OC中凡是已init开头的函数我们都称之为构造函数,在声明构造函数的时候,不带参数的一般直接声明为“-(id)init”,带参数的一般声明为“-(id)initWith...”. 1 ...
- 开心菜鸟学习系列－－－－－javascript(2)
最小全局变量 : 1)每个javascript环境有一个全局对象,当你在任意的函数外面使用this的时候可以访问到,你创建的每一个全部变量都成了这个全局对象的属性,在浏览器中,方便起见, ...
- document.body.scrollTop vs document.documentElement.scrollTop && document.body.scrollHeight vs document.documentElement.scrollHeight
FireFox下 document.body.scrollHeight || document.documentElement.scrollHeight;//等价 document.body.scro ...
- 一个简单的webserver
用c语言写了一个web server,特别简单共计一个文件且不到200行. 当然目前的问题还有很多, 不支持php,对图片支持不好,日志功能还没有完善 这些后期都会加上! gcc server.c - ...
- 查看当前发行版可以使用的shell
查看当前发行版可以使用的shell [root@localhost ~]$ cat /etc/shells/bin/sh/bin/bash/sbin/nologin