如何在單個視圖上創建和顯示模型數據？

Question

目標是能夠從同一視圖中的模型創建和顯示無序列表項。

這就是我到目前為止
型號 ：Notes.cs

namespace NoteTaking.Models
{
    public class Notes
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public float Time { get; set; }
    }

    public class MyDbContext : DbContext
    {
        public MyDbContext() : base("Notes")
        {

        }

        public DbSet<Notes> Notes { get; set; }
    }
}

HomeController.cs

namespace NoteTaking.Controllers
{
    public class HomeController : Controller
    {
        MyDbContext db = new MyDbContext();
        // GET: Home
        public ActionResult Index()
        {
            return View(db.Notes.ToList());
        }

        // POST: Home
        [HttpPost]
        public ActionResult Index([Bind(Include = "Id,Text,Time")]Notes notes)
        {
            if (ModelState.IsValid)
            {
                db.Notes.Add(notes);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View();
        }
    }
}

Index.cshtml

@model NoteTaking.Models.Notes

@{
    ViewBag.Title = "Index";
}

<div class="jumbotron"></div>

@using (Html.BeginForm())
{
    @Html.EditorFor(model => model.Text)
    <input type="submit" value="Create" class="btn btn-default" />
}

<div>
    <h2>Notes</h2>
    @foreach (var d in Model.Text)
    {
        <ul>
            <li>
                @d
            </li>
        </ul>
    }
</div>

我知道我會收到一個編譯錯誤，我已經嘗試通過做許多事情來解決此問題，例如使用IEnumerable，但這不允許我使用@ Html.EditorFor。

我很困惑

Answer 1

這是因為您要在自己的IEnumerable類型中進行迭代

   @for (var d in Model.Text)
    {
        <ul>
            <li>
                @d
            </li>
        </ul>
    }

而您的模型僅說明

@model NoteTaking.Models.Notes

嘗試使其成為Enumerable類型：

@model IEnumerable<NoteTaking.Models.Notes>

/*
    Your codes here
*/

編輯：

現在我明白了。 您可能希望在同一頁面上顯示新添加/編輯的實體。 現在，您可以執行以下操作：

@model NoteTaking.Models.Notes

    @{
        ViewBag.Title = "Index";
    }

    <div class="jumbotron"></div>

    @using (Html.BeginForm())
    {
        @Html.EditorFor(model => model.Text)
        <input type="submit" value="Create" class="btn btn-default" />
    }

    <div>
        <h2>Notes</h2>
        @foreach (var d in Model.ToList())
        {
            <ul>
                <li>
                    @d.Text
                </li>
            </ul>
        }
    </div>

Answer 2

您的Index方法返回一個注釋集合

return View(db.Notes.ToList());

所以視圖應該是

@model IEnumerable<NoteTaking.Models.Notes>
@using (Html.BeginForm())
{
  @Html.EditorFor(m => m)
  <input type="submit" value="Create" class="btn btn-default" />
}

將顯示所有Notes 。 默認情況下，這將為筆記的所有3個屬性創建輸入。 您可以創建自定義EditorTemplate名為Notes.cshtml在Views/Shared/EditorTemplates自定義您的顯示器

@model NoteTaking.Models.Notes
@Html.HiddenFor(m => m.ID)
@Html.TextBoxFor(m => m.Text)
@Html.HiddenFor(m => m.Time)

並且您的POST方法應該是

public ActionResult Index(IEnumerable<Notes> notes)

自您編輯注釋集以來。

注意：因為已經使用EditorFor顯示了所有注釋，所以也沒有什么意義像EditorFor那樣在無序列表中顯示EditorFor

編輯

根據修改后的需求，您需要一個視圖模型，其中包含要顯示和編輯的屬性

public class NotesVM
{
  public List<Notes> NoteList { get; set; }
  public Notes NewNote { get; set; }
}

並在控制器中

public ActionResult Index()
{
  NotesVM model = new NotesVM();
  model.NewNote = new Notes();
  model.NoteList = db.Notes.ToList();
  return View(model);
}

並認為

@model NotesVM
....
@using (Html.BeginForm())
{
  @Html.EditorFor(m => m.NewNote.Text)
  <input type="submit" value="Create" class="btn btn-default" />
}
....
<ul>
  @foreach (var d in Model.NotesList)
  {
    <li>@d.Text</li>
  }
</ul>

和在后方法

[HttpPost]
public ActionResult Index([Bind(Prefix="NewNote")]Notes model)
{
  // Note you only have a control for `Test` so `ID` and `Time` will both be default values
  if (ModelState.IsValid)
  {
    db.Notes.Add(model);
    db.SaveChanges();
    return RedirectToAction("Index");
  }
  return View(model);
}

注意我還建議為Notes類本身創建一個視圖模型，以便您可以添加驗證屬性

Answer 3

使用部分視圖，您可以使模型成為模型的集合，這是一個非常粗糙的示例，但是我模擬了可以使用EF6和快速的Code First數據庫運行的功能...

這不是世界上最快的事情，而是演示了如何從EntityFramework返回綁定到View的Model的結果集合。 以及如何添加新項目。 對此可以進行許多調整。

一種這樣的調整：返回帶有AsNoTracking的模型，以使它們不會被跟蹤（無論如何都無法跟蹤回發）。

1. 觀看次數

   /Views/Home/Index.cshtml /Views/Shared/NewNote.cshtml /Views/Shared/Notes.cshtml

2. 控制者

    public class HomeController : Controller { MyDbContext data = new MyDbContext(); public ActionResult Index() { var notes = data.Notes; return View(notes); } public ActionResult AddNewNote(Models.Note model) { data.Notes.Add(model); data.SaveChanges(); var notes = data.Notes; return Redirect("~/"); } } 

3. 模型

    public class Note { public int Id { get; set; } public string Text { get; set; } public long Time { get; set; } } 

4. 型號EF Config類別

    public class NoteConfig : EntityTypeConfiguration<Note> { public NoteConfig() { this.HasKey(p => p.Id).Property(p1 => p1.Id).HasDatabaseGeneratedOption(DatabaseGeneratedOption.Identity); //this.HasRequired(p => p.Text); } } 

5. 數據庫上下文

    public class MyDbContext : DbContext { #region DBSet public DbSet<Models.Note> Notes { get; set; } #endregion #region Constructor public MyDbContext() : base("Data Source=" + HttpContext.Current.Server.MapPath("~/Bin/NotesExample.sdf")) { this.Configuration.AutoDetectChangesEnabled = true; this.Configuration.LazyLoadingEnabled = true; this.Configuration.ValidateOnSaveEnabled = true; this.Database.CreateIfNotExists(); } #endregion #region Methods protected override void OnModelCreating(DbModelBuilder modelBuilder) { NoteConfig noteConfig = new NoteConfig(); modelBuilder.Configurations.Add(noteConfig); base.OnModelCreating(modelBuilder); } #endregion } 

6. Index.cshtml

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> </head> <body> <div> @{ Html.RenderPartial("Notes"); } </div> </body> </html> 

   7. Notes.cshtml

       @model System.Data.Entity.DbSet<NotesExample.Models.Note> @{ MyDbContext context = new MyDbContext(); int noteCount = Model.Count(); var notes = Model.ToList(); } @for (int i = 0; i < noteCount || (notes.Count == 0 && i == 0); ++i) { if (notes.Count == 0 || i == notes.Count - 1) { //Add New Note Html.RenderPartial("NewNote", new NotesExample.Models.Note()); } else { //Render Exising Notes var note = notes[i]; <div> <h3>Note ID: @note.Id</h3> <h3>Text: @note.Text</h3> <h3>Time (ticks): @note.Time</h3> </div> } } 

   8. NewNote.cshtml

       @model NotesExample.Models.Note @using (Html.BeginForm("AddNewNote", "Home")) { <div> <label>New Note Text:</label>@Html.TextBoxFor(p => p.Text) </div> <input type="submit" name="AddNewNote" value="Add New Note" /> }