视图中将c#集合序列化为jqu​​ery数组通过ajax方法传递给控制器

问题描述

我有带有嵌套集合的视图模型。我想通过ajax发布该表单，但我无法正确序列化它。这是我的看法

    @model ARM.Presentation.viewmodels.SecurityFormProfileviewmodel
    
    @{
        ViewData["Title"] = "EditSecurityProfile";
    }    
    
    <hr />
    <div class="offset-1 row">
        <div class="col-md-12">
            <form asp-action="EditSecurityProfile" autocomplete="chrome-off" method="post" id="security- 
     profiles-form">
                <div class="form-row">
                    <div class="form-group">
                        <input asp-for="ProfileId" type="hidden" class="form-control" />
                    </div>
                    <div class="offset-2 col-md-2">
                        <h3>@Model.ProfileName</h3>
                    </div>
                    <div class="col-md-2">
                        <h5>Select Area to  Filter Items</h5>
                        <select id="areaid" class="form-control" asp-items="@Model.MainAreasList"> 
   </select>
                    </div>
    
                </div>
                <div class="form-row mt-2">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <vc:security-form profile-id="@Model.ProfileId" area-id="null"></vc:security-form>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-2">
                        <arm-submitbtn id="formprofilesubmit"></arm-submitbtn>
                        <arm-cancelbtn id="formprofilecancel"></arm-cancelbtn>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="offset-2 col-12">
        <vc:users-by-security-profile profile-id="@Model.ProfileId"></vc:users-by-security-profile>
    </div>
    <div>
        <a asp-action="Index">Back to List</a>
    </div>
    @section Scripts {
        @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
        <script src="~/js/Areas/Administration/Views/SecurityProfiles/SecurityProfiles.js"></script>
        <script src="~/js/Areas/Administration//Views/SecurityProfiles/SecurityProfilesService.js"> 
</script>
    }

这是我在上述视图中调用的视图组件。

@model SecurityFormProfileviewmodel

<div id="forms">
    <table class="table">
        <thead>
            <tr>
                <td></td>
                <td>Form Name</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>

        </thead>
        <tbody>
            @for (int i = 0; i < Model.SecurityForms.Count; i++)
            {
              <tr>
                <td>
                    <input type="hidden" asp-for="@Model.SecurityForms[i].FormId" />
                    <input type="hidden" asp-for="@Model.SecurityForms[i].AreaId" />
                </td>
                <td>                        
                    <label class="form-check-label">@Model.SecurityForms[i].FormName</label>
                </td>
                @foreach (var item in Model.SecurityForms[i].AccessLevels)
                 {
                    <td>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" asp-for="@Model.SecurityForms[i].SelectedAccessLevelId" type="radio" id="inlineRaio1" 
                                   value="@item.AccesstypeId">
                            <label class="form-check-label">@item.Accesstype</label>
                        </div>
                    </td>
                 }

            </tr>
            }
        </tbody>
    </table>
</div>

对于以上所有内容，我使用具有嵌套集合的视图模型。这是我想要使用 jquery 从视图序列化的视图模型。

    public class SecurityFormProfileviewmodel
{
    public int ProfileId { get; set; }
    public string ProfileName { get; set; }
    public List<SecurityFormviewmodel> SecurityForms { get; set; }
    public IEnumerable<SelectListItem> MainAreasList { get; set; }
}

解决方法

首先，为什么要使用组件作为表单的一部分？通常组件用于跨页面重用一些通用功能。它们的视图可以包含表单，但我认为它们不能成为父表单的一部分。如果你想在一个表单中重用一些 .cshtml 代码可能是局部视图是一个更好的方法？在这种情况下，列表 SecurityForms 将为 null，因为当将表单绑定到模型时，框架不知道来自组件视图的数据属于属性 SecurityForms，即它无法绑定来自表单数据。解决这个问题的最简单方法是用局部视图替换组件并添加一个名为 SecurityForms 的前缀，这样在发布后 MVC 框架就会知道来自局部视图的数据属于属性 {{1} } 此处有更多相关信息getting the values from a nested complex object that is passed to a partial view