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> <h4>创建新相册： </h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div> @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.TitlePhoto, htmlAttributes: new { @class = "control-label col-md-2" }) <div> <input type="file" data-val="true" data-val-required="要求标题图片."/> @Html.ValidationMessage("file",new { @class = "text-danger" }) </div> </div> <div> <div> <input type="submit" value="Create" /> </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> <br /> <h4>添加新的照片：</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div> @Html.LabelFor(model => model.PhotoName, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.PhotoName, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.PhotoName, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.PhotoDescription, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.PhotoDescription, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.PhotoDescription, "", new { @class = "text-danger" }) </div> </div> <div> <label>选择照片：</label> <div> <input type="file" data-val="true" data-val-required="请选择图像" /> @Html.ValidationMessage("file", new { @class = "text-danger" }) </div> </div> <div> <div> <input type="submit" value="Create" /> </div> </div> </div> <input type="hidden" value="@ViewBag.AlbumTitle" /> <input type="hidden" value="false" /> <input type="hidden" 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>@ViewBag.AlbumTitle</span></h2> <div> @foreach (var photo in Model) { <div> <input type="submit" value="删除" /> <img src="https://www.jb51.net/@photo.ServerPath" /> <label>@Html.DisplayNameFor(phot=>phot.PhotoName): @photo.PhotoName</label> <label>@photo.PhotoDescription</label> </div> } </div>
运行项目结果如图:
首页创建相册:
《车》相册下的图片示例，可以增加图片，删除图片
《QQ》相册下的图片示例
mongodb数据存储结构图:
