如何在 MVC 的单个视图中制作插入表单和显示来自数据库的数据的表？

Posted 2023-02-26

【中文标题】如何在 MVC 的单个视图中制作插入表单和显示来自数据库的数据的表？

【英文标题】：How to make an insert form and a table displaying data from database in a single view in MVC?

【发布时间】：2020-06-27 06:40:12

【问题描述】：

我正在制作 CRUD，但我希望创建和读取部分位于单个 MVC 视图中。创建部分已完成，我一直在尝试在视图加载时使用数据库表中的数据填充 html 表，但它不会让我在一个视图中同时执行这两项操作。

这是视图标题：

@model Console.Models.Product
@
    ViewBag.Title = "Create";

这是插入表格：

@using (Html.BeginForm())

    <div class="box-body">
        <div class="form-horizontal">
        @Html.AntiForgeryToken()
        @Html.Hidden("productID", 0)
        @Html.ValidationSummary(true, "", new  @class = "text-danger" )

        <div class="form-group">
            <div class="col-md-6">
                @Html.EditorFor(model => model.productName, new  htmlAttributes = new  @class = "form-control", @name = "txtProductName", @id = "txtProductName"  )
            </div>
            @Html.ValidationMessageFor(model => model.productName, "", new  @class = "text-danger", Type = "productName" )
        </div>

        <div class="form-group">
            <div class="col-md-6">
                @Html.EditorFor(model => model.productQuantity, new  htmlAttributes = new  @class = "form-control", @name = "txtProductQuantity", @id = "txtProductQuantity"  )
            </div>
            @Html.ValidationMessageFor(model => model.productQuantity, "", new  @class = "text-danger" )
        </div>

        <div class="form-group">
            <div class="col-md-6">
                @Html.EditorFor(model => model.productColor, new  htmlAttributes = new  @class = "form-control", @name = "txtProductColor", @id = "txtProductColor"  )
            </div>
            @Html.ValidationMessageFor(model => model.productColor, "", new  @class = "text-danger" )
        </div>
    </div>
</div>

这个表格应该显示上面表格中插入数据库的产品：

<table id="Data_table" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>
            @Html.DisplayNameFor(model => model.productName)
            </th>
            <th>
            @Html.DisplayNameFor(model => model.productQuantity)
            </th>
            <th>
            @Html.DisplayNameFor(model => model.productColor)
            </th>
            <th>
            </th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.productName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.productQuantity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.productColor)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new  id = item.productID , new  @class = "btn btn-success btn-sm" ) 
                @Html.ActionLink("Delete", "Delete", new  id = item.productID , new  @class = "btn btn-danger btn-sm" )
            </td>
        </tr>
        
    </tbody>
    <tfoot>
        <tr>
            <th><div class="panel-footer">Total = @Model.Count()</div></th>
        </tr>
    </tfoot>
</table>

问题是我在 foreach 中收到一个错误，告诉我将 IEnumerable 与模型一起使用，但每当我这样做时，插入表单都会出错。有没有办法解决这个问题？

编辑： 这是视图模型：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Console.Models

    public class ProductViewModel
    
        public int productID get; set; 

        public string productName get; set; 

        public int productQuantity get; set; 

        public string productColor get; set; 

        public IEnumerable<Product> Products  get; set; 
    

【参考方案1】：

在您看来，您确实传递了一个模型，然后您尝试对其进行迭代，这当然是不可能的。

您应该使用视图模型。创建一个视图模型，其中包含表单所需的字段和要在 foreach 上迭代的产品列表。

@model ProductViewModel
@
    ViewBag.Title = "Create";

创建一个视图模型，如下所示：

public class ProductViewModel 
     public string ProductName  get; set; 
     // Other fields for the form

     public IEnumerable<Product> Products  get; set;  // Your list of products for the table

然后在你看来：

@Html.EditorFor(model => model.ProductName,
// Continue with the form

@foreach (var item in Model.Products)
 //...continue with your table

【讨论】：

我现在在表的 foreach 处收到一个错误，上面写着“产品”不包含“产品”的定义，也没有接受“产品”参数的可访问扩展方法键入“产品”，即使它是在视图模型中定义的？

您可以将您的视图模型添加到您的原始答案中以便我检查吗？

好的，我刚刚编辑了原始问题以包含它，感谢您抽出宝贵时间。

我也确实将视图标题修改为@model Console.Models.ProductViewModel 但如果我正确理解错误消息，visualstudio 仍然由于某种原因没有检测到它？