ASP.NET MVC4使用MongoDB制作相册管理

数据库  /  管理员 发布于 5年前   315

ASP.NET MVC4使用MongoDB制作相册管理实例分享

TIPS:1.Image转成Base64保存到mongodb字段
         2.数据模型是嵌套的关联 

首先定义Model层: 

 public class Photo : IEquatable<Photo> {  [Required]  public string PhotoName { get; set; }  [Required]  public string PhotoDescription { get; set; }  public string ServerPath { get; set; }  public Photo() { }  public Photo(string name, string desc)  {   PhotoName = name;   PhotoDescription = desc;  }  public bool Equals(Photo other)  {   return string.Equals(PhotoName, other.PhotoName);  } }  public interface IAlbumIterable {  bool HasNext();  Photo Current();  Photo Next(); }    public interface IPhotosAggregable {  IAlbumIterable GetIterator(); } public class AlbumIterator : IAlbumIterable {  private Album collection;  private int count;  public AlbumIterator(Album album)  {   collection = album;  }  public Photo Current()  {   if (count < collection.Count)    return collection[count++];   else    throw new IndexOutOfRangeException();  }  public bool HasNext()  {   if (count < collection.Count - 1)    return true;   else    return false;  }  public Photo Next()  {   if (HasNext())    return collection[++count];   else    throw new IndexOutOfRangeException();  } }  public class Album : IPhotosAggregable {  [BsonId]  public ObjectId Id { get; set; }  [Required]  public string Name { get; set; }  [Required]  public string Description { get; set; }  public string Owner { get; set; }  public Photo TitlePhoto { get; set; }  [BsonDateTimeOptions(Kind = DateTimeKind.Local,Representation =BsonType.DateTime)]  public DateTime CreationTime { get; set; }  public IList<Photo> Pictures { get; set; }  public Album() { Pictures = new List<Photo>(); TitlePhoto = new Photo(); }  public Album(string name, string owner, Photo pic)  {   Name = name;   Owner = owner;   TitlePhoto = pic;   Pictures = new List<Photo>();   TitlePhoto = new Photo();  }  public bool InsertPicture(Photo pic)  {   if (!Pictures.Contains(pic))   {    Pictures.Add(pic);    return true;   }   else    throw new ArgumentException();  }  public bool InsertPictures(List<Photo> photos)  {   foreach(var photo in photos)   {    if (!Pictures.Contains(photo))    {     Pictures.Add(photo);    }    else     throw new ArgumentException();   }   return true;  }  public bool RemovePicture(Photo pic)  {    Pictures.Remove(pic);    return true;  }  public int Count  {   get { return Pictures.Count; }  }  public Photo this[int index]  {   get { return Pictures[index]; }   set { Pictures[index] = value; }  }  public IAlbumIterable GetIterator()  {   return new AlbumIterator(this);  } }

 Services层的MongoAlbumPerformer.cs和ServerPathFinder.cs代码如下: 

 public class MongoAlbumPerformer {  protected static IMongoClient client;  protected static IMongoDatabase database;  private static IMongoCollection<Album> collection;  private string collectionName;  public MongoAlbumPerformer(string databaseName, string collectionName)  {      client = new MongoClient(ConfigurationManager.ConnectionStrings["mongoDB"].ConnectionString);   database = client.GetDatabase(databaseName);   this.collectionName = collectionName;   collection = database.GetCollection<Album>(collectionName, new MongoCollectionSettings { AssignIdOnInsert = true });  }  public void SetCollection(string collectionName)  {   this.collectionName = collectionName;   collection = database.GetCollection<Album>(collectionName);  }  public void CreateAlbum(Album album)  {   var document = new Album   {    Name = album.Name,    Owner = HttpContext.Current.User.Identity.Name,    Description = album.Description,    CreationTime = DateTime.Now,    TitlePhoto = album.TitlePhoto,    Pictures = album.Pictures   };   collection.InsertOne(document);  }  public List<Album> GetAlbumsByUserName(string username)  {   var projection = Builders<Album>.Projection    .Include(a => a.Name)    .Include(a => a.Description)    .Include(a => a.TitlePhoto)    .Include(a=>a.CreationTime);   var result = collection    .Find(a => a.Owner == HttpContext.Current.User.Identity.Name)    .Project<Album>(projection).ToList();   return result;  }  public Album GetPicturesByAlbumName(string albumName)  {   var projection = Builders<Album>.Projection    .Include(a => a.Pictures);   var result = collection    .Find(a => a.Owner == HttpContext.Current.User.Identity.Name & a.Name == albumName)    .Project<Album>(projection).FirstOrDefault();   return result;  }  public void UpdateAlbumAddPhoto(string albumName, Photo photo)  {   var builder = Builders<Album>.Filter;   var filter = builder.Eq(f => f.Name, albumName) & builder.Eq(f => f.Owner, HttpContext.Current.User.Identity.Name);   var result = collection.Find(filter).FirstOrDefault();   if (result == null)    throw new ArgumentException("No album of supplied name: {0}", albumName);   else   {      var picture = new Photo      {       PhotoName = photo.PhotoName,       PhotoDescription = photo.PhotoDescription,       ServerPath = photo.ServerPath,      };      var update = Builders<Album>.Update.Push(a => a.Pictures, picture);      collection.UpdateOne(filter, update, new UpdateOptions { IsUpsert=true });   }  }  public void DeletePhotoFromAlbum(string albumName, string photoName)  {   var builder = Builders<Album>.Filter;   var filter = builder.Eq(f => f.Name, albumName) & builder.Eq(f => f.Owner, HttpContext.Current.User.Identity.Name);   var result = collection.Find(filter).SingleOrDefault();   if (result == null)    throw new ArgumentException("No album of supplied name: {0}", albumName);   else   {    var update = Builders<Album>.Update     .PullFilter(a => a.Pictures, Builders<Photo>.Filter.Eq(p => p.PhotoName, photoName));    long count = collection.UpdateOne(filter, update).MatchedCount;   }  } }public class ServerPathFinder {  public string GetBase64ImageString(HttpPostedFileBase file)  {   string mime = Regex.Match(file.ContentType, @"(?<=image/)\w+").Value;   byte[] bytes = new byte[file.ContentLength];   file.InputStream.Read(bytes, 0, file.ContentLength);   return string.Format("data:image/{0};base64,{1}",mime, Convert.ToBase64String(bytes));  } }

AlbumController.cs代码如下: 

 public class AlbumController : Controller {  MongoAlbumPerformer mongod = new MongoAlbumPerformer("test","albums");  [HttpPost]  public ActionResult AlbumPreview(Photo model, HttpPostedFileBase file, string albumName, string delete, string phot)  {   if (delete == "false")   {    if (file != null)    {     if (!file.ContentType.StartsWith("image"))     {      ModelState.AddModelError("file", "选择正确的格式照片！");     }     else     {      ServerPathFinder finder = new ServerPathFinder();      model.ServerPath = finder.GetBase64ImageString(file);     }     if (ModelState.IsValid)     {      mongod.UpdateAlbumAddPhoto(albumName, model);      ModelState.Clear();     }    }   }   else   {    mongod.DeletePhotoFromAlbum(albumName, phot);    foreach(var error in ModelState.Values)    {     error.Errors.Clear();    }   }   ViewBag.AlbumTitle = albumName;   ViewBag.PhotoList = mongod.GetPicturesByAlbumName(albumName).Pictures;   return View();  }  public ActionResult AlbumPreview(string Name)  {   var album = mongod.GetPicturesByAlbumName(Name);   ViewBag.AlbumTitle = Name;   ViewBag.PhotoList = album.Pictures;   return View();  }  [HttpPost]  public ActionResult Create(Album model, HttpPostedFileBase file)  {   if (!file.ContentType.StartsWith("image"))   {    ModelState.AddModelError("file", "选择正确的格式照片！");   }   else   {    ServerPathFinder finder = new ServerPathFinder();    model.TitlePhoto.ServerPath = finder.GetBase64ImageString(file);       }   if (ModelState.IsValid)   {    model.Owner = HttpContext.User.Identity.Name;    mongod.CreateAlbum(model);   }   var albums = mongod.GetAlbumsByUserName(HttpContext.User.Identity.Name);   ViewBag.Albums = albums;   return View();  }  public ActionResult Create()  {   var albums = mongod.GetAlbumsByUserName(HttpContext.User.Identity.Name);   ViewBag.Albums = albums;   return View();  } } 

部分view视图:
 Create.cshtml 

@{ ViewBag.Title = "Create";}<h2>我的相册</h2>@Html.Partial("_MyAlbums", (List<Album>)ViewBag.Albums)@using (Html.BeginForm("Create", "Album", FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken()  <div class="form-horizontal">  <h4>创建新相册： </h4>  <hr />  @Html.ValidationSummary(true, "", new { @class = "text-danger" })  <div class="form-group">   @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })   <div class="col-md-10">    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })   </div>  </div>  <div class="form-group">   @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })   <div class="col-md-10">    @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })    @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })   </div>  </div>  <div class="form-group">   @Html.LabelFor(model => model.TitlePhoto, htmlAttributes: new { @class = "control-label col-md-2" })   <div class="col-md-10">    <input type="file" name="file" id="file" style="width: 100%;" data-val="true" data-val-required="要求标题图片."/>    @Html.ValidationMessage("file",new { @class = "text-danger" })   </div>  </div>    <div class="form-group">   <div class="col-md-offset-2 col-md-10">    <input type="submit" value="Create" class="btn btn-default" />   </div>  </div> </div>}@section scripts{ @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript">  $('img').click(function (data) {  }); </script>}AlbumPreview.cshtml @{ ViewBag.Title = "AlbumPreview";}@using (Html.BeginForm("AlbumPreview", "Album", FormMethod.Post, new { enctype = "multipart/form-data"})){ @Html.AntiForgeryToken() {Html.RenderPartial("_Preview", (List<Photo>)ViewBag.PhotoList);} <div class="form-horizontal">  <br />  <h4>添加新的照片：</h4>  <hr />  @Html.ValidationSummary(true, "", new { @class = "text-danger" })  <div class="form-group">   @Html.LabelFor(model => model.PhotoName, htmlAttributes: new { @class = "control-label col-md-2" })   <div class="col-md-10">    @Html.EditorFor(model => model.PhotoName, new { htmlAttributes = new { @class = "form-control" } })    @Html.ValidationMessageFor(model => model.PhotoName, "", new { @class = "text-danger" })   </div>  </div>  <div class="form-group">   @Html.LabelFor(model => model.PhotoDescription, htmlAttributes: new { @class = "control-label col-md-2" })   <div class="col-md-10">    @Html.EditorFor(model => model.PhotoDescription, new { htmlAttributes = new { @class = "form-control" } })    @Html.ValidationMessageFor(model => model.PhotoDescription, "", new { @class = "text-danger" })   </div>  </div>  <div class="form-group">   <label class="control-label col-md-2">选择照片：</label>   <div class="col-md-10">    <input type="file" name="file" id="file" style="width: 100%;" data-val="true" data-val-required="请选择图像" />    @Html.ValidationMessage("file", new { @class = "text-danger" })   </div>  </div>  <div class="form-group">   <div class="col-md-offset-2 col-md-10">    <input type="submit" value="Create" class="btn btn-default" />   </div>  </div> </div> <input type="hidden" name="albumName" id="albumName" value="@ViewBag.AlbumTitle" /> <input type="hidden" name="delete" id="delete" value="false" /> <input type="hidden" name="phot" id="phot" value="sraka" />}@section scripts{ @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript">  $(document).ready(function () {   var elements = document.getElementsByClassName("btn btn-xs btn-warning cancel");   for (var i = 0, len = elements.length; i < len; i++) {    elements[i].addEventListener("click", function () {     $('#delete').val(true);     var name = $(this).attr("id");     $('#phot').val(name);     $('#' + name).click();    });   }  }) </script>}_Preview.cshtml @{ ViewBag.Title = "_Preview";}<h2>Album <span style="color:royalblue;font-style:italic">@ViewBag.AlbumTitle</span></h2><div class="row">@foreach (var photo in Model){ <div class="col-md-3">  <input type="submit" id="@photo.PhotoName" value="删除" class="btn btn-xs btn-warning cancel" style="text-align:center;float:right" />  <img src="https:/article/@photo.ServerPath" class="img-responsive img-thumbnail col-md-3" style="width:100%;height:180px" />  <label style="text-align:center;width:100%">@Html.DisplayNameFor(phot=>phot.PhotoName): @photo.PhotoName</label>  <label style="text-align:center;width:100%;font-weight:100">@photo.PhotoDescription</label> </div>}</div>

运行项目结果如图:

首页创建相册:

《车》相册下的图片示例，可以增加图片，删除图片

《QQ》相册下的图片示例

mongodb数据存储结构图:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。