user1030181 user1030181 -4 years ago 132
HTML Question

How to rebind html input elements with latest data

Here I am using simple form to insert data into sql server using entity framework. I am using angularJS on client side and MVC in business logic.

My 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 = "";
}
});


What I am looking for is when new record is added into database. I want to input EmpId element with latest insert record id.

What I tried was used this below code logic inside AddUpdateEmployee function below clearfields function. But it picks old empId. Let's say if you have empId 1 in database and when you insert new record I want EmpId 2 to be display in EMpId input html element. Please suggest how can I do that

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

Answer Source

You want your logic to exist in this block of code:

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

It was picking an old id as the last id, because your code hasn't finished executing the GET request by the time your logic was called.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download