你的位置:首页 > Java教程

[Java教程]Mvc音乐商店demo的ajax异步删除功能总结


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

    来公司后要进行培训,给我们的作业中有一个使用 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/5122     /// <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/5142     /// <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/5160     /// <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       try123       {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       try147       {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       try172       {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       try206       {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       try244       {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 }