how to append a partial view to html table

Question

I'm trying to append a new tr in my HTML table using a partial view.

Here's my partial view "_CorQuantidade", with a tr tag

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

And here's my Jquery GET, which is returning that partial view in the "model" variable

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

And this is the method "NovaCorQuantidade" that the JQuery GET is calling:

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

When I click on the button that calls all this to add a new tr tag in my table, it's showing like this:

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

Answer 1

try this script

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

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