刚刚从学校出来参加工作，没啥工作经验，所以各位大神们不要嘲笑哈！

来公司后要进行培训，给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008，来实现一个音乐商店的demo。

其他功能都很快实现了，但是那个异步的删除搞了好久，当然了，主要还是因为我不懂JavaScript，不懂jQuery，更不懂ajax。但最后还是勉强实现了。

首先在前台页面加一个属性，用来标记要删除的行的 id：data-id="@item.AlbumId"，然后在每行中标记行号： <tr id="Row-@item.AlbumId">

  1.  @foreach (var item in Model) {
  2.      <tr id="Row-@item.AlbumId">
  3.  
  4.          <td>
  5.              @Html.DisplayFor(modelItem => item.Title)
  6.          </td>
  7.          <td>
  8.              @Html.DisplayFor(modelItem => item.Price)
  9.          </td>
  10.          <td>
  11.              @Html.DisplayFor(modelItem => item.AlbumArtUrl)
  12.          </td>
  13.          <td>
  14.              @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
  15.              @Html.ActionLink("Details", "Details", new { id=item.AlbumId }) |
  16.              @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId }) |
  17.             <a href="#" class="ajaxdeletelink" data-id="@item.AlbumId" data-name="@item.Title">ajax删除</a>
  18.          </td>
  19.      </tr>
  20.  }

然后在JavaScript中读取到行号，发送到服务器，进行删除操作，删除前后进行提醒，删除后把删除的那一行用jQuery隐藏掉

  1.  <script type="text/javascript">
  2.      //alert("test");
  3.      $(function () {
  4.          $(".ajaxdeletelink").click(function () {
  5.              var albumid = $(this).attr("data-id");
  6.              var albumname = $(this).attr("data-name");
  7.              if (confirm('确定要删除唱片：' + albumname + '吗？')); else return false;
  8.              if (albumid != '') {
  9.                  $.post("/StoreManager/AjaxDeleteAlbum", { "id": albumid },
  10.                        function (data) {
  11.                            if (data.success = true) {
  12.                                alert("删除成功！")
  13.                            }
  14.                            else {
  15.                                alert("删除失败");
  16.                                return;
  17.                            }
  18.                            $('#Row-' + albumid).fadeOut('slow');//隐藏掉已经删除的那一行
  19.                        })
  20.              }
  21.          }
  22.      )
  23.      })
  24.  </script>

就这样，轻轻松松就解决了列表的异步删除功能了哦！！

为了大家参考，在此把后台代码和数据库连接的代码也附上，供大家参考

控制器代码

  1.  using System;
  2.  using System.Collections.Generic;
  3.  using System.Data;
  4.  using System.Data.Entity;
  5.  using System.Linq;
  6.  using System.Web;
  7.  using System.Web.Mvc;
  8.  using MyMusicStore.Models;
  9.  using MyMusicStore.DALs;
  10.  
  11.  namespace MyMusicStore.Controllers
  12.  {
  13.      /// <summary>
  14.      /// 管理员操作类
  15.      /// </summary>
  16.      public class StoreManagerController : Controller
  17.      {
  18.          private ManagerSQLHelp manager = new ManagerSQLHelp();
  19.  
  20.          //
  21.          // GET: /StoreManager/
  22.          /// <summary>
  23.          /// 获得唱片列表
  24.          /// </summary>
  25.          /// <returns></returns>
  26.          public ActionResult Index()
  27.          {
  28.              var albums = manager.GetAlbumList();
  29.              return View(albums.ToList());
  30.          }
  31.          /// <summary>
  32.          /// 使用ajax异步删除数据
  33.          /// </summary>
  34.          /// <param name="id"></param>
  35.          /// <returns></returns>
  36.          public bool AjaxDeleteAlbum(int id)
  37.          {
  38.              Album album = manager.GetAlbumById(id);
  39.              bool result=manager.delete(album);
  40.              return result;///视图里面还没有实现同时删除掉，需要点击刷新后才显示，记得回来解决这个bug哦
  41.          }
  42.  
  43.          //
  44.          // GET: /StoreManager/Details/5
  45.          /// <summary>
  46.          /// 通过id获取唱片详情
  47.          /// </summary>
  48.          /// <param name="id"></param>
  49.          /// <returns></returns>
  50.          public ActionResult Details(int id)
  51.          {
  52.  
  53.              var album = manager.GetAlbumById(id);
  54.              album.Artist = manager.GetArtistById(album.ArtistId);
  55.              album.Genre = manager.GetGenreById(album.GenreId);
  56.              return View(album);
  57.          }
  58.  
  59.          //
  60.          // GET: /StoreManager/Create
  61.          /// <summary>
  62.          /// 添加唱片
  63.          /// </summary>
  64.          /// <returns></returns>
  65.          public ActionResult Create()
  66.          {
  67.  
  68.              var Genres = manager.GetGenreList();
  69.              var Artists = manager.GetArtistList();
  70.              ViewBag.GenreId = new SelectList(Genres, "GenreId", "Name");
  71.              ViewBag.ArtistId = new SelectList(Artists, "ArtistId", "Name");
  72.              return View();
  73.          }
  74.  
  75.          //
  76.          // POST: /StoreManager/Create
  77.          /// <summary>
  78.          /// 添加唱片第二次请求
  79.          /// </summary>
  80.          /// <param name="album"></param>
  81.          /// <returns></returns>
  82.          [HttpPost]
  83.          public ActionResult Create(Album album)
  84.          {
  85.              //ManagerSQLHelp manager = new ManagerSQLHelp();
  86.              if (ModelState.IsValid)
  87.              {
  88.                  //db.Albums.Add(album);
  89.                  //db.SaveChanges();
  90.                  //ManagerSQLHelp manager = new ManagerSQLHelp();
  91.                  manager.AddAlbum(album);
  92.                  return RedirectToAction("Index");
  93.              }
  94.               return View(album);
  95.          }
  96.  
  97.          //
  98.          // GET: /StoreManager/Edit/5
  99.          /// <summary>
  100.          /// 编辑唱片
  101.          /// </summary>
  102.          /// <param name="id"></param>
  103.          /// <returns></returns>
  104.          public ActionResult Edit(int id)
  105.          {
  106.  
  107.              Album album = manager.GetAlbumById(id);
  108.              album.AlbumId = id;
  109.              var Genres = manager.GetGenreList();
  110.              var Artists = manager.GetArtistList();
  111.              if (album == null)
  112.              {
  113.                  return HttpNotFound();
  114.              }
  115.              ViewBag.GenreId = new SelectList(Genres, "GenreId", "Name", album.GenreId);//通过id获取名字，显示在下拉框中
  116.              ViewBag.ArtistId = new SelectList(Artists, "ArtistId", "Name", album.ArtistId);
  117.              return View(album);
  118.          }
  119.  
  120.          //
  121.          // POST: /StoreManager/Edit/5
  122.          /// <summary>
  123.          /// 编辑唱片提交时
  124.          /// </summary>
  125.          /// <param name="album"></param>
  126.          /// <returns></returns>
  127.          [HttpPost]
  128.          public ActionResult Edit(Album album)
  129.          {
  130.  
  131.              if (ModelState.IsValid)
  132.              {
  133.  
  134.                  manager.UpdateAlbum(album);
  135.                  return RedirectToAction("Index");
  136.              }
  137.              return View(album);
  138.          }
  139.  
  140.          //
  141.          // GET: /StoreManager/Delete/5
  142.          /// <summary>
  143.          /// 普通方式删除唱片
  144.          /// </summary>
  145.          /// <param name="id"></param>
  146.          /// <returns></returns>
  147.          public ActionResult Delete(int id = )
  148.          {
  149.              //Album album = db.Albums.Find(id);
  150.              Album album = manager.GetAlbumById(id);
  151.              if (album == null)
  152.              {
  153.                  return HttpNotFound();
  154.              }
  155.              return View(album);
  156.          }
  157.  
  158.          //
  159.          // POST: /StoreManager/Delete/5
  160.          /// <summary>
  161.          /// 普通方式删除唱片确认时
  162.          /// </summary>
  163.          /// <param name="id"></param>
  164.          /// <returns></returns>
  165.          [HttpPost, ActionName("Delete")]
  166.          public ActionResult DeleteConfirmed(int id)
  167.          {
  168.              Album album = manager.GetAlbumById(id);
  169.              manager.delete(album);
  170.              return RedirectToAction("Index");
  171.          }
  172.  
  173.          protected override void Dispose(bool disposing)
  174.          {
  175.              //db.Dispose();
  176.              base.Dispose(disposing);
  177.          }
  178.      }
  179.  }

数据库连接代码：

  1.  using System;
  2.  using System.Collections.Generic;
  3.  using System.Linq;
  4.  using System.Web;
  5.  using MyMusicStore.Models;
  6.  using Dapper;
  7.  
  8.  namespace MyMusicStore.DALs
  9.  {
  10.      /// <summary>
  11.      /// 管理员数据库操作类
  12.      /// </summary>
  13.      public class ManagerSQLHelp
  14.      {
  15.          /// <summary>
  16.          /// 获得唱片列表
  17.          /// </summary>
  18.          /// <returns></returns>
  19.          public List<Album> GetAlbumList()
  20.          {
  21.              var list = new List<Album>();
  22.              try
  23.              {
  24.                  string sql = "select * from Album";
  25.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  26.                  {
  27.                      list = context.Query<Album>(sql).ToList();
  28.                      context.Dispose();
  29.                  }
  30.  
  31.              }
  32.              catch (Exception)
  33.              {
  34.  
  35.                  throw;
  36.  
  37.              }
  38.              return list;
  39.          }
  40.          /// <summary>
  41.          /// 获得分类列表
  42.          /// </summary>
  43.          /// <returns></returns>
  44.          public List<Genre> GetGenreList()
  45.          {
  46.              var list = new List<Genre>();
  47.              try
  48.              {
  49.                  string sql = "select * from Genre";
  50.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  51.                  {
  52.                      list = context.Query<Genre>(sql).ToList();
  53.                      context.Dispose();
  54.                  }
  55.  
  56.              }
  57.              catch (Exception)
  58.              {
  59.  
  60.                  throw;
  61.  
  62.              }
  63.              return list;
  64.          }
  65.          /// <summary>
  66.          /// 获得艺术家列表
  67.          /// </summary>
  68.          /// <returns></returns>
  69.          public List<Artist> GetArtistList()
  70.          {
  71.              var list = new List<Artist>();
  72.              try
  73.              {
  74.                  string sql = "select * from Artist";
  75.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  76.                  {
  77.                      list = context.Query<Artist>(sql).ToList();
  78.                      context.Dispose();
  79.                  }
  80.  
  81.              }
  82.              catch (Exception)
  83.              {
  84.  
  85.                  throw;
  86.  
  87.              }
  88.              return list;
  89.          }
  90.          /// <summary>
  91.          /// 通过唱片id获取唱片信息
  92.          /// </summary>
  93.          /// <param name="AlbumId"></param>
  94.          /// <returns></returns>
  95.          public Album GetAlbumById(int AlbumId)
  96.          {
  97.              var album = new Album();
  98.              try
  99.              {
  100.                  string sql = "select * from Album where AlbumId=@AlbumId";
  101.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  102.                  {
  103.                      album = context.Query<Album>(sql, new { AlbumId = AlbumId }).FirstOrDefault();
  104.                      context.Dispose();
  105.                  }
  106.              }
  107.              catch (Exception)
  108.              {
  109.  
  110.                  throw;
  111.              }
  112.              return album;
  113.          }
  114.          /// <summary>
  115.          /// 通过id获取分类信息
  116.          /// </summary>
  117.          /// <param name="GenreId"></param>
  118.          /// <returns></returns>
  119.          public Genre GetGenreById(int GenreId)
  120.          {
  121.              var genre = new Genre();
  122.              try
  123.              {
  124.                  string sql = "select * from Genre where GenreId=@GenreId";
  125.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  126.                  {
  127.                      genre = context.Query<Genre>(sql, new { GenreId = GenreId }).FirstOrDefault();
  128.                      context.Dispose();
  129.                  }
  130.              }
  131.              catch (Exception)
  132.              {
  133.  
  134.                  throw;
  135.              }
  136.              return genre;
  137.          }
  138.          /// <summary>
  139.          /// 通过id获取艺术家信息
  140.          /// </summary>
  141.          /// <param name="ArtistId"></param>
  142.          /// <returns></returns>
  143.          public Artist GetArtistById(int ArtistId)
  144.          {
  145.              var artist = new Artist();
  146.              try
  147.              {
  148.                  string sql = "select * from Artist where ArtistId=@ArtistId";
  149.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  150.                  {
  151.                      artist = context.Query<Artist>(sql, new { ArtistId = ArtistId }).FirstOrDefault();
  152.                      context.Dispose();
  153.                  }
  154.              }
  155.              catch (Exception)
  156.              {
  157.  
  158.                  throw;
  159.              }
  160.              return artist;
  161.          }
  162.          /// <summary>
  163.          /// 添加唱片
  164.          /// </summary>
  165.          /// <param name="album"></param>
  166.          /// <returns></returns>
  167.          public bool AddAlbum(Album album)
  168.          {
  169.  
  170.              bool result = false;
  171.              try
  172.              {
  173.                  string sql = @"insert into Album (GenreId,ArtistId,Title,Price,AlbumArtUrl)values(@GenreId,@ArtistId,@Title,@Price,@AlbumUrl)";
  174.                  var paras = new DynamicParameters();
  175.                  paras.Add("GenreId", album.GenreId);
  176.                  paras.Add("ArtistId", album.ArtistId);
  177.                  paras.Add("Title", album.Title);
  178.                  paras.Add("Price", album.Price);
  179.                  paras.Add("AlbumUrl", album.AlbumArtUrl);
  180.                  //var notice = new Notice();
  181.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  182.                  {
  183.                      var affectrow = context.Execute(sql, paras);
  184.                      result = affectrow == ;
  185.                      context.Dispose();
  186.                  }
  187.  
  188.              }
  189.              catch (Exception)
  190.              {
  191.  
  192.                  //throw;
  193.              }
  194.              return result;
  195.          }
  196.          /// <summary>
  197.          /// 更新唱片
  198.          /// </summary>
  199.          /// <param name="album"></param>
  200.          /// <returns></returns>
  201.          public bool UpdateAlbum(Album album)
  202.          {
  203.  
  204.              bool result = false;
  205.              try
  206.              {
  207.                  string sql = @"update Album set GenreId=@GenreId,ArtistId=@ArtistId,Title=@Title,Price=@Price,AlbumArtUrl=@AlbumUrl where AlbumId=@AlbumId";
  208.  //insert into Album (GenreId,ArtistId,Title,Price,AlbumArtUrl)values(@GenreId,@ArtistId,@Title,@Price,@AlbumUrl)";
  209.                  var paras = new DynamicParameters();
  210.                  paras.Add("AlbumId", album.AlbumId);
  211.                  paras.Add("GenreId", album.GenreId);
  212.                  paras.Add("ArtistId", album.ArtistId);
  213.                  paras.Add("Title", album.Title);
  214.                  paras.Add("Price", album.Price);
  215.                  paras.Add("AlbumUrl", album.AlbumArtUrl);
  216.                  //var notice = new Notice();
  217.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  218.                  {
  219.                      var affectrow = context.Execute(sql, paras);
  220.                      result = affectrow == ;
  221.                      context.Dispose();
  222.                  }
  223.  
  224.              }
  225.              catch (Exception)
  226.              {
  227.  
  228.                  //throw;
  229.              }
  230.              return result;
  231.          }
  232.          /// <summary>
  233.          /// 删除唱片
  234.          /// </summary>
  235.          /// <param name="album"></param>
  236.          /// <returns></returns>
  237.          public bool delete(Album album)
  238.          {
  239.              //var notice = new Notice();
  240.              //notice = model;
  241.              var result = false;
  242.              var albumid = album.AlbumId;
  243.              try
  244.              {
  245.                  string sql = "delete  from Album where AlbumId=@albumid";
  246.                  using (var context = DataBaseConnection.GetSqlServerConnection())
  247.                  {
  248.                      var affectrow = context.Execute(sql, album);
  249.                      result = affectrow == ;
  250.                      context.Dispose();
  251.                  }
  252.              }
  253.              catch (Exception)
  254.              {
  255.  
  256.                  throw;
  257.              }
  258.  
  259.              return result;
  260.          }
  261.  
  262.      }
  263.  }

Mvc音乐商店demo的ajax异步删除功能总结的更多相关文章

  1. ASP.NET MVC 音乐商店 - 目录

    这一个系列的内容来自微软的音乐商店 Music Store, 这是项目在 Codeplex 上的地址:http://mvcmusicstore.codeplex.com/. 这个项目使用 ASP.NE ...

  2. MVC 音乐商店 第 8 部分： 购物车与 Ajax 更新

    MVC 音乐商店是介绍,并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序. MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线,并实现 ...

  3. ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

    使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...

  4. MVC 音乐商店 第 9 部分： 注册和结帐

    MVC 音乐商店是介绍,并分步说明了如何使用 ASP.NET MVC 和 Visual Studio 为 web 开发教程应用程序. MVC 音乐商店是一个轻量级的示例存储实现它卖音乐专辑在线,并实现 ...

  5. python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)

    python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...

  6. ASP.NET MVC 音乐商店 - 3. 视图与模型

    上一篇中使用字符串,这一篇我们就开始使用视图来处理. 我们已经可以从控制器的 Action 中返回一个字符串,这可以帮助我们更好地理解 Controller 是如何工作的.但是对于创建一个 Web 程 ...

  7. ASP.NET MVC 音乐商店 - 0 概览

    这是一个系列文章,原文内容出自微软的 MusicStore. 首先对原文内容进行了简单的翻译,以方便大家参考,另外对于其中的部分内容,也进行了简单的分析,使用的 Visual Studio 也换成了中 ...

  8. MVC&WebForm对照学习：ajax异步请求

    写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认 ...

  9. AJAX异步删除操作

    @Ajax.ActionLink("删除", "Delete", new {id = user.Id}, ajaxOption) @{ var ajaxOpti ...

随机推荐

  1. JSP和Servlet的区别。

    1.jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识别JSP的代码,Web容器将JSP的代码编译成JVM能够识别的java类)2.jsp更擅长 ...

  2. jquery取元素值

    var j = 1; if (rows.length > 0) { for (var i = 0; i < rows.length; i++) { var row = rows[i]; i ...

  3. Xshell4连接Linux后 win快捷键锁屏

    今天在使用Xshell连接CentOS后 使用Vim编辑器编辑完后 习惯性的按了Ctrl+S 然后按什么都不起作用 只能重新连接 通过查资料得知 Ctrl + S 是Linux 锁屏的快捷键 要解除锁 ...

  4. C之函数指针

    这方面的技能,在观察系统调用时,是很需要的. 但我不是很熟悉,另外,要再会函数指针数组的话,那就更强啦~~ 按<HEAD FIRST C>作了个样例: cat find.c #includ ...

  5. DJANGO用户名认证一例

    现在实例了用户登陆,就自带的功能.. urls.py ~~~~~~~~~~ (r'^login/$', login), (r'^logout/$',logout,{'next_page':'/logi ...

  6. POJ 2653 Pick-up sticks(线段相交)

    题意:给定n个木棍依次放下,要求最终判断没被覆盖的木棍是哪些. 思路:快速排斥以及跨立实验可以判断线段相交. #include<algorithm> #include<cstdio& ...

  7. ActiveX in QT

    http://doc.qt.io/qt-4.8/activeqt.htmlhttp://doc.qt.io/qt-5/activeqt-index.html

  8. curl 网页抓取

    如果要把这个网页保存下来,可以使用-o参数,这就相当于使用wget命令了. curl -o [文件名] www.tvbs.cc 二.自动跳转 有的网址是自动跳转的.使用-L参数,curl就会跳转到新的 ...

  9. Jquery 概念性内容编辑器

      概念性jQuery内容编辑器,这是一款非常有特色的jQuery编辑器,该编辑器支持文字.列表.视频.引用等功能,是一款小巧简洁,富有个性化的jQuery内容编辑器插件. 代码: <!doct ...

  10. 什么是野指针？（What is a wild pointer?）

    未被初始化的变量称为野指针(wild pointer).顾名思义,我们不知道这个指针指向内存中的什么地址,使用不当程序会产生各种各样的问题. 理解下面的例子: int main() { int *p; ...