asp.Net MVC中組合視圖和IEnumerable模型的問題

Question

我試圖創建索引頁（使用IEnumerable具有產品列表）和創建頁（具有添加/保存內容）的組合視圖 ，而lambda表達式出錯。

這是我的代碼：

@model IEnumerable<OIS.Models.Category>

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.category_name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.date_created)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.date_updated)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.category_name)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.date_created)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.date_updated)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }
</tbody>
</table>

//For for Creating new Item
@using (Html.BeginForm()){
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Category</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        //Im Gettig Error with this line  (model => model.category_name)
        @Html.LabelFor(model => model.category_name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            //Im Gettig Error with this line (model => model.category_name)
            @Html.EditorFor(model => model.category_name, new { htmlAttributes = new { @class = "form-control" } })
            //Im Gettig Error with this line (model => model.category_name)
            @Html.ValidationMessageFor(model => model.category_name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}    

我該怎么辦？ 編輯：這是我的控制器

namespace OIS.Controllers{
public class CategoryController : Controller
{
    private DbOnlineIS db = new DbOnlineIS();

    // GET: Category
    public ActionResult Index()
    {
        return View(db.Categories.ToList());
    }

    // Post: Category
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index([Bind(Include = "ID,category_name,date_created,date_updated")] Category category)
    {
        if (ModelState.IsValid)
        {
            category.date_created = DateTime.Now;
            category.date_updated = DateTime.Now;
            db.Categories.Add(category);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(category);
    }
  // GET: Category/Create

    public ActionResult Create()
    {
        return View();
    }

    // POST: Category/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "ID,category_name,date_created,date_updated")] Category category)
    {
        if (ModelState.IsValid)
        {
            category.date_created = DateTime.Now;
            category.date_updated = DateTime.Now;
            db.Categories.Add(category);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(category);
    }

Answer 1

要進行組合視圖，您必須執行以下操作。

創建一個具有2個屬性的ViewModel

public class CategoryViewModel {
    public IEnumerable<OIS.Models.Category> Categories { get; set; }
    public Category Category { get; set; }
}

之后，您可以在2個局部視圖中從視圖中移動創建和列出。 假設_CategoryCreatePartial.cshtml和_CategoryListPartial.cshtml 。

比合並視圖變得像這樣， Index.cshtml

@model OIS.Models.CategoryViewModel

@Html.Partial("_CategoryListPartial", Model.Categories)

@Html.Partial("_CategoryCreatePartial", Model.Category)

部分視圖：

_CategoryListPartial.cshtml

@model IEnumerable<OIS.Models.Category>

<table class="table">
<thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.category_name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.date_created)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.date_updated)
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.category_name)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.date_created)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.date_updated)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }
</tbody>
</table>

_CategoryCreatePartial.cshtml

@model OIS.Models.Category

@using (Html.BeginForm("Create", "Category")){
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Category</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            //Im Gettig Error with this line  (model => model.category_name)
            @Html.LabelFor(model => model.category_name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                //Im Gettig Error with this line (model => model.category_name)
                @Html.EditorFor(model => model.category_name, new { htmlAttributes = new { @class = "form-control" } })
                //Im Gettig Error with this line (model => model.category_name)
                @Html.ValidationMessageFor(model => model.category_name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}    

控制器和索引動作

public class CategoryController : Controller
{
    private DbOnlineIS db = new DbOnlineIS();

    public ActionResult Index() {
        var categoryViewModel = new CategoryViewModel();
        categoryViewModel.Categories = db.Categories.ToList();
        categoryViewModel.Category = new Category();
        return View(categoryViewModel); // list + create category
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Category category) // call this action to create category.
    {
        if (ModelState.IsValid)
        {
            category.date_created = DateTime.Now;
            category.date_updated = DateTime.Now;
            db.Categories.Add(category);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(category);
    }
}

Answer 2

您將需要創建另一個ViewModel來滿足顯示列表和創建屏幕的要求。

public class CategoryViewModel
{
    public List<OIS.Models.Category> Categories {get;set;}
    public OIS.Models.Category Category {get;set;}
}

在剃刀視圖中，將模型設置為此新的ViewModel

@model CategoryViewModel

在您的枚舉中，您現在可以從新的ViewModel中訪問列表

@foreach (var item in Model.Categories)

對於您的創建部分，請從ViewModel中訪問類別

@Html.LabelFor(model => model.Category.category_name, htmlAttributes: new { @class = "control-label col-md-2" })    

同樣，您需要重構“視圖”頁面。

在您的控制器中，您當前必須傳遞一個列表。 您將需要更改它以傳遞新的CategoryViewModel

List<Category> categories = "your db call";
CategoryViewModel viewModel = new CategoryViewModel();
viewModel.Categories = categories;
viewModel.Category = new Category();
return View(viewModel);

Answer 3

您的問題在<thead> 。 您嘗試從類別模型訪問屬性：

@Html.DisplayNameFor(model => model.category_name)

但是您的模型是IEnumerable，沒有屬性category_name 。