web-dev-qa-db-ja.com

モデルのリストを含むモデル（MVC-3、Razor）

この問題は、2日間私を悩ませてきました。同様の投稿がいくつかありますが、私の問題を完全に解決するものはありません。

MVC-3を使用して、Razor構文：

-EDIT.cshtml-

@using (Html.BeginForm("Edit", "My", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <!-- Some fields... -->
    <div class="editor-field">
        @Html.TextAreaFor(m => m.LongDescription)
        @Html.ValidationMessageFor(m => m.LongDescription)
    </div>

    <!-- Some more fields work... Including picture upload (summary).-->
    <input name="button" type="submit" value="Add Picture" />

    <!-- Picture Item display -->
    @foreach(var thumbnail in Model.ThumbnailImagePathAndNames) 
    {
      <img src="@Url.Content(@thumbnail.ThumbnailPicturePath)" alt="" width="200" />
      @Html.RadioButtonFor(o=>o.SelectedImage, @thumbnail.ImageGUID)  Primary Picture 
      <!-- Checkbox to mark for deletion -->
      @Html.CheckBoxFor(o=>thumbnail.Delete) Delete ???????? <!---- Here is a problem - I don't understand how this should work -->
    }
    <input id="Submit1" name="button" type="submit" value="Complete Edit!" />
}

-MyController.cs-

 [HttpPost]
 public ActionResult Edit(String button, HttpPostedFileBase file, MyMainModel model)
 {
     // if button = submit picture,  work with picture here and break(long story)

     // save model data
         // if valid, save and redirect


     // not valid or error, load up view like normal but with error messages
     model.LoadThumbnails();
     return View(model);

 }

-MyMainModel.cs-

public class MyMainModel
{
    // some properties...
     public Guid? SelectedImage { get; set; }

    [Display(Name = "Detailed Description")]
    public String LongDescription { get; set; }

    // some more properties....


    // and finally my list of models
    public IList<ThumbnailModel> ThumbnailImagePathAndNames { get; set; }

    public void LoadThumbnails()
    {
         // load up initial thumbnail models
         this.ThumbnailImagePathAndNames = new List<ThumbnailModel>(readDataService.GetThumbnailModels(this.SomeID));
    }
}

-ThumbnailModels.cs-

public class ThumbnailModel
{
    public Guid ImageGUID { get; set; }
    public String FullSizePicturePath { get; set; }
    public String ThumbnailPicturePath { get; set; }

    public bool Delete { get; set; }
}

だから問題は何ですか？さて、「完全編集！」ボタンが押されると、MyControllerのEditが呼び出されます。ThumbnailModelのリストを除き、tact ....のすべてのMyMainModleのデータで期待どおりです。これらはnullになります。

これはどのように行われるのですか？編集可能なテンプレートを作成し、EditFor（o => ...を使用するなど、これに対して多くのさまざまなアプローチを試みました（これは、EditForがコレクション全体に適用されるのか、それとも単にコレクション内の単一のアイテム-私は両方の方法を試しました。削除のためのチェックボックスの複雑さを追加するまですべてが機能していたため、ThumbnailModelsのリストを取得してその内部Deleteプロパティ値をチェックする必要がありました。

これを読んで理解しようとしてくれてありがとう。

[免責事項-無害なプログラムを保護するために、一部の変数とメソッド名が変更されました。多くのコードが取り除かれ、コメントコードに置き換えられました。]

modelasp.net-mvc-3razor
29
Rob

いくつかの概念を説明するために私が置いた例は次のとおりです。

モデル：

public class MyMainModel
{
    public Guid? SelectedImage { get; set; }
    public string LongDescription { get; set; }

    public IEnumerable<ThumbnailModel> ThumbnailImagePathAndNames { get; set; }

    public HttpPostedFileBase File { get; set; }
}

public class ThumbnailModel
{
    public Guid ImageGUID { get; set; }
    public bool Delete { get; set; }
}

コントローラ：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyMainModel
        {
            // TODO: fetch from the repository instead of hardcoding
            ThumbnailImagePathAndNames = new[] 
            {
                new ThumbnailModel { ImageGUID = Guid.NewGuid() },
                new ThumbnailModel { ImageGUID = Guid.NewGuid() },
                new ThumbnailModel { ImageGUID = Guid.NewGuid() },
            }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(MyMainModel model) 
    {
        ... the model will be properly bound here
    }
}

見る：

@model AppName.Models.MyMainModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("index", "home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="editor-field">
        @Html.TextAreaFor(m => m.LongDescription)
        @Html.ValidationMessageFor(m => m.LongDescription)
    </div>
    <input type="file" name="file" />
    <!-- Use different names for the upload and complete submit
         buttons so that you can distinguish which one was clicked
         in the POST action 
    -->
    <input name="upload" type="submit" value="Add Picture" />

    @Html.EditorFor(x => x.ThumbnailImagePathAndNames)    
    <input name="complete" type="submit" value="Complete Edit!" />
}

エディターテンプレート：（~/Views/Home/EditorTemplates/ThumbnailModel.cshtml）：

@model AppName.Models.ThumbnailModel
<!-- Pass the image id as hidden field -->
@Html.HiddenFor(x => x.ImageGUID)
@Html.CheckBoxFor(x => x.Delete)
45
Darin Dimitrov