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

Posted 2023-03-31

【中文标题】将c#集合序列化为视图中的jquery数组以通过ajax方法传递给控制器

【英文标题】：Serializing c# collection to jquery array in the view to pass through the ajax method to controller

【发布时间】：2021-04-07 14:24:44

【问题描述】：

我有嵌套集合的视图模型。我想通过 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; 

【问题讨论】：

我正在使用简单的序列化，但在视图模型中提交我的列表后控制器操作为空。静态 GetDataArray(idOfForm: string): JQuery.NameValuePair[] return $("#" + idOfForm).serializeArray();

【参考方案1】：

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

【讨论】：

我使用了 viewcomponent，因为它可以通过 ajax 从下拉列表中选择一些选项来加载。我认为 mvc 核心中的视图组件是部分替代，这就是我使用它的原因。当我通过回发提交表单时，它工作正常。它绑定了 SecurityForms。在 Html 方面，它的视图组件或单个表单无关紧要，因为在 HTML 中它显示为单个表单。问题在于 Jquery 序列化。