如何在列表类型的视图模型中填充项目并将其返回到视图而不擦除表单.NET MVC的其他字段

Question

我试图通过视图填充视图模型中的字符串列表，然后按照用户填充其他字段的方式返回到相同的字段，并且无需将所有模型传递给控制器，仅发送我的清单。

我的操作系统视图模型

   public class OsViewModel
    {


        [Key]
        public int OSId { get; set; }

        [Display(Name = "Código")]
        [Required(ErrorMessage = "Informe o código da OS")]
        public string CodigoOS { get; set; }

        [Display(Name = "Descrição")]
        [Required(ErrorMessage = "Informe o descrição da OS")]
        public string Descricao { get; set; }

        [Display(Name = "Natureza OS")]
        [Range(1, int.MaxValue, ErrorMessage = "Selecione uma opção")]
        [Required(ErrorMessage = "Informe a natureza da OS")]
        public string Natureza { get; set; }

        public int codigoNatureza { get; set; }

        [Display(Name = "Req")]
        [Required(ErrorMessage = "Informe o código de requisição da OS")]
        public string CodigoReq { get; set; }

        public DateTime? SLA { get; set; }

        [Display(Name = "Prev. Ínicio")]
        public DateTime? ProgInic { get; set; }

        [Display(Name = "Prev. Fim")]
        public DateTime? ProgFim { get; set; }

        [Display(Name = "Ínicio Real")]
        public DateTime? RealInic { get; set; }

        [Display(Name = "Fim Real")]
        public DateTime? RealFim { get; set; }

        [Display(Name = "Dt Lançamento")]
        [Required(ErrorMessage = "Informe a data de lançamento da OS.")]
        public DateTime? DtLancamento { get; set; }

        [Display(Name = "Dt Status")]
        [Required(ErrorMessage = "Informe a data em que a OS foi cadastrada.")]
        public DateTime? DtStatus { get; set; }

        [Display(Name = "Horas Prev.")]
        public string QtdHorasPrev { get; set; }

        [Display(Name = "Horas Reais")]
        public string QtdHorasRealizadas { get; set; }

        [Display(Name = "VL. Mat")]
        [Required(ErrorMessage = "Informe o valor Material da OS")]
        public decimal? ValorMaterial { get; set; }

        [Display(Name = "VL. Serv")]
        [Required(ErrorMessage = "Informe o valor de Serviço da OS")]
        public decimal? ValorServico { get; set; }

        [Display(Name = "VL. Tot")]
        public decimal? ValorTotal { get; set; }

        [Display(Name = "Tot. Pen")]
        public decimal? ValoeDependenciaFaturado { get; set; }


        [Display(Name = "M. Faturado ?")]
        public bool ValorMaterialFaturado { get; set; }

        [Display(Name = "S. Faturado ?")]
        public bool ValorServicoFaturado { get; set; }

        [Display(Name = "VL. Tot Fat.")]
        public decimal? ValorTotalFaturado { get; set; }

        public int codigoStatus { get; set; }

        [Display(Name = "Status OS")]
        [Range(1, int.MaxValue, ErrorMessage = "Selecione uma opção")]
        [Required(ErrorMessage = "Informe o Status da OS")]
        public EnumStatusOS StatusDaOS { get; set; }

        [Display(Name = "Técnicos")]
        [Required(ErrorMessage = "A OS deve possuir pelo menos um Técnico.")]
        public int[] chkTecnicos { get; set; }

        public ICollection<SelectListItem> listaTecnicos { get; set; }

        public ICollection<SelectListItem> StatusOS { get; set; }

        public ICollection<SelectListItem> NaturezaOS { get; set; }

        public virtual ICollection<TecnicoViewModel> Tecnicos { get; set; }

        public virtual ICollection<InfoOsViewModel> Status { get; set; }

        public virtual ICollection<ObservacoesOSViewModel> ObservacoesOS { get; set; }

        public virtual List<string> Observacoes { get; set; }

    }

我想要传递给我的控制器的列表是：

 public virtual List<string> Observacoes { get; set; }

我的控制器：

[HttpPost]
public ActionResult IncluirObservacoes(IEnumerable<InclusoesOsViewModel> inclusoes)
{

    OsViewModel os = new OsViewModel {
        //get inclusoes items
    };


    //TempData["Message"] = new[] { Resources.altera_sucesso, "sucesso" };
    return Json(new { success = true, responseText = "O cadastro foi realizado com sucesso" }, JsonRequestBehavior.AllowGet);
}

接收我的ajax请求项的我的视图模型：

 public class InclusoesOsViewModel
    {
        public string name { get; set; }

        public int value { get; set; }

        public DateTime data { get; set; }

        public List<string> observacoes { get; set; }
    }

而且，我的观点：

@model ControleOS.Apresentacao.MVC.Areas.Admin.ViewModels.OS.OsViewModel

@{
    ViewBag.Title = "Cadastrar";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

<div class="col-md-12">
    <div class="card" style="padding-top: 10px;">
        <div class="row m-0 form-group fg-float">
            @using (Html.BeginForm("IncluirObservacoes", "Os", FormMethod.Post, new { id = "frmCadastrarOS" }))
            {

                @Html.AntiForgeryToken()
                @Html.Partial("_CreateOrEdit", Model)

                <div class="col-md-12">
                    <button type="submit" class="btn btn-primary waves-effect" style="float: right; text-transform: uppercase;">Salvar</button>
                    <a href="@Url.Action("Gerenciar", "OS")" class="btn btn-warning waves-effect espaco" style="float: right; text-transform: uppercase;">Retornar</a>
                </div>
            }
        </div>
    </div>
</div>

@Model.Observacoes


<script>
    $(document).ready(function () {

        var listaTecnicos = [];
        var listaObservacoes = [];

        //$("#Salvar").click(function () {
        //    localStorage.removeItem("menus");
        //});

        $("#btn-modalTecnicos").click(function () {
            $("#listaDeTecnicos").empty();
            $("#modal_tecnicos").modal("show");
        });

        $("#btn-retornarTecnicos").click(function () {
            $("#modal_tecnicos").modal("hide");
        });

        $("#btn-salvarTecnicos").click(function () {
            $("#modal_tecnicos").modal("hide");
            $.each(listaTecnicos, function (i) {
                $("#listaDeTecnicos").append('<li data-filtertext="' + listaTecnicos[i] + '">' + listaTecnicos[i] + '</li>');

            });
        });


        $(".checkTecnicos").click(function () {
            if ($(this).prop('checked') == true) {
                var tecnico = $(this).attr("data-valuetwo");
                listaTecnicos.push(tecnico);
            }
            else {
                var tecnico = $(this).attr("data-valuetwo");
                listaTecnicos.pop(tecnico);
            }
        });

        //Observacao

        $("#btn-modalObservacoes").click(function () {
            $("#listaDeObservacoes").empty();
            $("#modal_observacoes").modal("show");
        });

        $("#btn-retornarObservacoes").click(function () {
            $("#modal_observacoes").modal("hide");
        });

        $("#btn-salvarObservacoes").click(function () {
            $("#modal_observacoes").modal("hide");
            var observacao = $("#txt-incluirObservacao").val();
            incluirObservacao(observacao);
        });



        function incluirObservacao(observacao) {
            listaObservacoes.push(observacao);
            $.each(listaObservacoes, function (i) {
                $("#listaDeObservacoes").append('<li data-filtertext="' + listaObservacoes[i] + '">' + listaObservacoes[i] + '</li>');
            });
            @*@Model.Observacoes = @Newtonsoft.Json.JsonConvert.SerializeObject(listaObservacoes);*@
        };

        $("#frmCadastrarOS").submit(function (e) {

            var postData = $("#frmCadastrarOS").serializeArray();
            var model = @Html.Raw(@Newtonsoft.Json.JsonConvert.SerializeObject(Model));

            $.ajax({
                url: "@Url.Action("IncluirObservacoes", "OS")",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(postData),
                dataType: 'html',
                success: function (data) {
                    console.log("sucesso");
                    $("#modal_observacoes").modal("hide");
                    location.reload();
                },
                error: function (data) {
                    console.log("erro");
                }
            });
            e.preventDefault();
        });

    })
</script>

我的部分视图模型，谁负责在我的模态中发送itens。

@model ControleOS.Apresentacao.MVC.Areas.Admin.ViewModels.OS.OsViewModel

@{
    ViewBag.Title = "_CreateOrEdit";
    //13890
}

<style>
    .fg-float .fg-label {
        color:#6B1F7C !important;
    }
</style>
<div class="col-md-12">
    <div class="col-md-12">
        <fieldset class="col-md-12">
            <legend>ORDEM DE SERVIÇO</legend>
            <div class="row">
                <div class="form-group fg-float col-md-1">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.CodigoOS, new { @class = "form-control fg-input negrito", @maxlength = "6" })
                        @Html.LabelFor(m => m.CodigoOS, new { @class = "fg-label", @id = "text-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.CodigoOS, "", new { @class = "has-error text-danger" })
                </div>
                <div class="form-group fg-float col-md-1">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.CodigoReq, new { @class = "form-control fg-input negrito", @maxlength = "6" })
                        @Html.LabelFor(m => m.CodigoReq, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.CodigoReq, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-3 form-group fg-float">
                    <div class="select">
                        @Html.DropDownListFor(p => p.codigoStatus, Model.StatusOS.Select(option => new SelectListItem
                   {
                       Text = option.Text,
                       Value = option.Value,
                       Selected = (Model != null) && (option.Value == Model.codigoStatus.ToString())
                   }), "Selecione o Satatus da OS", new { @id = "ddlStatusDaOS", @SortDirection = "ASC", @sort = "true", @class = "form-control roxo negrito" })
                    </div>
                    @Html.ValidationMessageFor(c => c.codigoStatus, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-3 form-group fg-float">
                    <div class="select">
                        @Html.DropDownListFor(p => p.codigoNatureza, Model.NaturezaOS.Select(option => new SelectListItem
                   {
                       Text = option.Text,
                       Value = option.Value,
                       Selected = (Model != null) && (option.Value == Model.codigoNatureza.ToString())
                   }), "Selecione a Natureza da OS", new { @id = "ddlNaturezaDaOS", @SortDirection = "ASC", @sort = "true", @class = "form-control roxo negrito" })
                    </div>
                    @Html.ValidationMessageFor(c => c.codigoNatureza, "", new { @class = "has-error text-danger" })
                </div>
                <div class="col-md-2 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.DtLancamento, new { @class = "form-control fg-input date negrito" })
                        @Html.LabelFor(m => m.DtLancamento, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.DtLancamento, "", new { @class = "has-error text-danger negrito" })
                </div>
                <div class="col-md-1 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.DtStatus, new { @class = "form-control fg-input date negrito" })
                        @Html.LabelFor(m => m.DtStatus, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.DtStatus, "", new { @class = "has-error text-danger" })
                </div> 
                <div class="col-md-1 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.SLA, new { @class = "form-control fg-input date negrito", @id = "destaqueSLA" })
                        @Html.LabelFor(m => m.SLA, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.SLA, "", new { @class = "has-error text-danger" })
                </div>
            </div>


            <div class="row m-t-10">
                <div class="form-group fg-float col-md-12">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.Descricao, new { @class = "form-control fg-input negrito" })
                        @Html.LabelFor(m => m.Descricao, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.Descricao, "", new { @class = "has-error text-danger " })
                </div>
            </div>
        </fieldset>
    </div>

    <div class="col-md-12">
        <fieldset class="col-md-12 m-t-20">
            <legend>OBSERVAÇÕES</legend>
            <div class="pmb-block">
                <div class="pmbb-header">
                    <h4>
                        <i class="zmdi zmdi-collection-text m-r-5"></i>Observações
                        <a href="#" id="btn-modalObservacoes" class="btn btn-success waves-effect espaco pull-right auto-size" style="float: right; margin-top:-10px; padding:6px,2px,6px,2px;"><i class="zmdi zmdi-plus"></i></a>
                    </h4>
                </div>
                <div class="pmbb-body p-l-30">
                    <div class="pmbb-view">
                        <ul data-role="listview" data-filter="true" id="listaDeObservacoes"></ul>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="col-md-12">
        <fieldset class="col-md-6 m-t-20">
            <legend>PROGRAMAÇÃO</legend>
            <div class="row">
                <div class="col-md-4 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.ProgInic, new { @class = "form-control fg-input date" })
                        @Html.LabelFor(m => m.ProgInic, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.ProgInic, "", new { @class = "has-error text-danger" })
                </div>
                <div class="col-md-4 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.ProgFim, new { @class = "form-control fg-input date" })
                        @Html.LabelFor(m => m.ProgFim, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.ProgFim, "", new { @class = "has-error text-danger" })
                </div>
                <div class="col-md-4 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.QtdHorasPrev, new { @class = "form-control fg-input" })
                        @Html.LabelFor(m => m.QtdHorasPrev, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.QtdHorasPrev, "", new { @class = "has-error text-danger" })
                </div>
            </div>
        </fieldset>
        <fieldset class="col-md-6 m-t-20">
            <legend>REALIZAÇÃO</legend>
            <div class="row">
                <div class="col-md-4 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.RealInic, new { @class = "form-control fg-input date" })
                        @Html.LabelFor(m => m.RealInic, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.RealInic, "", new { @class = "has-error text-danger" })
                </div>
                <div class="col-md-4 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.RealFim, new { @class = "form-control fg-input date" })
                        @Html.LabelFor(m => m.RealFim, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.RealFim, "", new { @class = "has-error text-danger" })
                </div>
                <div class="col-md-4 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.QtdHorasRealizadas, new { @class = "form-control fg-input" })
                        @Html.LabelFor(m => m.QtdHorasRealizadas, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.QtdHorasRealizadas, "", new { @class = "has-error text-danger" })
                </div>
            </div>
        </fieldset>
    </div>

    <div class="col-md-12">
        <fieldset class="col-md-12 m-t-20">
            <legend>TÉCNICOS</legend>
            <div class="pmb-block">
                <div class="pmbb-header">
                    <h4>
                        <i class="zmdi zmdi-wrench m-r-5"></i>Técnicos
                        <a href="#" id="btn-modalTecnicos" class="btn btn-success waves-effect espaco pull-right" style="float: right; margin-top:-10px; padding:6px,2px,6px,2px;"><i class="zmdi zmdi-plus"></i></a>
                    </h4>
                </div>
                <div class="pmbb-body p-l-30">
                    <div class="pmbb-view">
                        <ul data-role="listview" data-filter="true" id="listaDeTecnicos"></ul>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>

    <div class="col-md-12">
        <fieldset class="col-md-12 m-t-20 m-b-20">
            <legend>ORÇAMENTO</legend>
            <div class="row">
                <div class="col-md-1 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.ValorMaterial, new { @class = "form-control fg-input money2" })
                        @Html.LabelFor(m => m.ValorMaterial, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.ValorMaterial, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-1 form-group fg-float" style="margin-left:3%;">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.ValorServico, new { @class = "form-control fg-input money2" })
                        @Html.LabelFor(m => m.ValorServico, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.ValorServico, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-3 form-group fg-float">
                    @Html.DropDownListFor(m => m.ValorServicoFaturado, new SelectList(
                new[]
                 {
                    new { Value = "true", Text = "Serviço faturado" },
                    new { Value = "false", Text = "Serviço não faturado" },
                },
                "Value",
                "Text",
                Model
                 ), new { @id = "", @SortDirection = "ASC", @sort = "true", @class = "form-control roxo" })
                    @Html.ValidationMessageFor(m => m.ValorServicoFaturado, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-3 form-group fg-float">
                    @Html.DropDownListFor(m => m.ValorMaterialFaturado, new SelectList(
                new[]
                 {
                    new { Value = "true", Text = "Material faturado" },
                    new { Value = "false", Text = "Material não faturado" },
                },
                "Value",
                "Text",
                Model
                 ), new { @id = "", @SortDirection = "ASC", @sort = "true", @class = "form-control roxo" })
                    @Html.ValidationMessageFor(m => m.ValorMaterialFaturado, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-1 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.ValorTotalFaturado, new { @class = "form-control fg-input money2" })
                        @Html.LabelFor(m => m.ValorTotalFaturado, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.ValorTotalFaturado, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-1 form-group fg-float" style="margin-left:2%;">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.ValoeDependenciaFaturado, new { @class = "form-control fg-input money2" })
                        @Html.LabelFor(m => m.ValoeDependenciaFaturado, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.ValoeDependenciaFaturado, "", new { @class = "has-error text-danger" })
                </div>

                <div class="col-md-1 form-group fg-float">
                    <div class="fg-line">
                        @Html.TextBoxFor(m => m.ValorTotal, new { @class = "form-control fg-input money2" })
                        @Html.LabelFor(m => m.ValorTotal, new { @class = "fg-label" })
                    </div>
                    @Html.ValidationMessageFor(m => m.ValorTotal, "", new { @class = "has-error text-danger" })
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="modal fade" id="modal_tecnicos" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" align="center">
    <div class="modal-dialog">
        <div class="modal-content" style="width:auto;">
            <div class="modal-header" align="center" style="margin-bottom: -20px;">
                <h4 class="modal-title"><i class="zmdi zmdi-wrench m-r-5"></i> Selecione os técnicos abaixo</h4>
                <hr style="margin-top:10px;" />
            </div>

            <div class="modal-body" align="center">
                <div class="col-md-12">
                    <div class="col-md-12 m-b-15 z-depth-1">
                        <h4 style="border-bottom: 1px solid #673673;">Técnicos</h4>
                        @foreach (var tecnicos in Model.listaTecnicos)
                        {
                            <div class="col-md-6 checkbox" style="margin-top: 10px; text-align:center;">
                                <label id="chk-Tecnicos" class="pull-left">
                                    <input type="checkbox" class="checkTecnicos" data-valuetwo="@tecnicos.Text" style="margin-left:-20px;" name="chkTecnicos" checked="@tecnicos.Selected" value="@tecnicos.Value">
                                    <i class="input-helper" id="chkicon"></i>
                                    @tecnicos.Text
                                </label>
                            </div>
                        }
                    </div>
                    @Html.ValidationMessageFor(d => d.chkTecnicos, "", new { @class = "has-error text-danger" })
                </div>
            </div>

            <div class="modal-footer">
                <a href="#" type="button" id="btn-retornarTecnicos" class="btn btn-warning">Retornar</a>
                <a href="#" type="button" id="btn-salvarTecnicos" class="btn btn-primary">Salvar</a>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="modal_observacoes" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" align="center">
    <div class="modal-dialog">
        <div class="modal-content" style="width:auto;">
            <div class="modal-header" align="center" style="margin-bottom: -20px;">
                <h4 class="modal-title"><i class="zmdi zmdi-collection-text m-r-5"></i>Incluir nova observação</h4>
                <hr style="margin-top:10px;" />
            </div>
            <div class="modal-body" align="center">
                <div class="col-md-12">
                    <div class="col-md-12 m-b-15 z-depth-1">
                        <h4 style="border-bottom: 1px solid #673673;">Observações</h4>                        
                        <div class="row m-t-10 m-t-20">
                            <div class="form-group fg-float col-md-12">
                                <div class="fg-line">
                                    <div class="fg-line">
                                        <input type="text" id="txt-incluirObservacao" class="form-control">
                                        <label class="fg-label">Observação</label>
                                    </div>
                                </div>
                                @Html.ValidationMessageFor(m => m.Descricao, "", new { @class = "has-error text-danger " })
                            </div>
                        </div>
                    </div>
                    @Html.ValidationMessageFor(d => d.Observacoes, "", new { @class = "has-error text-danger" })
                </div>
            </div>

            <div class="modal-footer">
                <a href="#" type="button" id="btn-retornarObservacoes" class="btn btn-warning">Retornar</a>
                <a href="#" type="button" id="btn-salvarObservacoes" class="btn btn-primary">Salvar</a>
            </div>

        </div>
    </div>
</div>

那么当用户插入我的列表并返回填充到我的视图中时，如何发送到我的控制器，以便我可以正常以表单发送我的 OsViewModel ？

基本，我想将我的 listaObservacoes[] 传递给我的@Model.Observacoes。

Answer 1

listaObservacoes 值的列表必须以表单形式发送，因此表单必须包含“input”等标签，其名称与模型中的字符串列表相同：“Observacoes”和 listaObservacoes 值应位于标签中。 您可以在提交表单之前使用 jquery 动态创建这些标签。

在您的表单中，您需要一个位置来放置动态标签，其 id 类似于“dynamic-tags”：

 @using (Html.BeginForm("IncluirObservacoes", "Os", FormMethod.Post, new { id = "frmCadastrarOS" }))
        {

            @Html.AntiForgeryToken()
            @Html.Partial("_CreateOrEdit", Model)

            <div id="dynamic-tags"></div>

            <div class="col-md-12" ... // the rest of the form
               
        }

在提交表单之前，您需要创建动态标签，如下所示：

 $("#frmCadastrarOS").submit(function (e) {
 
 $.each(listaObservacoes, function(i,v){
 $("#dynamic-tags").append(`<intput type="text"   name="Observacoes[${i}]" value="${v}"  />`)
})