如何根据从 select 控件获得的数据在 DOM 中显示部分视图

Question

我正在处理 Net Core 5 MVC 项目。

我想从采购订单生成仓单文件，想法是在“select”控件中显示可用订单，并在单击“Cargar OC”按钮时加载并显示一个预览订单，此后用户将单击“创建 Entrada”，它将带我到另一个视图以生成条目。

我已经将视图生成为局部视图，但我的问题是我不知道如何将采购订单的预览放在 DOM。

如需进一步参考，请参阅附图

此函数加载采购订单数据，如果它 returns Json 正确，这就是我不知道如何获取此数据并将其放入 DOM.

控制器代码

// 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代码：

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

这是视图。

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

终于找到解决方法了，我用解决方法修正了Javascript函数，感谢大家

Answer 1

这是关闭js功能的最终版本。

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