如何显示模型和列表查看 ASP.NET MVC

Question

我按照本教程创建了第一个 ASP.NET MVC 项目： Official documentation

（在这个例子中是关于电影，但我想创建商店） 因此，在所有步骤之后一切正常（CRUD 操作、搜索等...）

但现在我想创建一个表格来显示添加到购物车的产品...

这是我的模型：

namespace TypeqastShopProject.Models
{
    public class ProductModel
    {
        public int Id { get; set; }
        public string Name { get; set; }

        [Column(TypeName = "decimal(18, 2)")]
        public decimal Price { get; set; }
    }    
}

这是我的观点：

@model IEnumerable<TypeqastShopProject.Models.ProductModel>

<h1>All products</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<form asp-controller="Products" asp-action="Index" method="get">
    <p>
        Title: <input type="text" name="SearchString" />
        <input type="submit" value="Search" />
    </p>
</form>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a> |
                    <asp:Button onclick="Button1_Click" ID="Button1" runat="server" Text="Save"
                                OnClientClick="return countclickofButton();" />
                    @*<a asp-action="AddToCart" asp-route-id="@item.Id">Add to cart</a>*@
                </td>
            </tr>
        }
    </tbody>
</table>

<h4>Cart</h4>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th>
                Amount
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.ToList())
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td></td>
                <td>
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

这是我的控制器：

public class ProductsController : Controller
{
    private readonly MvcTypeqastShopContext _context;

    public ProductsController(MvcTypeqastShopContext context)
    {
        _context = context;
    }

    public async Task<IActionResult> Index(string searchString)
    {
        var products = from p in _context.Product
                       select p;

        if (!String.IsNullOrEmpty(searchString))
        {
            products = products.Where(s => s.Name.Contains(searchString));
        }

        return View(await products.ToListAsync());
    }

如您所见，我想在页面上显示两个表格。 第一个是从数据库中填充所有可用产品的表格，第二个表格应该由用户通过单击“添加到购物车”按钮来填充。

我的问题是什么是最佳实践以及如何将列表绑定到 .cshtml 视图？

Answer 1

点击加入购物车后可以使用Ajax重新加载列表。