如何使用最新数据

时间:2017-03-22 17:45:06

标签: html angularjs asp.net-mvc

这里我使用简单的表单使用实体框架将数据插入到sql server中。我在客户端使用angularJS,在业务逻辑中使用MVC。

我的EmployeesController.cs

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 CompanyApp.Models;

namespace CompanyApp.Controllers
{
    public class EmployeesController : Controller
    {
        private CompanyEntities db = new CompanyEntities();

        // GET: Employees
        public ActionResult Index()
        {
            return View();
        }

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

        public string AddEmployee(Employee Emp)
        {
            if (Emp != null)
            {
                using (CompanyEntities dataContext = new CompanyEntities())
                {
                    dataContext.Employees.Add(Emp);
                    dataContext.SaveChanges();
                    return "Employee Updated";
                }
            }
            else
            {
                return "Invalid Employee";
            }
        }
    }
}

Index.cshtml

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

    <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>Salary</b></td>
            </tr>
            <tr ng-repeat="employee in employees">
                <td>
                    {{employee.EmpId}}
                </td>
                <td>
                    {{employee.EmpName}}
                </td>
                <td>
                    {{employee.Salary}}
                </td>
            </tr>
        </table>
    </div>


    <div>
        <p class="divHead">Add Employee</p>
        <table>
            <tr>
                <td><b>Id</b></td>
                <td>
                    <input type="text" disabled="disabled" ng-model="EmpId" />
                </td>
            </tr>
            <tr>
                <td><b>Name</b></td>
                <td>
                    <input type="text" ng-model="EmpName" />
                </td>
            </tr>
            <tr>
                <td><b>Salary</b></td>
                <td>
                    <input type="text" ng-model="Salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="btnAdd" value="Save" ng-click="AddUpdateEmployee()" />
                </td>
            </tr>
        </table>
    </div>
</div>

Module.js

var app = angular.module("myApp", []);

Service.js

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

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

    this.AddEmp = function (employee) {
        var response = $http({
            method: "post",
            url: "AddEmployee",
            data: JSON.stringify(employee),
            dataType: "json"
        });
        return response;
    }

});

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

    $scope.AddUpdateEmployee = function () {
        debugger;
        var Employee = {
            EmpId: $scope.EmpId,
            EmpName: $scope.EmpName,
            Salary: $scope.Salary
        };

        var getData = myService.AddEmp(Employee);
        getData.then(function (msg) {
            GetAllEmployee();


            alert(msg.data);
        }, function () {
            alert('Error in adding record');
        });

        ClearFields();


    }

    function ClearFields() {
        $scope.EmpId = "";
        $scope.EmpName = "";
        $scope.Salary = "";
    }
});

我正在寻找的是将新记录添加到数据库中。我想输入带有最新插入记录ID的EmpId元素。

我尝试使用下面的代码逻辑在Clearfields函数下面的AddUpdateEmployee函数中。但它选择了旧的empId。让我们说如果您在数据库中有empId 1,并且当您插入新记录时,我希望EmpId 2显示在EMpId输入html元素中。请建议我该怎么做

   var lastKey;
        var json = $scope.employees;
        for (var key in json) {
            if (json.hasOwnProperty(key)) {
                lastKey = key;
            }
        }
        $scope.EmpId = json[lastKey].EmpId;

1 个答案:

答案 0 :(得分:1)

您希望您的逻辑存在于此代码块中:

$scope.AddUpdateEmployee = function () {
    debugger;
    var Employee = {
        EmpId: $scope.EmpId,
        EmpName: $scope.EmpName,
        Salary: $scope.Salary
    };

    var getData = myService.AddEmp(Employee);
    getData.then(function (msg) {
        var getData2 = myService.getEmployees();
        getData2.then(function (emp) {
            $scope.employees = emp.data;
            // ADD YOUR LOGIC HERE
        }, function () {
            alert('Error in getting records');
        });

        alert(msg.data);
    }, function () {
        alert('Error in adding record');
    });
    ClearFields();
}

它选择了一个旧的id作为最后一个id,因为在你的逻辑被调用时你的代码还没有完成执行GET请求。