2017-03-29 13 views
0

は、それらのいくつかであります(2つの以上のリンクを表示することができませんが、私はそれらの束を持っている)アップロード画像とDB内のファイル名を保存し、ローカルに保存し、ビューに表示MVC 5

そして、最も関連性の高い 8 Linkが、そのプロジェクトは

が動作していない。しかし、この例を経て、私はまだできない、それを整理します。現時点では、私のプロジェクトはイメージなしで動作し、新しい記事をCRUDしてページングして削除することができます。しかし、今私は画像を追加する必要があります。 まず、クラス(私はいくつかのタイトル、短い説明、テキストの本文と画像で新しい記事を作成しています)の一部としてイメージが必要です。ここで私が思い付いたモデルです。これは動作しないコードです。私はDBへのファイルへのリンクを保存するように、私は新しい変数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; } 
    } 
} 

次を作成する必要があると思い、私はそれをアップロードするファイル名を取得するためのフォームを作成、追加する必要があります。

[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); 
     } 

しかし、私:、それは私のためにEFによって生成された 1.私はすでにコントローラー内でCreateメソッドを持っている:ここでは私は2つの不確実性を持っているビューのコードスニペットしかし、ここで

@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> 
} 

を作成しています私は、同じ名前を持つ2つのメソッドを持つことはできません

[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(); 
    } 

(私は例の一つからこの1を取った)何とかこの方法で何とかそれを統合する必要がある - differenをやっCREATE私は他のビューを必要としないので別の名前を付けることはできません。ここで何が起こっているのかを理解するには、Createビューに表示する必要があります。 2.セカンダリ - これには2つのボタンが必要ですか? 1つはアップロードイメージ用、もう1つはオブジェクト作成用です。

最後に、メディアビューで何とか画像を記事の一部として表示する必要があります。現時点ではそれはそのように見える

<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> 

ここから私は失われています。私はそのイメージを特定の場所に置く必要がありますが、how.Inを他の例ではファイルのための他のクラスの束を作成している人は分かりません。私はそれが必要ですか?それを行う最も簡単な方法は何ですか?私はこの質問を思い付いたのは初めてではないことを知っていますが、私は本当にあなたの助け人を使うことができます。

+0

足場は基本的なテンプレートに過ぎません。最初に[view model](http://stackoverflow.com/questions/11064316/what-is-viewmodel-in-mvc)を作成します。これには 'HttpPostsedFILEBase'プロパティが含まれているので、ファイル入力をバインドしたり、あなたの視点でそれを使用してください。 POSTメソッドでは、ビューモデルをデータモデルのインスタンスにマップします。 –

+0

このトピックを理解するにはしばらく時間がかかります。ありがとう。 –

答えて

2

あなたのコードは少し混乱しています。 2番目の例では、fileプロパティを使用しています。しかし、あなたのクラスはそれを持っていません!

1つの提案: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; 
} 

あなたはさらなる研究私はそれが動作するために管理した後、以下のURLを[OK]を

yourSiteName/Content/Upload/theRandomImageNameWeSavedInTable 
+0

はい、私はそこで間違いを犯しました。異なる例に従おうとすると何が起こるのでしょうか。はい、大変ありがとうございます。 Cheerse –

+0

「パスカルケーシング」に言及してください。 –

0

のような画像にアクセスすることができるはずです。 This is how it looks

私のクラス

パブリッククラスメディア { 公共のint Idを{取得します。セット; }

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> 

みんなありがとうここでは210

とCSSの書式は、私はそれを解決するために使用していた寸法

div > img { 

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

リンクをDIVする画像のサイズを変更することです。

関連する問題