1
我是angularjs.s新來的,我正在構建一個非常簡單的web應用程序。代碼結構如下。我有一個簡單的視圖顯示候選人列表和數據庫中的候選人。Web API方法沒有從angularjs調用
我的JavaScript控制器:
appRoot.controller('CandidateController', function ($scope, $location, $resource) {
var searchcandidates={
Name:$("#txtname").val(),
Email:$("#txtemail").val()
};
var Listcandidates = $resource('/api/Candidate', {Name:$("#txtname").val(), Email:$("#txtemail").val()}, { update: { method: 'GET' } });
$scope.candidateslist = [];
Listcandidates.query(function (data) {
$scope.candidateslist.length = 0;
angular.forEach(data, function (CandidateData) {
$scope.candidateslist.push(CandidateData);
})
});
$scope.SearchCandidates = function() {
alert($("#txtname").val());
var list = $resource('/api/Candidate', { id: "2" });
}
var init = function() {
}
init();
});
我CSHTML:
@{
Layout = null;
}
<div class="FormHeader"><span class="searCandidate"></span>Search Result</div>
<div class="blank"></div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search:
<label>Name</label>
<input type="text" id="txtname" name="name" />
<label>Email</label>
<input type="text" id="txtemail" name="email" />
<input type="button" value="Save" ng-click="SearchCandidates()" />
</div>
<div class="span10">
<!--Body content-->
<ul class="candidates">
<li ng-repeat="candidate in candidateslist"
class="thumbnail phone-listing">
@*<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>*@
<div class="item">
<span class="green leftMrg">{{candidate.name}}</span>
<span class="leftMrg">{{candidate.skill}}</span>
<span class="grey leftMrg">Resume ID: {{candidate.id}}</span>
<div class="blank"></div>
<div class="blank"></div>
</div>
<div class="item">
<span class="bold">{{candidate.exporganization}} </span>
<span>Education:{{candidate.eduname}}</span>
<span>{{candidate.totalexperience}}</span>
<span>Preferred Location: {{candidate.location}}</span>
</div>
<p></p>
</li>
</ul>
</div>
</div>
</div>
我app.js:
var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource', 'angularStart.directives', 'kendo.directives']); //Define the main module
appRoot
.config(['$routeProvider', function ($routeProvider) {
//Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
$routeProvider
.when('/home', { templateUrl: '/home/main', controller: 'MainController' })
.when('/contact', { templateUrl: '/home/contact', controller: 'ContactController' })
.when('/about', { templateUrl: '/home/about', controller: 'AboutController' })
.when('/demo', { templateUrl: '/home/demo', controller: 'DemoController' })
.when('/candidate', { templateUrl: '/home/candidate', controller: 'CandidateController' })
.otherwise({ redirectTo: '/home' });
}])
.controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
$scope.$on('$routeChangeSuccess', function (e, current, previous) {
$scope.activeViewPath = $location.path();
});
}]);
我CandidateController.cs
public class CandidateController : ApiController
{
CandidateSearchDAL objCandidateSearchDAL = new CandidateSearchDAL();
// GET api/<controller>
public IEnumerable<CandidateModel> Get()
{
List<CandidateModel> lstCandidates = objCandidateSearchDAL.GetSearchCandidates();
return lstCandidates;
}
// GET api/<controller>/5
public string Get(string id)
{
return "value";
}
// POST api/<controller>
public void Post(string Name, string Email)
{
}
// PUT api/<controller>/5
public void Put(int id, [FromBody]string value)
{
}
// DELETE api/<controller>/5
public void Delete(int id)
{
}
}
頁面加載時第一次顯示所有候選人完美地調用控制器的IEnumerable Get()方法。但是當我點擊保存按鈕時,它不能調用控制器API。
請澄清:你是說你的SearchCandidates()函數從不叫什麼名字?或者你說SearchCandidates()被調用,但它永遠不會調用你的服務器? – Martin