如何在文本框或 url 的任何字段中显示 ID？

Question

当我创建新员工时，它会重定向到编辑页面并传递员工 ID，其中我有不同的员工信息。

例如，我创建了一名员工，它被重定向到带有 emp id 的编辑页面。这里我需要添加员工家庭信息，但需要将empid保存在家庭信息表中。我只想知道我传递给编辑页面的 id，如何在家庭信息页面中显示？

这就是我将 id 传递给编辑页面的方式

员工控制器

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Employee employee)
        {
            if (ModelState.IsValid)
            {
                db.Employees.Add(employee);
                db.SaveChanges();

                return RedirectToAction("Edit", new { id = employee.Id });
            }



            return View(employee);

        }

在 url 中显示如下 https://localhost:44356/Employee/Edit/2

现在这个id - 2，我需要保存在familyinformation表中

员工家庭控制器

 [HttpPost]
        public JsonResult InsertEmployee([FromBody] EmployeFamily emp)
        {

            db.EmployeeFamily.Add(emp);
            db.SaveChanges();

            return Json(emp);
        }

家庭信息索引.cshtml

@{
    ViewBag.Title = "AngularJs Tutorial";
}
<style>

</style>
<h2>AngularJs Tutorial : CRUD operation</h2>
<div ng-app="mvcapp" ng-controller="DemoController">
    <form name="myform">
        <table class="table">
            <tr>
                <td>Name :</td>
                <td>
                    <input type="text" ng-model="empModel.name" name="Name" placeholder="Name" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Phone :</td>
                <td>
                    <input type="text" ng-model="empModel.phone" name="Phone" placeholder="phone" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Salary :</td>
                <td>
                    <input type="text" ng-model="empModel.salary" name="Salary"  placeholder="Salary" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Department :</td>
                <td>
                    <input type="text" ng-model="empModel.department" name="Department" placeholder="Department" class='form-control'  />
                </td>
            </tr>
            <tr>
                <td>Email :</td>
                <td>
                    <input type="text" ng-model="empModel.emailId" name="EmailId" class='form-control' placeholder="Email"  />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="Save" id="btnsave" ng-disabled="isDisabledsave" ng-click="myform.$valid && saveCustomer()" />
                    <input type="button" value="Update" id="btnupdate" ng-disabled="isDisabledupdate" ng-click="myform.$valid && updateCustomer()" />
                </td>
            </tr>
        </table>
    </form>
    <table>
        <tr>
            <th>S.No</th>

            <th>
                Name
            </th>
            <th>
                Phone
            </th>
            <th>
                Department
            </th>
            <th>
                Salary
            </th>
            <th>
                Email
            </th>
        </tr>
        {{employees}}
        <tr ng-repeat="empModel in employees">
            <td>{{empModel.id}}</td>
            <td>{{empModel.name }}</td>
            <td>{{empModel.phone }}</td>
            <td>{{empModel.department}}</td>
            <td>{{empModel.salary }}</td>
            <td>{{empModel.emailId}}</td>
            <td>
                <a href="" ng-click="getCustomer(empModel)" title="Delete Record">Edit</a>  |
                <a href="" ng-click="deleteemp(empModel)" title="Delete Record">
                    Delete
                </a>
            </td>
        </tr>
    </table>

</div>

<style>
    input[type=button][disabled=disabled] {
        opacity: 0.65;
        cursor: not-allowed;
    }

    table tr th {
        padding: 10px 30px;
    }

    table tr td {
        padding: 10px 30px;
    }
</style>
<script src="~/lib/angular/angular.js"></script>
@*<script src="~/lib/angular-route/angular-route.js"></script>*@
<script>
    var angular = angular.module('mvcapp', []);

    angular.controller('DemoController', function ($scope, $http) {

        GetAllData();
        $scope.isDisabledupdate = true;
        //Get All Employee
        function GetAllData() {
            $http.get('/Demo/GetEmployee').then(function (data) {
                $scope.employees = data.data;

            });
        };

        //Insert Employee
        $scope.saveCustomer = function () {

            $http({
                method: 'POST',
                url: '/Demo/InsertEmployee',
                data: JSON.stringify($scope.empModel),
                dataType: 'json'

            }).then(function () {
                console.log($scope.empModel);
                GetAllData();
                $scope.empModel = null;
                alert("Employee Added Successfully!!!");
            });
            GetAllData();
        };

        //Delete Employee
        $scope.deleteemp = function (empModel) {

            varIsConf = confirm('Want to delete ' + empModel.Name + '. Are you sure?');
            if (varIsConf) {
                $http.delete('/Demo/DeleteEmployee/' + empModel.id).then(function () {
                    $scope.errors = [];
                    GetAllData();
                    alert(empModel.name + " Deleted Successfully!!!");
                });
            }
        };

        //Get Employee by id to edit
        $scope.getCustomer = function (empModel) {
            $http.get('/Demo/getByid/' + empModel.id)
                .then(function (data, status, headers, config) {
                    //;
                    $scope.empModel = data.data;
                    GetAllData();
                    console.log(data);
                    $scope.isDisabledsave = true;
                    $scope.isDisabledupdate = false;
                });

        };

        //Update Employee
        $scope.updateCustomer = function () {

            $http({
                method: 'POST',
                url: '/Demo/UpdateEmployee',
                data: $scope.empModel,
                dataType: 'json'

            }).then(function () {
                GetAllData();
                $scope.isDisabledsave = false;
                $scope.isDisabledupdate = true;
                $scope.empModel = null;
                alert("Employee Updated Successfully!!!");
            });
        };

    });
</script>

Answer 1

如何从 Edit.cshtml 转到 FamilyInformation Index.cshtml？ ================================编辑================== ================
为您提供一些解决方案。

1.使用 javascript 从 URL 获取 id。
员工控制器创建操作

if (ModelState.IsValid)
{
    db.Employees.Add(employee);
    db.SaveChanges();

    //change this
    return new RedirectResult(Url.Action("Edit") + "#" + employee.Id);

 }

然后你会得到这样的网址https://localhost:44356/Employee/Edit#2

FamilyInformation Index.cshtml(Javascript 版本)

<script>
    $(document).ready(function () {
        var hash = window.location.hash; //#2
        var id = hash.replace('#', ''); //2
    });
</script>

添加这段 javscript 代码，就可以得到 id。
（抱歉我对 Angular 不熟悉，对于 Angular 你可以看这篇文章How do I parse URL params after a hash with Angularjs?）

FamilyInformation Index.cshtml(Angular 版本)

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-value="myVar">

</div>
<script>

var app = angular.module('myApp', []);
app.controller("myCtrl",["$scope","$location",function($scope,$location){
    var hashObject = $location.hash();
    $scope.myVar = hashObject;
    alert(hashObject);

}]);

</script>

2。使用 ViewBag 获取 id
员工控制器编辑操作
您可能在 Edit Action 中有 id 参数，将其放入 ViewBag.ID

public ActionResult Edit(int id)
{
    @ViewBag.ID = id;

    return View

} 

家庭信息索引.cshtml

<script>
    $(document).ready(function () {
        var id = '@ViewBag.ID';
    });
</script>

这段代码是 javascript，我不确定 Angular 是否以同样的方式工作。你可以阅读这个Can't pass ViewBag data to AngularJS

希望这些对你有帮助。