如何在AngularJs的编辑视图中显示数据

我对AngularJS是新手。我正在一个使用ASP.NETMVC和AngularJS的网站上工作。该网站提供了添加/更新/删除/检索的基本功能。我使用角度路由在站点中导航。路由代码如下所示：

var app = angular.module("paymentApp", ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "payment/EditPayment/1",
            controller: "paymentController"
        })
        .when("/MakePayment", {
            templateUrl: "payment/MakePayment",
            controller: "paymentController"
        })
        .when("/SearchPayment", {
            templateUrl: "payment/SearchPayment",
            controller: "paymentController"
        })
        .when("/EditPayment/:payid", {
            templateUrl: function (params) { return "payment/EditPayment/" + params.payid },
            controller: "paymentController"
        })
        .when("/DeletePayment/:id", {
            templateUrl: function (params) { return "payment/DeletePayment/" + params.id },
            controller: "paymentController"
        })
        .when("/Flush", {
            templateUrl: "payment/InvalidateCacheForIndexAction",
            controller: "paymentController"
        });
    $locationProvider.html5Mode(true).hashPrefix('');
});

<h2>Edit Payment</h2>

<div ng-controller="paymentController" class="row">
    <div class="col-md-8">
        <section id="paymentForm">
            <form class="form-horizontal">

                @Html.AntiForgeryToken()
                <h4>Edit payment</h4>
                <hr />
                <span class="text-danger" ng-show="false">Validation error summary</span>
                <div ng-show="confCode">
                    <label style="background-color:darkseagreen;">Payment has been made successfully. Confirmation code: {{confCode}}</label>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Payment Id</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="paymentId" readonly />
                        <span class="text-danger" ng-show="false">Payment Id required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Biller Id</label>
                    <div class="col-md-10" name="BillerId" id="BillerId">
                        <select class="form-control" ng-model="billerId" ng-init="billerId='0'">
                            <option disabled hidden value="0">Select biller</option>
                            <option value="1">Idea</option>
                            <option value="2">Airtel</option>
                            <option value="3">Vodafone</option>
                            <option value="4">Jio</option>
                        </select>
                        <span class="text-danger" ng-show="false">Biller Id required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Bill Account</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" ng-model="billAccount" />
                        <span class="text-danger" ng-show="false">Bill account required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Payment amount</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="paymentAmount" />
                        <span class="text-danger" ng-show="false">Payment amount required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Fee amount</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="feeAmount" value="1.0" readonly />
                        <span class="text-danger" ng-show="false">Fee amount required</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">Platform</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" ng-model="platform" value="1.0" readonly />
                        <span class="text-danger" ng-show="false">Platform required</span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Pay" class="btn btn-default" ng-click="makePayment()" />
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

从上面给出的代码可以看出，我正在调用MVC操作方法来显示MakePayment/SearchPayment视图，这些视图没有任何预填充的数据可显示，因为用户需要在这些视图中输入数据。但是，EditPayment视图将包含先前支付的数据。我的路由代码只是将不带值地拉入EditPayment视图。我不确定在该视图中显示现有数据的正确方法是什么

我的EditPayment.cshtm代码如下所示：

var app = angular.module("paymentApp", ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "payment/EditPayment/1",
            controller: "paymentController"
        })
        .when("/MakePayment", {
            templateUrl: "payment/MakePayment",
            controller: "paymentController"
        })
        .when("/SearchPayment", {
            templateUrl: "payment/SearchPayment",
            controller: "paymentController"
        })
        .when("/EditPayment/:payid", {
            templateUrl: function (params) { return "payment/EditPayment/" + params.payid },
            controller: "paymentController"
        })
        .when("/DeletePayment/:id", {
            templateUrl: function (params) { return "payment/DeletePayment/" + params.id },
            controller: "paymentController"
        })
        .when("/Flush", {
            templateUrl: "payment/InvalidateCacheForIndexAction",
            controller: "paymentController"
        });
    $locationProvider.html5Mode(true).hashPrefix('');
});

<h2>Edit Payment</h2>

<div ng-controller="paymentController" class="row">
    <div class="col-md-8">
        <section id="paymentForm">
            <form class="form-horizontal">

                @Html.AntiForgeryToken()
                <h4>Edit payment</h4>
                <hr />
                <span class="text-danger" ng-show="false">Validation error summary</span>
                <div ng-show="confCode">
                    <label style="background-color:darkseagreen;">Payment has been made successfully. Confirmation code: {{confCode}}</label>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Payment Id</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="paymentId" readonly />
                        <span class="text-danger" ng-show="false">Payment Id required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Biller Id</label>
                    <div class="col-md-10" name="BillerId" id="BillerId">
                        <select class="form-control" ng-model="billerId" ng-init="billerId='0'">
                            <option disabled hidden value="0">Select biller</option>
                            <option value="1">Idea</option>
                            <option value="2">Airtel</option>
                            <option value="3">Vodafone</option>
                            <option value="4">Jio</option>
                        </select>
                        <span class="text-danger" ng-show="false">Biller Id required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Bill Account</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" ng-model="billAccount" />
                        <span class="text-danger" ng-show="false">Bill account required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Payment amount</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="paymentAmount" />
                        <span class="text-danger" ng-show="false">Payment amount required</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">Fee amount</label>
                    <div class="col-md-10">
                        <input type="number" class="form-control" ng-model="feeAmount" value="1.0" readonly />
                        <span class="text-danger" ng-show="false">Fee amount required</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-md-2 control-label">Platform</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" ng-model="platform" value="1.0" readonly />
                        <span class="text-danger" ng-show="false">Platform required</span>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Pay" class="btn btn-default" ng-click="makePayment()" />
                    </div>
                </div>
            </form>
        </section>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

---

此外，我使用相同的控制器进行添加/更新/编辑/删除。这是正确的方法吗？

首先，使用同一个控制器进行添加/更新/编辑/删除是否是一种好的/坏的方法主要是一个观点问题；在我看来，当你计划做一个大系统，或者至少你计划将你的应用扩展到一个更大的系统时，这不是最好的方法。它变得杂乱无章，毫无成效，因为许多功能都在一起，即使它们有时差异很大。这应该在您的特定情况下进行评估，并在重用代码之间找到一个平衡点，使事情变得清晰和独立，始终寻找整洁、干净和可重用的代码

关于如何填充编辑视图，您只需从路由获取

payid

，并使用它从后端检索信息

顺序应该是这样的：

• 用户单击编辑付款，（将

  payid

  添加到路线）

• 加载EditPayment视图（因此这将设置

  paymentController

  ）

• 在加载

  paymentController

  时，您可以在如下路径上检查

  payid

  ：

  $route.current.params.payid

• 如果存在

  $route.current.params.payid

  ，这意味着您的视图应该加载与该付款相关的数据（为了获取该数据，您可能已经提供了服务）

• 从后端检索数据后，将其绑定到视图模型

• 完成了！On-EditPayment现在应该显示与特定付款相关的数据

---

首先，使用同一个控制器进行添加/更新/编辑/删除是否是一种好的/坏的方法主要是一个观点问题；在我看来，当你计划做一个大系统，或者至少你计划将你的应用扩展到一个更大的系统时，这不是最好的方法。它变得杂乱无章，毫无成效，因为许多功能都在一起，即使它们有时差异很大。这应该在您的特定情况下进行评估，并在重用代码之间找到一个平衡点，使事情变得清晰和独立，始终寻找整洁、干净和可重用的代码

关于如何填充编辑视图，您只需从路由获取

payid

，并使用它从后端检索信息

顺序应该是这样的：

• 用户单击编辑付款，（将

  payid

  添加到路线）

• 加载EditPayment视图（因此这将设置

  paymentController

  ）

• 在加载

  paymentController

  时，您可以在如下路径上检查

  payid

  ：

  $route.current.params.payid

• 如果存在

  $route.current.params.payid

  ，这意味着您的视图应该加载与该付款相关的数据（为了获取该数据，您可能已经提供了服务）

• 从后端检索数据后，将其绑定到视图模型

• 完成了！On-EditPayment现在应该显示与特定付款相关的数据

---

感谢您的专家解决方案！我还有一个问题。如果你能回答，那会很有帮助的。如果我没有使用AngularJS，将只有一个对服务器的调用（MVC action method调用），但是使用AngularJS将有两个调用-第一个调用将获得空视图，第二个调用将提取数据。这对性能是否有害？解释可能太大，无法发表评论，但我们必须考虑SPA的概念（请看一看），它代表了我们向用户表示web应用程序的不同方式。与此方法相反的是，所有网页都由服务器呈现，就像SPA之前一样。这两种方法都是完全有效的选择，您只需根据每种方法的原理分析哪种方法更适合您的需要。简单地说，使用SPA，您只需呈现一次web应用程序并按需加载所有部分视图，这可能会产生许多对后端服务的asyn调用，是的，但html在大多数情况下仅呈现一次，我更喜欢这个。如果我们不使用SPA，服务器必须返回包含数据的页面，这可能比只获取json并在视图（html）上打印数据要慢。正如我之前所说，你必须仔细评估你需要什么（我知道有时并不容易）。我只是推荐你，在网上搜索，阅读，学习，时刻牢记最佳实践。现在有很多选择。感谢您的专家解决方案！我还有一个问题。如果你能回答，那会很有帮助的。如果我没有使用AngularJS，将只有一个对服务器的调用（MVC action method调用），但是使用AngularJS将有两个调用-第一个调用将获得空视图，第二个调用将提取数据。这对性能是否有害？解释可能太大，无法发表评论，但我们必须考虑SPA的概念（请看一看），它代表了我们向用户表示web应用程序的不同方式。与…相反