Question

我有一个看起来像这样的模型：

public class Product
{
    [Key]
    public int Id { get; set; }
    [Required]
    public string CatalogId { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public string Description { get; set; }
    [Required]
    [EnumDataType(typeof(Category))]
    public Category Category { get; set; }

    public IEnumerable<Features> Features { get; set; }
}

我有一个视图，允许我使用此模型创建新产品。

对于功能，我试图创建一个局部视图，该视图将允许我向列表中添加新的Features，将其附加到产品并提交给控制器中的AddNewProduct()方法。

这是我的AddNewProduct视图：

@model Product

<div class="card card-admin-main">
<div class="card card-header-admin">
    <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: grey !important;">
    <a class="navbar-brand" href="/admin">Admin</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="/admin">Overview <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/admin/products">Products</a>
        </li>

    </div>
    </nav>
</div>


<form asp-action="AddNewProduct">
    <br>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <a asp-for="CatalogId" >Catalog ID</a>
                    <input asp-for="CatalogId" class="form-control">
                    <a asp-for="Name" >Name</a>
                    <input asp-for="Name" class="form-control">

                    <a asp-for="Category" >Category</a>
                    <select asp-for="Category" asp-items="Html.GetEnumSelectList<Category>()" class="form-control">
                        <option selected="selected" value="">Please select</option>
                    </select>    

                </div>
                <div class="col-md-6">
                    <a asp-for="Description" >Description</a>
                    <textarea asp-for="Description" class="form-control" rows="7"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    @if(Model != null)
                    {
                        foreach(var feature in Model.Features)
                        {
                            @feature.FeatureTitle
                        }
                    }
                    @await Html.PartialAsync("_AddNewFeaturePartial", new Features())

                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <br>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>

            </div>
        </div>
</form>

在这里我的_AddNewFeaturePartial

@model Features


<form asp-action="AddFeature" asp-controller="Admin" method="POST">
    <a asp-for="FeatureTitle">Feature</a>
    <input asp-for="FeatureTitle" class="form-control">
    <a asp-for="FeatureDescription">Description</a>
    <input asp-for="FeatureDescription" class="form-control">
    <button type="submit" class="form-control">Add Feature</button>
</form>

这是我的控制器方法：

    public IActionResult AddNewProduct(Product newProduct)
    {
        if(newProduct.CatalogId != null)
        {

        }
        return View();
    }
    [HttpPost]
    public IActionResult AddFeature(int id, string FeatureTitle, string FeatureDescription)
    {

        return RedirectToAction("AddNewProduct");
    }

如果我将新功能添加到表单并单击Add new Feature，它将永远不会命中public IActionResult AddFeature(int id, string FeatureTitle, string FeatureDescription

有什么想法吗？

谢谢

Answer 1

在需要复杂的渲染逻辑或代码执行来渲染标记的地方，请不要使用局部视图。请参阅here。

我的理解是，您想在创建新产品时添加多个功能，然后将所有数据传递给控制器。这可以在js的帮助下完成。您可以参考下面的简单演示。

1。产品模型，将IEnumerable<Features>更改为IList<Features>

public class Product
{
    [Key]
    public int Id { get; set; }
    [Required]
    public string CatalogId { get; set; }
    [Required]
    public string Name { get; set; }
    [Required]
    public string Description { get; set; }

    public IList<Features> Features { get; set; }
}

2。AddNewProduct视图

 <form asp-action="AddNewProduct" method="post">
    <br>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <a asp-for="CatalogId">Catalog ID</a>
                <input asp-for="CatalogId" class="form-control">
                <a asp-for="Name">Name</a>
                <input asp-for="Name" class="form-control">

            </div>
            <div class="col-md-6">
                <a asp-for="Description">Description</a>
                <textarea asp-for="Description" class="form-control" rows="7"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <label asp-for="Features"></label>

                <div id="FeatureList">
                    <a href="#" id="btnAdd">Add Feature</a>
                    <br />
                    <input type="text" asp-for="Features" class="items" name="Features[0].FeatureTitle" />
                    <input type="text" asp-for="Features" class="items" name="Features[0].FeatureDescription" />
                </div>                 
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <br>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</form>

@section Scripts
{
    <script type="text/javascript">
        $("#btnAdd").click(function (e) {
            e.preventDefault();
            var i = ($(".items").length) / 2;
            var n = '<br /><input type="text" class="items" name="Features[' + i + '].FeatureTitle" />' +
                '<input type="text" class="items" name="Features[' + i + '].FeatureDescription" />'

            $("#FeatureList").append(n);
        });
    </script>
}

3。控制器

[HttpPost]
public IActionResult AddNewProduct(Product newProduct)

Aspnet核心MVC子类数据的部分视图

1 个答案: