我是AngularJS的新手。我正在使用ASP.Net MVC和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('');
});
您可以从上面给出的代码中找出我调用MVC操作方法来显示MakePayment / SearchPayment视图，这些视图没有任何预先填充的数据显示，因为用户需要在这些视图中输入数据。但是，EditPayment视图将具有先前付款的数据。我的路由代码只是将没有值的EditPayment视图拉出来。我不确定在该视图中显示现有数据的正确方法是什么。
我的EditPayment.cshtm代码如下：
<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")
我的paymentController.js看起来像：
app.controller("paymentController", function ($scope, $rootScope, $routeParams, paymentService) {
$scope.paymentId;
$scope.billerId;
$scope.billAccount;
$scope.paymentAmount;
$scope.feeAmount=1.0;
$scope.platform = 1;
$scope.confCode;
$scope.makePayment = function () {
var payment = {
BillerId: $scope.billerId,
BillAccount: $scope.billAccount,
PayAmt: $scope.paymentAmount,
FeeAmt: $scope.feeAmount,
Platform: $scope.platform,
};
paymentService.makePayment(payment).then(function (response) {
$scope.confCode = response.data.ConfCode;
});
};
$scope.searchPayment = function () {
var searchPay = {
BillerId: $scope.billerId,
BillAccount: $scope.billAccount
};
paymentService.searchPayment(searchPay).then(function (response) {
$scope.payments = response.data;
});
};
});
另外，我使用相同的控制器进行添加/更新/编辑/删除。这是正确的做法吗？
答案 0 :(得分：2)
首先，说使用相同的控制器进行添加/更新/编辑/删除是一个好/坏的方法主要是透视问题;在我看来，当你计划建立一个大系统时，这不是最好的方法，或者至少你计划将你的应用程序扩展到更大的系统。它变得混乱和非生产性，因为许多功能在一起，即使它们有时相差很大。这应该在您的特定情况下进行评估，并在重用代码之间找到平衡，并使事情清晰和分离，始终寻找一个整洁，干净和可重用的代码。
关于如何填充编辑视图，您只需从路径中获取payid并使用它从后端检索信息。
顺序应该是这样的：
用户点击修改付款，（您将payid添加到路线中）
您加载 EditPayment 视图（因此这会取代paymentController）
在加载paymentController时，您在路线上检查payid，如下所示：$route.current.params.payid
如果$route.current.params.payid存在，则表示您的视图应加载与该付款相关的数据（为了获取此数据，您可能已经提供了服务）
从后端检索数据后，将其绑定到您的视图模型。
完成！现在， EditPayment 应显示与该特定付款相关的数据。