Extract data from a db mediate angularjs and ajax

Question

Extract data from a db mediate angularjs and ajax

Navigation

#1 by (2 votes)

0

I am trying to extract the data from a table in my db using ajax and angular. Do a CRUD with MVC using asp.net and entity framework, the CRUD does not have any problem, but when displaying a data saved with angular no does not return anything I have consulted in different pages but still I do not get the result. I'm working on visual studio 2017

Script of the js

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

Controller code

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

HTML code

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

This is the result, of course, there is already data entered in the db

javascript ajax angularjs mvc asp.net-mvc

asked by Thomas Caycedo Martinez 21.04.2018 в 22:10

source

1 answer

Parse variable String to variable Int in Java [duplicated] Do not load data

score 2 · Answer 1

I hope you're okay.

The problem I'm noticing in your code is that both in your HTML view and in your JavaScript script you reference a controller with the name DriversController while the name of the controller you want to call is < strong> 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>

Also remember that JavaScript is a Sensitive Case language, so in your script you should call the driver exactly the way you named it in your controller code.