为什么列表没有传递给 IActionResult

Question

Why is the list newsletterSubComponents not getting passed to IActionResult . Can anyone help please. I know there is one option BindProperty but i can not use it since this list is coming from a partial view. I can only modify the list which is inside the model which is being passed to the partial_view.

List in model

List<NewsletterSubComponents> newsletterSubComponents = {get; set;}

Partial view

  @{

    Model.newsletterSubComponents.Add(new Models.NewsletterSubComponents() { NewPlantArticleId = 0 });
    Model.newsletterSubComponents.Add(new Models.NewsletterSubComponents() { NewPlantArticleId = 2 });

}

@for (var i = 0; i < Model.newsletterSubComponents.Count; ++i)
{
    <select class="form-control Shoplist News-plant-select_1 mt-2" data-search="true" asp-for="@Model.newsletterSubComponents[i].NewPlantArticleId">
        <option value="0">Bitte auswählen</option>
    </select>
}

Controller

 public IActionResult OnPostUpdateComponent(NewsletterComponents component, int? newsId, int? shortArticleId,
        List<NewsletterSubComponents> newsletterSubComponents, int? newPlant1, int? newPlant2, int? newPlant3)
    {
        var dbComponent = _context.NewsletterComponents.Find(component.NewsletterComponentId);
        if (dbComponent == null)
        {
            return RedirectToPage("./Index");
        }
        dbComponent.NewsId = newsId;
        dbComponent.ShortArticleId = shortArticleId;
        dbComponent.newsletterSubComponents = component.newsletterSubComponents;
        dbComponent.NewsletterMoreLink = component.NewsletterMoreLink;
        dbComponent.CustomLinkText = component.CustomLinkText;
        dbComponent.NewsleterComponentText = component.NewsleterComponentText;
        dbComponent.NewsletterComponentHeadline = component.NewsletterComponentHeadline;
        dbComponent.EditedBy = User.Identity.Name;
        dbComponent.EditedDate = DateTime.Now;
        _context.Update(dbComponent);
        _context.SaveChanges();
        UpdateNewsletterHtml((int)dbComponent.BelongsToNewsletterId);

        return RedirectToPage(new { id = dbComponent.BelongsToNewsletterId });
    }

newsletterSubComponents parameter is empty when i debug!

Answer 1

I have update the method to pass the list via javascript, you can refer to the following example.

In partial view, I inject the pagemodel and smimulate some data.

@model projectname.Pages.IndexModel
@{

Model.newsletterSubComponents.Add(new Models.NewsletterSubComponents() { NewPlantArticleId = 0 });
Model.newsletterSubComponents.Add(new Models.NewsletterSubComponents() { NewPlantArticleId = 2 });

}

<form>
    @for (var i = 0; i < Model.newsletterSubComponents.Count; ++i)
    {
         <select class="form-control Shoplist News-plant-select_1 mt-2" data-search="true" onchange="changeVal(event)" asp-for="@Model.newsletterSubComponents[i].NewPlantArticleId">
            <option value="0">Bitte auswählen</option>
        </select>
    }
    @Html.AntiForgeryToken()
    <button type="button" onclick="send()">btn</button>
</form>

Use javascript to pass this list.

@section Scripts{
<script>
    var SubComponents = [];
    var s = '@Model.newsletterSubComponents.Count()'
    for (var i = 0; i < s; i++) {
        SubComponents[i] = { "NewPlantArticleId": $("#newsletterSubComponents_" + i + "__NewPlantArticleId").val() }
    }
     function changeVal(e) {
        let nid = e.target.id
        let k = nid.replace(/[^0-9]/ig,"")
        SubComponents[k]={ "NewPlantArticleId": $("#newsletterSubComponents_" + k + "__NewPlantArticleId").val() }
    }
    function send() {
        $.ajax({
            url: '/?handler=UpdateComponent',
            method: 'post',
            headers: {
                RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            data: {
                newsletterSubComponents: SubComponents
            },
            success: function (data) {
                console.log(data)
            },
            error: function () {
                console.log('ee')
            }
        })
    }
</script>
}

Then, access the backend.