ASP.NET MVC4使用MongoDB制作相册管理
程序员文章站
2023-12-11 23:17:40
asp.net mvc4使用mongodb制作相册管理实例分享
tips:1.image转成base64保存到mongodb字段
&...
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="@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数据存储结构图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。