最新のデータでhtml入力要素を再バインドする方法

Question

ここでは、単純なフォームを使用して、エンティティフレームワークを使用してSQL Serverにデータを挿入しています。私はクライアント側のMVCとビジネスロジックの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"; 
      } 
     } 
    } 
} 

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

}); 

Index.cshtml私が探しています何

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 input html要素に表示したいとしましょう。私は

​​

Answer 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リクエストの実行を終了しました。