2017-03-29 47 views
0

花了很多時間,通過在搜索的答案,這個問題類似文章去,這裏是其中的一些:上傳圖像和本地存儲在數據庫中的視圖保存的文件名,顯示MVC 5

1Link, (無法顯示超過2個鏈接,但我有一羣人)

和最相關的 8 Link,但該項目不工作

但是通過這個例子去後,我仍然無法整理出來。目前我的項目沒有圖像,我能夠刪除新的文章頁面並將其刪除。但現在我需要添加圖像。 首先,我需要一個圖像作爲一個類的一部分(我創建一個新的文章,有一些標題,簡短描述,文本正文和圖像),這裏是我想出的模型,這是非工作代碼。因爲我想存儲文件鏈接到數據庫,所以我想我需要創建新的變量ImagePath

namespace PhClub.Models 
{ 
    public class Media 
    { 
     public int Id { get; set; } 

     public string title { get; set; } 
     public string description { get; set; } 
     [Required, StringLength(2048), DataType(DataType.MultilineText)] 
     public string body { get; set; } 
     public string ImagePath { get; set; } 
    } 
} 

接下來我需要添加創建表格申請文件名上傳。下面是創建視圖的代碼段

@using (Html.BeginForm("Create", "Medias", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <hr /> 
     @Html.ValidationSummary(true) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.title, "Title", new { @class = "control-label col-md-2" })   
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.title) 
       @Html.ValidationMessageFor(model => model.title) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.description, "Description",new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.description) 
       @Html.ValidationMessageFor(model => model.description) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.body, "Media",new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.body) 
       @Html.ValidationMessageFor(model => model.body) 
      </div> 
     </div> 
     **<div class="form-group"> 
      File name 
      <div class="uploadfile"> 
       @Html.TextBoxFor(model => model.file, new { type = "file" }) 
       @Html.ValidationMessageFor(model => model.file) 
       <input type="submit" value="Submit" /> 
      </div> 
     </div>** 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Создать" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 

但是在這裏我有兩個不確定性:1。 我已經有一個Create方法,在控制器,它是由EF對我產生:

[HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Create([Bind(Include = "Id,title,description,body")] Media media) 
     { 
      if (ModelState.IsValid) 
      { 
       db.Medias.Add(media); 
       db.SaveChanges(); 
       return RedirectToAction("Index"); 
      } 
      return View(media); 
     } 

但我需要將它用這種方法在某種程度上以某種方式整合(我從其中一個例子這一個)

[HttpPost] 
    public ActionResult FileUpload(Media mRegister) 
    { 
     //Check server side validation using data annotation 
     if (ModelState.IsValid) 
     { 
      //TO:DO 
      var fileName = Path.GetFileName(mRegister.file.FileName); 
      var path = Path.Combine(Server.MapPath("~/Content/Upload"), fileName); 
      mRegister.file.SaveAs(path); 
      ViewBag.Message = "File has been uploaded successfully"; 
      ModelState.Clear(); 
     } 
     return View(); 
    } 

我不能有兩種方法具有相同的名稱 - 創建做differen一方面和另一方面的東西我不能給它不同的名稱,因爲我不需要其他視圖,它需要顯示在創建視圖,如果我知道這裏發生了什麼。 2.次要 - 我需要有兩個按鈕嗎?一個用於上傳圖像,另一個用於創建對象?

最後,我需要在媒體視圖中以某種方式顯示圖像作爲文章的一部分。目前它看起來像

<h2>@Model.title</h2> 
    <br> 

    <div class="media"> 
     <p> 
      <strong>@Html.Raw(Model.title)</strong> 
     </p> 
     <p> 
      @Html.Raw(Model.description) 
     </p> 
     <p> 
      @Html.Raw(Model.body) 
     </p> 
    </div> 
    <div style ="float:right margin: 0px; 0px; 15px; 15px;"> 
      @Html.Raw(Model.file) 
    </div> 

從這裏我迷路了。我需要在某個地方放置該圖像,但不知道如何。在其他示例中,人們爲文件創建一堆其他類。我需要它嗎?什麼最簡單的方法呢?我知道我不是第一個提出這個問題的人,但我真的可以用你的幫助人。

+0

腳手架只是一個基礎模板。一開始創建一個[視圖模型(http://stackoverflow.com/questions/11064316/what-is-viewmodel-in-mvc),這將包括一個'HttpPostsedFIleBase'屬性,以便可以綁定文件輸入到,並在您的視圖中使用它。在POST方法中,將視圖模型映射到數據模型的實例。 –

+0

解決這個問題需要一段時間。謝謝。 –

回答

2

你的代碼對我有點困惑。在第二個示例中,您正在使用file屬性。但是你的班級沒有這個!

一個建議:嘗試編寫C#類和be consistent

時使用PascalCasing理想情況下,你應該爲你的視圖視圖模型

public class MediaVm 
{ 
    public string Title { get; set; } 
    public string Body { get; set; } 
    public HttpPostedFileBase Image { set; get; } 
} 

現在有你的觀點強類型本查看模型

@model MediaVm 
@using (Html.BeginForm("Create", "Medias", FormMethod.Post, 
               new { enctype = "multipart/form-data" })) 
{ 
    @Html.ValidationSummary(false) 
    @Html.TextBoxFor(s=>s.Title) 
    @Html.TextBoxFor(s=>s.Body)  
    @Html.TextBoxFor(model => model.Image, new { type = "file" })  
    <input type="submit" /> 
} 

現在,在您的httppost操作方法中,使用與參數相同的視圖模型,讀取Image屬性值,以唯一名稱保存到磁盤並將唯一文件名保存在表中。我們會將保存文件的代碼移動到另一個可以根據需要從其他方法中使用的方法。

[HttpPost] 
public ActionResult Create(MediaVm model) 
{ 
    if (ModelState.IsValid) 
    { 
     var fileName = SaveAndReturnFileName(model.Img); 
     var m = new Media { title = model.Title, body, model.Body}; 
     m.ImagePath = fileName; 
     db.Medias.Add(m); 
     db.SaveChanges(); 
     return RedirectToAction("Index"); 
    } 
    return View(model); 
} 
public string SaveAndReturnFileName(HttpPostedFileBase file) 
{ 
    if (file == null) 
     return null; 

    var fileName = Path.GetFileName(file.FileName); 
    string randomFileName = Path.GetFileNameWithoutExtension(fileName) + 
         "_" + 
         Guid.NewGuid().ToString().Substring(0, 4) 
          + Path.GetExtension(fileName); 
    var path = Path.Combine(Server.MapPath("~/Content/Upload/"), randomFileName); 
    file.SaveAs(path); 
    return randomFileName; 
} 

您應該能夠訪問圖像,如以下網址

yourSiteName/Content/Upload/theRandomImageNameWeSavedInTable 
+0

是的,我在那裏犯了一個錯誤,當試圖遵循不同的例子時會發生什麼。是的,非常感謝你,應該明確遵循。 Cheerse –

+0

Upvote提及'PascalCasing'。 –

0

好,經過進一步的研究,我設法使它工作。 This is how it looks

我班

公共類媒體 { 公衆詮釋標識{獲得;組; }

public string title { get; set; } 
public string description { get; set; } 
[Required, StringLength(2048), DataType(DataType.MultilineText)] 
public string body { get; set; } 
public string ImagePath { get; set; } 

}

控制器方法

public ActionResult Create([Bind(Include = "Id,title,description,body")] Media media, HttpPostedFileBase file) 
     { 
      if (ModelState.IsValid) 
      { 
       if (file != null) 
       { 
        file.SaveAs(HttpContext.Server.MapPath("~/Images/") 
                  + file.FileName); 
        media.ImagePath = file.FileName; 
       } 
       db.Medias.Add(media); 
       db.Medias.Add(media); 
       db.SaveChanges(); 
       return RedirectToAction("Index"); 
      } 

      return View(media); 
     } 

的碼片上載圖像

<fieldset> 
      <legend>Image</legend> 
      <div class="editor-label"> 
       @Html.LabelFor(model => model.ImagePath) 
      </div> 
      <div class="editor-field"> 
       <input id="ImagePath" title="Upload a product image" 
         type="file" name="file" /> 
      </div> 
</fieldset> 

媒體視圖,以顯示最終結果

<div class="media"> 
    <div style="float: right; margin: 0px 0px 15px 15px; height: 300px; width:450px"> 
     <div id="imageContainer"> 
      @*@Html.Raw(Model.ImagePath)*@ 
      <img src="~/Images/@Html.Raw(Model.ImagePath)" /> 
     </div> 
    </div> 
    <p> 
     <strong>@Html.Raw(Model.title)</strong> 
    </p> 
    <p> 
     @Html.Raw(Model.description) 
    </p> 
    <p> 
     @Html.Raw(Model.body) 
    </p> 
</div> 

和CSS格式來調整圖像的div我用解決它的尺寸

div > img { 

    width: auto; 
    height : auto; 
    max-height: 100%; 
    max-width: 100%; 
} 

Link是這裏Uploading/Displaying Images in MVC 4

謝謝大家。

相關問題