将另一个模型绑定到局部视图，例如嵌套的局部视图绑定

问题描述

我有一个添加个人搜索部分视图的按钮，个人搜索部分视图也有一个添加按钮，在其中添加了个人搜索特征部分视图。 我想将BMRTestData模型与dividualSearch部分绑定，以便我可以获得特征部分视图数据。因此，我将该数据存储在IndividualSearch的列表 public List<Characteristic> characteristics { get; set; } = new List<Characteristic>();

中

请指导我做同样的事情，因为我是.net的新手。

编码

// TestData（主视图）

@using ABC.Core.Models.DTOs
@model ABC.Core.Models.Api.BMRTestData



@using (Html.BeginForm())
{
   
    <div class="card mb-3">
        <h5 class="card-header">Response</h5>
        <div class="card-body">
            <div class="card-block">
                <div class="form-group">
                    @Html.LabelFor(m => m.CompanyName,"Company Name",new { @class = "form-control-label" })
                    @Html.TextBoxFor(m => m.CompanyName,null,new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.CompanyName)
                </div>
                
                <div id="searchindividuals" class="mb-3">
                    @if (Model?.IndividualSearches != null)
                    {
                        for (var i = 0; i < Model?.IndividualSearches.Count; i++)
                        {
                            <div class="form-group">
                                @{ Html.RenderPartial("IndividualSearchPartial",Model.IndividualSearches[i],new ViewDataDictionary()); }
                            </div>
                        }
                    }
                </div>
                <div class="mb-3">
                    <button id="add-search-individual" type="button" class="btn btn-success">Add Search Individual</button>
                </div>
                

                <button id="add-company-characteristic" type="button" class="btn btn-success">Add Characteristic</button>
                
                
        </div>
    </div>   
    <button type="submit" class="btn btn-primary">Submit</button>
}

@section Scripts
    {         
        function add(element){
               var action = ' @Url.Action("NewIndividualSearchCharacteristic","Blended")';
               $.post(action)
              .done(function (partialView) {
               $(element.prevIoUsElementSibling).append(partialView);
              });
        }
    </script>
}

// IndividualSearchPartial

@using (Html.BeginCollectionItem("IndividualSearches"))
{
<div id="individual-details" class="card">
    <div class="form-horizontal">
        <div class="card-block">
            <div class="form-group">
                @Html.LabelFor(m => m.SearchPostcode,"Search Post Code",new { @class = "form-control-label" })
                @Html.TextBoxFor(m => m.SearchPostcode,new { @class = "form-control" })
            </div>

        </div>
    </div>
    <div class="card-block">
        <div id="characteristics" class="mb-3">
            @if (Model?.characteristics != null)
            {
                for (var i = 0; i < Model?.characteristics.Count; i++)
                {
            <div class="form-group">
                @{ Html.RenderPartial("IndividualSearchCharacterisiticPartial",Model.characteristics[i],new ViewDataDictionary()); }
              @*  @Html.EditorFor(m => m.characteristics);*@
            </div>
                }
            }
        </div>
        <button id="add-characteristics" onclick="add(this)" type="button" class="btn btn-success">Add characteristics</button>
    </div>
</div>
}

// IndividualSearchCharacterisiticPartial

@model ABC.Core.Models.DTOs.Characteristic

@using (Html.BeginCollectionItem("characteristics"))
{
    <div id="characteristic-details" class="card">
        <div class="form-horizontal">
            <div class="card-block">
                <div class="container">
                    <div class="row">
                        <div class="col-*-*">
                            @Html.LabelFor(m => m.Name,"Name",new { @class = "form-control-label" })
                        </div>
                        <div class="col">
                            @Html.TextBoxFor(m => m.Name,new { @class = "form-control" })
                        </div>
                        <div class="col-*-*">
                            @Html.LabelFor(m => m.Value,"Value",new { @class = "form-control-label" })
                        </div>
                        <div class="col">
                            @Html.TextBoxFor(m => m.Value,new { @class = "form-control" })
                        </div>
                        <div class="col-*-*">
                            <a id="characteristic-remove" href="#" onclick="removeCharacteristic(this)" class="btn btn-danger pull-right">Remove</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

//个人搜索类

namespace ABC.Core.Models.DTOs.Individual
{
    public class IndividualSearch
    {
    public List<Characteristic> characteristics { get; set; } = new List<Characteristic>();
    }
}

namespace ABC.Core.Models.Api
{
    public class BMRTestData : BMRRequest
    {
       
        public List<IndividualSearch> IndividualSearches { get; set; } = new List<IndividualSearch>();
    }
}

解决方法

更新

您可以在Add Search Individual按钮中添加onclick事件：

<button id="add-search-individual" type="button" class="btn btn-success" onclick="addSearch(this)">Add Search Individual</button>

在控制器中添加操作以返回IndividualSearchPartial部分视图：

  [HttpPost]
            public ActionResult IndividualSearchCharacteristic()
            {
                IndividualSearch individualSearch = new IndividualSearch() { };
    
                return PartialView("IndividualSearchPartial",individualSearch);
            }

这是主视图中的所有js：

@section Scripts
    {
    <script>
    function add(element){
    var action = ' @Url.Action("NewIndividualSearchCharacteristic","Default")';
    $.post(action)
        .done(function (partialView) {
            $(element).parents('#individual-details').find("#Characteristics").append('<div class="form-group">' + partialView + '</div>');
            ResetName();
    });
        }
        function addSearch(element){
    var action = ' @Url.Action("IndividualSearchCharacteristic","Default")';
    $.post(action)
        .done(function (partialView) {
            $(element).parents('.mb-3').find('#searchindividuals').append('<div class="form-group search">' + partialView + '</div>');
            ResetName();
    });
        }

        function ResetName() {
            var index = 0;
            $(".search").each(function () {
                var nameIndex = 0; var valueIndex = 0;
                $(this).find(":input[type='hidden']").each(function () {
                    $(this).removeAttr("name");
                });
                $(this).find(":input[type='text']").each(function () {
                    if ($(this).attr("name").indexOf("Characteristics") > -1 && $(this).attr("name").indexOf("Name") > -1) {
                        $(this).attr("name","IndividualSearches[" + index + "].Characteristics[" + nameIndex + "].Name");
                        nameIndex++;
                        return;
                    }
                    if ($(this).attr("name").indexOf("Characteristics") > -1 && $(this).attr("name").indexOf("Value") > -1) {
                        $(this).attr("name","IndividualSearches[" + index + "].Characteristics[" + valueIndex + "].Value");
                        valueIndex++;
                        return ;
                    }
                    if ($(this).attr("name").indexOf("IndividualSearches") > -1) {
                        $(this).attr("name","IndividualSearches[" + index + "].SearchPostcode");
                        return;

                    }
                });
                index++;
            })
        } 
    </script>
}

提交后，它将执行以下操作以接收BMRTestData数据：

[HttpPost]
        public IActionResult TestData(BMRTestData bMRTest)
        {
            return View();
        }

这是测试结果：