在for回圈內附加帶有模型的表單欄位（ASP.NETRazor視圖）-有解無憂

這是我在 stackoverflow 上的第一個問題。呵呵。

我有一個編輯頁面，我需要顯示所有現有的欄位，我有一個添加按鈕，我可以添加一個新欄位。

這是用于顯示資料的編輯源代碼（Edit.cshtml）

                                <div class="nutrition-field">
                            @for (int i = 0; i < Model.NutritionFacts.Count(); i   )
                            {
                                <div >
                                    <div >
                                        <label>Nutrients name</label>
                                        <input type="text"  asp-for="@Model.NutritionFacts.ToList()[i].NutritionName">
                                        <span asp-validation-for="@Model.NutritionFacts.ToList()[i].NutritionName" ></span>
                                    </div>                                  
                                    <div >
                                        <label>Per 100g</label>
                                        <input type="text"  asp-for="@Model.NutritionFacts.ToList()[i].Gram">
                                        <span asp-validation-for="@Model.NutritionFacts.ToList()[i].Gram" ></span>
                                    </div>                                  
                                    <div >
                                        <label>% Daily value</label>
                                        <div >
                                            <input type="text"  asp-for="@Model.NutritionFacts.ToList()[i].PercentageDailyValue">
                                            <span asp-validation-for="@Model.NutritionFacts.ToList()[i].PercentageDailyValue" ></span>
                                            <a href="javascript:void(0)" >
                                                Delete
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            }   
                            </div>

這是添加按鈕的javascript：

            $(addNutrition).click(function() {
                $.ajax({
                url: "/Product/AddNutrition",
                cache: false,
                success: function (html) {
                    $('.nutrition-field').append(html)
                }
            });
        });

當您單擊按鈕時，它將轉到控制器，這是添加營養控制器的代碼：

       public IActionResult AddNutrition()
    {
        return PartialView("~/Views/Product/PartialViews/_AddNutrition.cshtml", new ProductNutritionFactsDto());
    }

這是部分視圖：

@model ProjectName.Dto.ProductNutritionFactsDto

<div class="nutrition-div form-group row">
    <div >
        <label>Nutrients name</label>
        <input type="text"  asp-for="NutritionName">
        <span asp-validation-for="NutritionName" ></span>
    </div>                                  
    <div >
        <label>Per 100g</label>
        <input type="text"  asp-for="Gram">
        <span asp-validation-for="Gram" ></span>
    </div>                                  
    <div >
        <label>% Daily value</label>
        <div >
            <input type="text"  asp-for="PercentageDailyValue">
            <span asp-validation-for="PercentageDailyValue" ></span>
            <a href="javascript:void(0)" >
                Delete
            </a>
        </div>
    </div>
</div>

它正在作業，但我希望它在 for 回圈內，因此索引的計數將繼續并且它將具有唯一的 ID。發生的事情是它正在創建一個新模型，并且在添加許多欄位時驗證不起作用。

我真的很感激大家的幫助。謝謝！

uj5u.com熱心網友回復：

我看到你@Model.NutritionFacts.ToList()[i].PropertyName在主視圖和ProductNutritionFactsDto區域視圖中使用。假設您的主視圖接受一個包含嵌套List<ChildModel>呼叫的模型ProductNutritionFactsDto。

對于您的場景，您需要將計數傳遞給 ajax 并使用 ViewBag 存盤計數并在區域視圖中使用它：

主視圖：

model TestViewModel
<button id="addNutrition" type="button">Add</button>
<form method="post">
    <div >
        @for (int i = 0; i < Model.NutritionFacts.Count(); i  )
        {
            <div >
                <div >
                    <label>Nutrients name</label>
                    <input type="text"  asp-for="@Model.NutritionFacts.ToList()[i].NutritionName">
                    <span asp-validation-for="@Model.NutritionFacts.ToList()[i].NutritionName" ></span>
                </div>
                <div >
                    <label>Per 100g</label>
                    <input type="text"  asp-for="@Model.NutritionFacts.ToList()[i].Gram">
                    <span asp-validation-for="@Model.NutritionFacts.ToList()[i].Gram" ></span>
                </div>
                <div >
                    <label>% Daily value</label>
                    <div >
                        <input type="text"  asp-for="@Model.NutritionFacts.ToList()[i].PercentageDailyValue">
                        <span asp-validation-for="@Model.NutritionFacts.ToList()[i].PercentageDailyValue" ></span>
                        <a href="javascript:void(0)" >
                            Delete
                        </a>
                    </div>
                </div>
            </div>
        }
    </div>
    <input type="submit" value="post" />
</form>

@section Scripts
{
<script>
    $("#addNutrition").click(function () {
        $.ajax({
            url: "/Product/AddNutrition?index="   $(".nutrients-name").length,
            cache: false,
            success: function (html) {
                $('.nutrition-field').append(html)
            }
        });
    });
</script>
}

控制器：

public IActionResult AddNutrition(int index)
{
    ViewBag.Index = index;
    return PartialView("~/Views/Product/PartialViews/_AddNutrition.cshtml", new ProductNutritionFactsDto());
}

部分視圖：

ViewBag.Index使用此索引獲取并添加名稱屬性。

@model ProductNutritionFactsDto
@{ 
    var i = (int)ViewBag.Index;
}
<div class="nutrition-div form-group row">
    <div >
        <label>Nutrients name</label>
        <input type="text"  asp-for="NutritionName" name="[@i].NutritionName">
        <span asp-validation-for="NutritionName" ></span>
    </div>
    <div >
        <label>Per 100g</label>
        <input type="text"  asp-for="Gram"  name="[@i].Gram">
        <span asp-validation-for="Gram" ></span>
    </div>
    <div >
        <label>% Daily value</label>
        <div >
            <input type="text"  asp-for="PercentageDailyValue" name="[@i].PercentageDailyValue">
            <span asp-validation-for="PercentageDailyValue" ></span>
            <a href="javascript:void(0)" >
                Delete
            </a>
        </div>
    </div>
</div>

測驗模型：

public class TestViewModel
{
    public List<ProductNutritionFactsDto> NutritionFacts { get; set; }
}
public class ProductNutritionFactsDto
{
    [Required]
    public string NutritionName { get; set; }
    public string Gram { get; set; }
    public string PercentageDailyValue { get; set; }
}

此外，進一步編碼的注意事項（關于將資料發布到后端）：

asp-for="@Model.NutritionFacts.ToList()[i].PropertyName"將生成 name 屬性：name="[i].PropertyName"，因此如果您想發布ProductNutritionFactsDto頁面中的所有模型，請確保后端引數應為List<ProductNutritionFactsDto>。

[HttpPost]
public void Index(List<ProductNutritionFactsDto> model)
{
    if(ModelState.IsValid)
    {
       //....
    }
    //.....
}

如果您只想ProductNutritionFactsDto單獨傳遞頁面中的任何一個模型，請確保添加 name 屬性( name="PropertyName") 以覆寫asp-for生成的名稱，并且后端引數應為ProductNutritionFactsDto.

uj5u.com熱心網友回復：

在 for 回圈內附加帶有模型的表單欄位（ASP.NET Razor 視圖）

第一個表單組是 for 回圈中的一個，在添加新欄位之前，因此單擊提交按鈕時驗證有效。第二個表單組是單擊添加按鈕后的表單組。

如何使用 asp-validation-for？我試過這個，但它不起作用。

    <span asp-validation-for="[@i].NutritionName" class="text-danger"></span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/393734.html

標籤：javascript 网站 asp.net-mvc asp.net核心剃刀

上一篇：AjaxPost（模型系結）將null傳遞給控制器

下一篇：在C#ASPNETCore中使用JSON而無需反序列化