使用mvc

时间:2017-07-28 09:48:46

标签: c# angularjs sql-server model-view-controller

enter image description here我在使用Angularjs.Please帮助从mvc中的数据库中获取数据时遇到了麻烦。这是controller.js文件,有2个控制器。

这是service.js文件,有2个方法,由2个不同的controller.js文件

使用
app.service("myService", function ($http) {

    //get All Eployee
    this.getEmployees = function () {              
        return $http.get("Home/GetAll");
    };
    this.getEmployeesall = function () {
        return $http.get("Test/getAlldata");
    };
});


app.controller("contrl", function ($scope, myService) {
    getEmployeesall();
    function getEmployeesall() {
        var getData = myService.getEmployeesall();
        getData.then(function (emp) {
            $scope.employees = emp.data;
        }, function () {
            alert('Error in getting records');
        });
    }
});

这是service.js文件,有2个方法,由2个不同的控件使用

controller.js

app.controller("myCntrl", function ($scope, myService) {
    $scope.divEmployee = false;
    GetAllEmployee();
    //To Get All Records  
    function GetAllEmployee() {
        var getData = myService.getEmployees();
        getData.then(function (emp) {
             scope.employees = emp.data;
         },function () {
             alert('Error in getting records');
          });
    }

这是HomeController。这里有方法。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using GoodExample.Models;
    namespace GoodExample.Controllers
    {
        public class HomeController : Controller
        {
            // GET: /Home/
            public ActionResult Index()
            {
                return View();
            }

            public JsonResult getAll()
            {
                 using (SampleDBEntities dataContext = newSampleDBEntities())
                 {
                     var employeeList = dataContext.Employees.ToList();
                     return Json(employeeList,JsonRequestBehavior.AllowGet);
                 }
             }
         }
     }

Index.cshtml

@{
    ViewBag.Title = "Index";
}


<div ng-controller="myCntrl">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <h1> Employee Details Page</h1>
    <br/>
    <input type="button" class="btnAdd" value=" Add Employee" ng-click="AddEmployeeDiv()" />
    <a href='@Url.Action("SITE", "Test")'>
        <input type='button' value='Dummy Button' />
    </a>

    <div class="divList">
        <p class="divHead">Employee List</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                 <td><b>ID</b></td>
                 <td><b>Name</b></td>
                 <td><b>Email</b></td>
                 <td><b>Age</b></td>
                 <td><b>Actions</b></td>
             </tr>
             <tr ng-repeat="employee in employees">
                 <td>{{employee.Id}}</td>
                 <td>{{employee.name}}</td>
                 <td>{{employee.email}}</td>
                 <td>{{employee.Age}}</td>
                 <td>
                 <span ng-click="editEmployee(employee)" class="btnAdd">Edit</span>
                 <span ng-click="deleteEmployee(employee)" class="btnRed">Delete</span>
                 </td>
              </tr>
        </table>
    </div>

    <div ng-show="divEmployee">
        <p class="divHead">{{Action}} Employee</p>
        <table>
            <tr>
                <td><b>Id</b></td>
                <td><input type="text" disabled="disabled" ng-model="employeeId" /></td>
            </tr>
            <tr>
                <td><b>Name</b></td>
                <td><input type="text" ng-model="employeeName" /></td>
            </tr>
            <tr>
                <td><b>Email</b></td>
                <td><input type="text" ng-model="employeeEmail" /></td>
            </tr>
            <tr>
                 <td><b>Age</b></td>
                 <td><input type="text" ng-model="employeeAge" />
                 </td>
            </tr>
            <tr>
                 <td colspan="2"><input type="button" class="btnAdd" value="Save" ng-click="AddUpdateEmployee()" /></td>
            </tr>
        </table>
    </div>
</div>

这是TestController文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using GoodExample.Models;

namespace GoodExample.Controllers
{
    public class TestController : Controller
    {
        // GET: /Test/
        public ActionResult Demo()
        {
            return View();
        }  

        public JsonResult getAlldata()
        {
            using (SampleDBEntities dataContext = new SampleDBEntities())
            {
                var employeeList = dataContext.Employees.ToList();
                return Json(employeeList, JsonRequestBehavior.AllowGet);
             }
         }
     }
 }

Test.cshtml

@{
    ViewBag.Title = "Demo";
}

<div ng-controller="contrl">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <h1>tEST</h1><br/>

    @*<input type="button" class="btnAdd" value=" Add Employee" ng-click="AddEmployeeDiv()" />*@
    <a href='@Url.Action("SITE", "Home")'>
        <input type='button' value='Dummy Button' />
    </a>
    <div class="divList">
        <p class="divHead">Employee List</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td><b>ID</b></td>
                <td><b>Name</b></td>
                <td><b>Email</b></td>
                <td><b>Age</b></td>
                <td><b>Actions</b></td>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>{{employee.Id}}</td>
                <td>{{employee.name}}</td>
                <td>{{employee.email}}</td>
                <td>{{employee.Age}}</td>
                <td>
                    @*<span ng-click="editEmployee(employee)" class="btnAdd">Edit</span>
                     <span ng-click="deleteEmployee(employee)" class="btnRed">Delete</span>*@
                 </td>
             </tr>
        </table>
    </div>
</div>

但它没有在第二个TestController.cs.中显示数据。请帮助它如何在TestController.cs中显示数据

0 个答案:

没有答案