访问MVC'；s model属性来填充jQuery数据表，而不是使用json

我正在尝试构建一个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>
    }

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

[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？非常感谢你的帮助

JSON控制器

WebAPI客户端视图

@模型erp\u.Models.proveedorModel
@foreach（Model.contactos中的var contacto）
{
@contacto.contacto\u id
@联系人
}
$（文档）.ready（函数（）{
$（'#proveedorContactTable'）。数据表({
“栏目”：[
{“data”：“nombre_contacto”，“autoWidth”：true}，/*index=0*/
{“data”：“apellido_contacto”，“autoWidth”：true}，/*index=1*/
{“data”：“carga_contacto”，“autoWidth”：true}，/*index=2*/
{“数据”：“telefono_fijo_contacto”，“自动宽度”：true}，/*索引=3*/
{“数据”：“telefono_movil_contacto”，“自动宽度”：true}，/*索引=4*/
{“数据”：“correo_contacto”，“autoWidth”：true}，/*索引=5*/
{“数据”：“主体”，“自动宽度”：true}，/*索引=6*/
{
“数据”：“联系人id”，“宽度”：“50px”，“渲染”：函数（数据）{
返回“”；/*索引=7*/
}
},
{
“数据”：“联系人id”，“宽度”：“50px”，“渲染”：函数（数据）{
返回“”；/*索引=8*/
}
}
],
“columnDefs”：[{
“目标”：[7,8]，/*列索引*/
“医嘱内容”：false、/*true或false*/
}]
});
});

如果“/fichaproveredor/loadproveedorcontactTable”是WebAPI，那么默认情况下它将返回JSON而不是模型。。如果是普通视图，则可以使用

JsonConvert.SerializeObject

将模型转换为JSON，如

var JSON=JsonConvert.SerializeObject（model.contactos）

@JuniorCortenbach，在控制器中，返回应该是

返回视图（模型）

一个“模型”是一个数据结构。您必须将其“序列化”到某个对象，才能将其作为消息发送（如果是HTTP结果）。JSON是当今大多数人在网络上以消息形式发送数据结构时使用的序列化格式。在你的问题中，你写“这是我的模型”，然后你有一些示例代码，但这段代码不是一个“模型”。它只是消耗模型的razor代码。所以退一步，请明确解释在数据表中使用JSON的问题。实际问题是什么？你不喜欢这种格式？出现错误了吗？jquery代码确实使用了您的模型。它恰好被“序列化”为JSON。现在是什么阻止你使用“我剃刀里的模特”？我认为问题在于您需要两个不同的控制器，一个用于datatable（返回JSON），另一个用于razor视图（返回actionresult）。它们都使用相同的底层“模型”（MVC术语），但控制器发出两种不同的结果。一个是JSON，另一个是Razor可以使用的。问题是：您希望两者都在同一个页面上吗？这很有趣：您可以编写访问MVC模型的javascript。但是它需要在.cshtml中才能访问razor变量。此外，它将在服务器上完全评估，然后返回到客户端，这意味着您从

DataTable

中获得的任何异步/ajax好处都将丢失。我应该添加我正在使用的控制器ActionResult您的解决方案是否仍然有效？在当前上下文中也不存在ok。

[HttpGet（“LoadProveedorContactTable”）]public ActionResult loadProveedorContactTable（）{var erp_colombia=//此处加载结果返回Ok（erp_colombia.Models.proveedorModel）；}

这应该可以用返回的Json（erp_colombia.Models.proveedorModel）替换

Ok

或

Request.CreateResponse（HttpStatusCode.OK，erp\u.Models.proveedorModel，Configuration.Formatters.JsonFormatter）？我得到了你的解决方案，但我不想返回一个模型，而不是json。在javascript中，我想在razor中转换javascript所在的模型。因为我无法返回json和模型。
@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 } };
}

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

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

[Route("fichaProveedor")]
public class ReportingController : ControllerBase 
{
       [HttpGet("loadProveedorContactoTable")]
        public ActionResult LoadProveedorContactoTable()
        {
           var erp_colombia = //load result here
           return erp_colombia.Models.proveedorModel;
        }
}

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