时间戳

首页 > 解决方案 > 从 Javascript 访问 MVC 的模型属性以填充使用 json 的 jQuery 数据表

jquery - 从 Javascript 访问 MVC 的模型属性以填充使用 json 的 jQuery 数据表

问题描述

我正在尝试构建一个 ASP.NET MVC 应用程序，我想返回一个模型而不是 json，但我需要帮助来建模以填充我的数据表。

这是我的Javascript：

   @section Scripts{
        <script type="text/javascript" charset="utf8" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
        <script>
            $(document).ready(function () {
                $('#proveedorContactoTable').DataTable({
                    "ajax": {
                        "url": "/fichaProveedor/loadProveedorContactoTable",
                        "type": "GET",
                        "datatype": "json"
                    },
                    "columns": [
                        { "data": "nombre_contacto", "autoWidth": true }, /* index = 0 */
                        { "data": "apellido_contacto", "autoWidth": true }, /* index = 1 */
                        { "data": "carga_contacto", "autoWidth": true }, /* index = 2 */
                        { "data": "telefono_fijo_contacto", "autoWidth": true }, /* index = 3 */
                        { "data": "telefono_movil_contacto", "autoWidth": true }, /* index = 4 */
                        { "data": "correo_contacto", "autoWidth": true }, /* index = 5 */
                        { "data": "principal", "autoWidth": true }, /* index = 6 */
                        {
                            "data": "contacto_id", "width": "50px", "render": function (data) {
                                return '<a class="popup" href="/fichaProveedor/Detalles/' + data + '">Editar</a>';  /* index = 7 */
                            }
                        },
                        {
                            "data": "contacto_id", "width": "50px", "render": function (data) {

                                return '<a class="btn btn-primary" href="/fichaProveedor/Eliminar/' + data + '">Eliminar</a>'; /* index = 8 */
                            }
                        }
                    ],
                    'columnDefs': [{
                        'targets': [7, 8], /* column index */
                        'orderable': false, /* true or false */
                    }]
                });
            });

        </script>
    }

这是我的 html 表

<div class="dvScroll">
    <table id="myTable">
        <thead>
            <tr>
                <th>Proveedor Id</th>
                <th>Nombre</th>
                <th>Dirección</th>
                <th>Código postal</th>
                <th>Cuidad</th>
                <th>País</th>
                <th>Pagina internet</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
    </table>
</div>

我有以下模型，其中包含一个“contactos”列表，我想使用它的所有元素来填充 jQuery 表。这是我的模型和模型中包含的一些属性。

@model erp_colombia.Models.proveedorModel
@foreach (var contacto in Model.contactos)
{
        @contacto.contacto_id
        @contacto.apellido_contacto
}

到目前为止，这是我的控制器

[HttpPost]
public ActionResult Editar(inventarioModel gestiondeubicacione)
{
    inventarioContext gestiondeubicaciones = new inventarioContext();
    bool status = false;
    if (ModelState.IsValid)
    {
        if (gestiondeubicacione.componente_id > 0)
        {
            //Edit 
            var gestiondeubicacionesFound = gestiondeubicaciones.GetAllInventarios().Where(a => a.componente_id == gestiondeubicacione.ubicacion_id).FirstOrDefault();
            if (gestiondeubicacionesFound != null)
            {
                gestiondeubicacionesFound.armario = gestiondeubicacione.armario;
                gestiondeubicacionesFound.cajon = gestiondeubicacione.cajon;
            }
        }
        else
        {
            //gestiondeubicaciones.addInvenotryLocationToDB(gestiondeubicacione);
            TempData["msgType"] = messageType.success;
            TempData["msg"] = "Nueva ubicación agregada!";
            //Save new one
            //dc.Employees.Add(emp);
        }
        //gestiondeubicaciones.updateInvenotryLocationToDB(gestiondeubicacione);
        TempData["msgType"] = messageType.success;
        TempData["msg"] = "La ubicación ha sido actualizada!";
        //Update
        //dc.SaveChanges();
        status = true;
    }
    return new JsonResult { Data = new { status = status } };
}

如何在 Javascript 而不是 json 中使用我的模型？非常感谢您的帮助。

标签： jqueryasp.net-mvc

解决方案

  1. JSON 控制器
[Route("fichaProveedor")]
public class ReportingController : ControllerBase 
{
       [HttpGet("loadProveedorContactoTable")]
        public async Task<IActionResult> LoadProveedorContactoTable()
        {
           var erp_colombia = //load result here
           return Ok(erp_colombia.Models.proveedorModel);
        }
}
  1. WebAPI 客户端视图
<script type="text/javascript" charset="utf8" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<table id="proveedorContactoTable" class="display" style="width:100%">
</table>
        <script>
            $(document).ready(function () {
                $('#proveedorContactoTable').DataTable({
                    "ajax": {
                        "url": "/fichaProveedor/loadProveedorContactoTable",
                        "type": "GET",
                        "datatype": "json"
                    },
                    "columns": [
                        { "data": "nombre_contacto", "autoWidth": true }, /* index = 0 */
                        { "data": "apellido_contacto", "autoWidth": true }, /* index = 1 */
                        { "data": "carga_contacto", "autoWidth": true }, /* index = 2 */
                        { "data": "telefono_fijo_contacto", "autoWidth": true }, /* index = 3 */
                        { "data": "telefono_movil_contacto", "autoWidth": true }, /* index = 4 */
                        { "data": "correo_contacto", "autoWidth": true }, /* index = 5 */
                        { "data": "principal", "autoWidth": true }, /* index = 6 */
                        {
                            "data": "contacto_id", "width": "50px", "render": function (data) {
                                return '<a class="popup" href="/fichaProveedor/Detalles/' + data + '">Editar</a>';  /* index = 7 */
                            }
                        },
                        {
                            "data": "contacto_id", "width": "50px", "render": function (data) {

                                return '<a class="btn btn-primary" href="/fichaProveedor/Eliminar/' + data + '">Eliminar</a>'; /* index = 8 */
                            }
                        }
                    ],
                    'columnDefs': [{
                        'targets': [7, 8], /* column index */
                        'orderable': false, /* true or false */
                    }]
                });
            });

        </script>
  1. MVC 控制器
[Route("fichaProveedor")]
public class ReportingController : ControllerBase 
{
       [HttpGet("loadProveedorContactoTable")]
        public ActionResult LoadProveedorContactoTable()
        {
           var erp_colombia = //load result here
           return erp_colombia.Models.proveedorModel;
        }
}
  1. WebAPI 客户端视图
    <script type="text/javascript" charset="utf8" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
@model erp_colombia.Models.proveedorModel
    <table id="proveedorContactoTable" class="display" style="width:100%">
      @foreach (var contacto in Model.contactos)
{
        <tr><td>@contacto.contacto_id</td>
        <td>@contacto.apellido_contacto</td></tr>
}
    </table>
            <script>
                $(document).ready(function () {
                    $('#proveedorContactoTable').DataTable({
                        "columns": [
                            { "data": "nombre_contacto", "autoWidth": true }, /* index = 0 */
                            { "data": "apellido_contacto", "autoWidth": true }, /* index = 1 */
                            { "data": "carga_contacto", "autoWidth": true }, /* index = 2 */
                            { "data": "telefono_fijo_contacto", "autoWidth": true }, /* index = 3 */
                            { "data": "telefono_movil_contacto", "autoWidth": true }, /* index = 4 */
                            { "data": "correo_contacto", "autoWidth": true }, /* index = 5 */
                            { "data": "principal", "autoWidth": true }, /* index = 6 */
                            {
                                "data": "contacto_id", "width": "50px", "render": function (data) {
                                    return '<a class="popup" href="/fichaProveedor/Detalles/' + data + '">Editar</a>';  /* index = 7 */
                                }
                            },
                            {
                                "data": "contacto_id", "width": "50px", "render": function (data) {

                                    return '<a class="btn btn-primary" href="/fichaProveedor/Eliminar/' + data + '">Eliminar</a>'; /* index = 8 */
                                }
                            }
                        ],
                        'columnDefs': [{
                            'targets': [7, 8], /* column index */
                            'orderable': false, /* true or false */
                        }]
                    });
                });

            </script>

推荐阅读