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

Question

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

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

编码

//测试数据（主视图）

@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, null, 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, null, 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, null, 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>
}

//个人搜索Class

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>();
    }
}

Answer 1

更新

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

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

在控制器中添加一个动作到 return 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();
        }

测试结果如下：

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

bind another model to partial view like nested partial view binding

c#

asp.net-mvc

asp.net-mvc-partialview

asp.net-core

更新