如何 append 部分查看 html 表

Question

我正在尝试使用部分视图在我的 HTML 表中 append 一个新的 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 标签时，它显示如下：

之所以这样显示，是因为 tr 和 td 标签没有放在 html 中

Answer 1

试试这个脚本

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

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