码迷,mamicode.com
首页 > Web开发 > 详细

Mvc音乐商店demo的ajax异步删除功能总结

时间:2015-07-25 11:58:02      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

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

    来公司后要进行培训,给我们的作业中有一个使用 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 = 0)
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 == 1;
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 == 1;
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 == 1;
250                     context.Dispose();
251                 }
252             }
253             catch (Exception)
254             {
255 
256                 throw;
257             }
258 
259             return result;
260         }
261 
262 
263     }
264 }

 

Mvc音乐商店demo的ajax异步删除功能总结

标签:

原文地址:http://www.cnblogs.com/ygx-me/p/4675527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!