How to show a partial view in the DOM, from a data obtained from a select control

Question

I am working on a Net Core 5 MVC project.

I want to generate a warehouse receipt document from a purchase order, the idea is to show the available orders in the "select" control and when clicking the "Cargar OC" button, load and show a preview of the order, after this the user will click on "Crear Entrada" and it will take me to another view to generate the entry.

I have generated the view as a partial view, but my problem is that I don't know how to put the preview of the Purchase Order in the DOM.

For further reference, see the attached image

this function loads the Purchase Order data and if it returns the Json correctly, this is where I don't know how to take this data and put it in the DOM.

Controller code

// GET: DoctosAlmMasterController/GetOrdenCompra
public IActionResult GetOrdenCompra(int id)
{
    if (id != 0)
    {
        VHiloOcMasterViewModel vHiloOCMasterViewModel = Singleton.Instance.EntityManager.GetEntity<VHiloOcMasterViewModel>(id);

        if (vHiloOCMasterViewModel != null)
        {
            /* Obtengo los datos de una Vista MySql */
            List<VHiloOcDetailModel> lstVHiloOcDetail = Singleton.Instance.EntityManager.GetEntitiesByProperties<VHiloOcDetailModel>(nameof(VHiloOcDetailModel.HiloOCId), id);

            List<VHiloOcDetailModel> objDetail = new();

            int i = 0;
            foreach (var item in lstVHiloOcDetail)
            {
                objDetail.Add(new VHiloOcDetailModel());
                objDetail[i].HiloOCId = item.HiloOCId;
                objDetail[i].HiloOCDetId = item.HiloOCDetId;
                objDetail[i].HiloId = item.HiloId;
                objDetail[i].HiloName = item.HiloName;
                objDetail[i].TituloId = item.TituloId;
                objDetail[i].TituloName = item.TituloName;
                objDetail[i].ComposicionHiloId = item.ComposicionHiloId;
                objDetail[i].ComposicionHiloName = item.ComposicionHiloName;
                objDetail[i].TipoHiloId = item.TipoHiloId;
                objDetail[i].TipoHiloName = item.TipoHiloName;
                objDetail[i].SubtipoHiloId = item.SubtipoHiloId;
                objDetail[i].SubtipoHiloName = item.SubtipoHiloName;
                objDetail[i].Cantidad = item.Cantidad;
                objDetail[i].PrecioUnitario = item.PrecioUnitario;
                objDetail[i].ImporteTotal = Convert.ToDouble(item.ImporteTotal);

                i++;
            }
            vHiloOCMasterViewModel.HiloOcDetail = objDetail;
        }

        return View(vHiloOCMasterViewModel);
    }

    return null;
}

Javascript code:

function getOrdenCompraInfo() {
    let ordenCompraId = $("#OrdenCompraId option:selected").val();

    if (ordenCompraId == "0") {
        Swal.fire({ text: "Seleccione una Órden de Compra.", icon: 'info', allowOutsideClick: false, showConfirmButton: true, timer: 1500, timerProgressBar: true });
        return
    }

    $.ajax({
        url: "/DoctosAlmMaster/GetOrdenCompraInfo",
        data: {
            OrdenCompraId: ordenCompraId
        },
        type: "POST",

        success: function (response) {
            //Here I added the view that I received with Json

            /* Mostrar dentro de un contenedor <div> */
            $('#detailsDiv').load("/HiloOcMaster/Details/" + response.hiloOCId);

            /* Mostrar la informacion en una ventana modal */
            //$("#modal-content").load("/HiloOcMaster/Details/" + response.hiloOCId);
            //$("#WinModal").modal("show");
        },

        error: function (errormessage) {
            window.alert(errormessage.responseText);
        }
    });
}

This is the view.

<div id="divFrmCreate" class="container-fluid">
    <h5>Entrada de Almacén con Órden de Compra</h5>
    <hr/>
    <form id="frmCreateDocto" class="frmCreateDocto" asp-action="Create">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <div class="row">
                <div class="col-md-6">
                    <label asp-for="FolioOC" class="control-label"></label>
                    @Html.DropDownListFor(m => m.OrdenCompraId, ViewBag.FoliosList as SelectList, new {@class = "form-select"})
                    <span asp-validation-for="OrdenCompraId" class="text-danger"></span>
                </div>
                <div class="col-md-6 align-self-end">
                    <button type="button" class="btn btn-outline-secondary btn-md" onclick="getOrdenCompraInfo();"><i class="fa-regular fa-file-lines"></i> Cargar Orden de Compra</button>
                </div>
            </div>
            <hr />
            <div id="detailsDiv">
                <!-- ...Here insert content... -->
            </div>
            @*
            <div class="row">
                <div class="container mt-1 mb-2">
                    <!-- Barra de Botones Create Modal Guardar/Limpiar/Regresar -->
                    @*<partial name="~/Views/Shared/Controls/_BtnsCreateNoModal.cshtml"/>*@
            @*        <a id="btnCreate" class="btnCreate btn btn-primary" href="/HiloOcMaster/Create" title="Nueva Orden de Compra"><i class="fa-solid fa-plus"></i> Crear Entrada</a>
                </div>
            </div>
            *@
        </div>
    </form>
</div>

I finally found the solution, I corrected the Javascript function with the solution, thanks to everyone

Answer 1

This the final version off js function.

function getOrdenCompraInfo() {
    let ordenCompraId = $("#OrdenCompraId option:selected").val();
    let consignatarioId = 0, almacenId = 0;
    console.log("Orden de Compra # " + ordenCompraId);
    if (ordenCompraId == "0") {
        Swal.fire({ text: "Seleccione una Órden de Compra.", icon: 'info', allowOutsideClick: false, showConfirmButton: true, timer: 1500, timerProgressBar: true });
        return
    }

    $.ajax({
        url: "/DoctosAlmMaster/GetOrdenCompraInfo",
        data: {
            OrdenCompraId: ordenCompraId,
            ConsignatarioId: consignatarioId,
            AlmacenId: almacenId
        },
        type: "POST",

        success: function (response) {
            /* Mostrar dentro de un contenedor <div> */
            $('#detailsDiv').load("/HiloOcMaster/Details/" + response.hiloOCId);

            /* Mostrar la informacion en una ventana modal */
            //$("#modal-content").load("/HiloOcMaster/Details/" + response.hiloOCId);
            //$("#WinModal").modal("show");
        },

        error: function (errormessage) {
            window.alert(errormessage.responseText);
        }
    });
}