如何将部分视图附加到 html 表

Posted 2023-04-13

【中文标题】如何将部分视图附加到 html 表

【英文标题】：how to append a partial view to html table

【发布时间】：2021-05-23 08:52:48

【问题描述】：

我正在尝试使用部分视图在我的 html 表中添加一个新的 tr。

这是我的部分视图“_CorQuantidade”，带有 tr 标签

@model UI.Models.Estoque.CorQuantidadeViewModel

@using HtmlHelpers.BeginCollectionItem
@using UI.Models;

@using (@Html.BeginCollectionItem("ListaCorQuantidade"))

    <tr>
        <td>
            <select class="form-control dropCores">
                <option value="0">Selecione...</option>
                @foreach (var item in Model.Cores)
                
                    if (Model.IdentificadorCor == item.Identificador)
                    
                        <option value="@item.Identificador" selected>@item.Nome</option>
                    
                    else
                    
                        <option value="@item.Identificador">@item.Nome</option>
                    
                
            </select>
        </td>
        <td>
            <div class="input-group colorHex">
                <input type="text" name="CodigoHex" required="required" value="@Model.CodigoCor" class="form-control codigoHex" readonly />
                <span class="input-group-addon"><i></i></span>
            </div>
        </td>
        <td>
            <input type="number" class="form-control quantidade" name="quantidade" value="@Model.Quantidade" />
        </td>
        <td>
            <input type="text" class="form-control descricao" name="descricao" value="@Model.Descricao" />
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-warning text-center" onclick="excluirRow(this)">
                <i class="fa fa-trash" title="Excluir Produto Quantidade"></i>
            </button>
        </td>
    </tr>

这是我的 Jquery GET，它在“模型”变量中返回部分视图

function addItem() 
    $.get(urlRelativa("/Estoque/NovaCorQuantidade"),  , function (model) 
        $('#tabelaProdutoQuantidade tbody').append(model);    
    );

这是 JQuery GET 正在调用的方法“NovaCorQuantidade”：

public ActionResult NovaCorQuantidade()

    CorQuantidadeViewModel model = new CorQuantidadeViewModel();

    model.Cores = servicoCor.ObterTodosAtivosPorFiltro()
                                    .Where(x => x.DataHoraExclusao == null)
                                    .OrderBy(x => x.NomeCor)
                                    .Select(x => new DropDownViewModel()
                                    
                                        Identificador = x.Identificador,
                                        Nome = x.NomeCor,
                                    ).ToList();

    return PartialView("_CorQuantidade", model);
 

当我点击调用这一切的按钮在我的表中添加一个新的 tr 标签时，它显示如下：

it is showing like this because the tr and the td tags are not being put in the html

【问题讨论】：

你能做到console.log 并展示model 的样子吗？

【参考方案1】：

试试这个脚本

function addItem() 
    $.getJSON('@Url.Action("NovaCorQuantidade","Estoque")

',  , function (model) 
        $('#tabelaProdutoQuantidade tbody').append(model);    
    );