0

Estoy intentando extraer los datos de una tabla de mi db mediante ajax y angular.Realice un CRUD con MVC usando asp.net y entity framework, el CRUD no tiene ningún problema, pero al momento de mostrar un dato guardado con angular no no devuelve nada. He consultado en diferentes paginas pero aun así no obtengo el resultado. Estoy trabajando en visual studio 2017

Script del js

var conductores = angular.module('conductores', []);
conductores.controller('conductoresController', function ($scope, $http) {
     $http.get('/Conductors/Index').then(function (response) {
          $scope.lista = response.data;
     })
})

Codigo del controlador

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using ajax_test;

namespace ajax_test.Controllers
{
public class ConductorsController : Controller
{
    private Entities db = new Entities();

    // GET: Conductors
    public ActionResult Index()
    {
        return View(db.Conductor.ToList());
    }
    // Ajax 
    public ActionResult Listaconductores()
    {
        Entities db = new Entities();
        var data = db.Conductor.ToList();


        return Json(data, JsonRequestBehavior.AllowGet);
    }

Codigo de HTML

@model IEnumerable<ajax_test.Conductor>

@{
ViewBag.Title = "Index";
}


<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-app="conductores" ng-controller="conductoresController"></div>
<div class="row">
    <div class="col" s6>
        <h2>Conductores</h2>
    </div>
    <table class="table">
        <tr>
            <th>
                Nombre
            </th>
            <th>
                Apellido
            </th>
            <th>
                Direccion
            </th>
            <th>
                Cedula
            </th>
            <th>
                Telefono
            </th>

        </tr>

        <tr ng-repeat="conductor in lista">

            <td>
                {{conductor.Nombre}}
            </td>
            <td>
                {{conductor.Apellido}}
            </td>
            <td>
                {{conductor.Direccion}}
            </td>
            <td>
                {{conductor.Cedula}}
            </td>
            <td>
                {{conductor.Telefono}}
            </td>
        </tr>
    </table>
</div>

Este es el resultado, Claro esta, ya hay datos ingresados en la db introducir la descripción de la imagen aquí

1 respuesta 1

2

Espero que estés bien.

El problema que estoy notando en tu código es que tanto en tu vista HTML como en tu script de JavaScript haces referencia a un controlador de nombre conductoresController mientras que el nombre del controlador que quieres llamar es ConductorsController.

SCRIPT DEL JS

var conductores = angular.module('conductores', []);
conductores.controller('ConductorsController', function ($scope, $http) {
         $http.get('/Conductors/Index').then(function (response) {
             $scope.lista = response.data;
 })
})

HTML

@model IEnumerable<ajax_test.Conductor>

@{
ViewBag.Title = "Index";
}


<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div ng-app="conductores" ng-controller="ConductorsController"></div>
<div class="row">
    <div class="col" s6>
         <h2>Conductores</h2>
    </div>
    <table class="table">
        <tr>
            <th>
                Nombre
            </th>
            <th>
                Apellido
            </th>
            <th>
                Direccion
            </th>
            <th>
                Cedula
            </th>
            <th>
                Telefono
            </th>

        </tr>

        <tr ng-repeat="conductor in lista">

            <td>
                {{conductor.Nombre}}
            </td>
            <td>
                {{conductor.Apellido}}
            </td>
            <td>
                {{conductor.Direccion}}
            </td>
            <td>
                {{conductor.Cedula}}
            </td>
            <td>
                {{conductor.Telefono}}
            </td>
        </tr>
    </table>
</div>

Además recuerda que JavaScript es un lenguaje Sensitive Case, por lo tanto en tu script deberías llamar al controlador exactamente de la forma como lo nombraste en tu código del controlador.

6
  • Para que la respuesta tenga mayor posibilidad de ser aceptada pon un ejemplo con código Commented el 21 abr. 2018 a las 21:55
  • Acabo de agregar el código de cómo debería ser el llamado del controlador (lo que propongo en la respuesta), muchas gracias por tu sugerencia. Commented el 21 abr. 2018 a las 22:06
  • He realizado el cambio de nombre del controlador como lo dijiste pero aun asi no me devulve los datos de la db. No se si el problema esta en el codigo el ajax Commented el 21 abr. 2018 a las 23:15
  • Puedes agregar a tu GitHub el código de tu proyecto y lo puedo revisar para brindarte una mejor respuesta Commented el 21 abr. 2018 a las 23:21
  • Dale github.com/Thomascm19/ajax-test Commented el 22 abr. 2018 a las 0:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.