如何添加一个局部视图到HTML表

Question

我试图在我的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);    
});
}

这是方法"NovaCorQuantidade"JQuery GET正在调用:

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