javascript - 405 (Method Not Allowed) in Angular JS With WCF Service -
currently working on wcf project. consuming wcf project angular js application when run application not provide error. there errors when launch developer tools in google chrome , cannot insert, update , delete etc. it's showing following errors...... me correct errors grateful.
?o=3&g=ec0825c4-90a4-2692-d257-cd2c2b565912&s=1a2c77e8-0498-4a11-b8b8-d740dbec71c4&z=1403834305:2 uncaught syntaxerror: unexpected token < 2angular.js:12701 options http://localhost:50028/studentservice.svc/addnewstudent 405 (method not allowed) index:1 xmlhttprequest cannot load http://localhost:50028/studentservice.svc/addnewstudent. response preflight has invalid http status code 405 modules.js:52 error occured[object object] index:1 http://localhost:50028/studentservice.svc/getallstudent/ 400 (bad request) angular.js:14642 referenceerror: $log not defined @ modules.js:18 @ angular.js:17000 @ m.$digest (angular.js:18182) @ m.$apply (angular.js:18480) @ l (angular.js:12501) @ xmlhttprequest.s.onload (angular.js:12655) "possibly unhandled rejection: {}" her code in angular js ...
/// <reference path="../angular.min.js" /> var app; (function () { app = angular.module("restclientmodule", []); app.controller("crud_angularjs_restcontroller", function ($scope, crud_angularjs_restservice) { $scope.opertype = 1; //1 mean new entry getallrecords(); //to records function getallrecords() { var promiseget = crud_angularjs_restservice.getallstudent(); promiseget.then(function (pl) { $scope.students = pl.data }, function (errorpl) { $log.error('some error in getting records.', errorpl); }); } //to clear input controls. function clearmodels() { $scope.opertype = 1; $scope.studentid = ""; $scope.name = ""; $scope.email = ""; $scope.class = ""; $scope.enrollyear = ""; $scope.city = ""; $scope.country = ""; } //to create new record , edit existing record. $scope.save = function () { var student = { name: $scope.name, email: $scope.email, class: $scope.class, enrollyear: $scope.enrollyear, city: $scope.city, country: $scope.country }; if ($scope.opertype === 1) { var promisepost = crud_angularjs_restservice.post(student); promisepost.then(function (pl) { $scope.studentid = pl.data.studentid; getallrecords(); clearmodels(); }, function (err) { console.log("some error occured" + err); }); } else { //edit record debugger; student.studentid = $scope.studentid; var promiseput = crud_angularjs_restservice.put($scope.studentid, student); promiseput.then(function (pl) { $scope.message = "student updated successfuly"; getallrecords(); clearmodels(); }, function (err) { console.log("some error occured." + err); }); } }; //to student detail on base of student id $scope.get = function (student) { var promisegetsingle = crud_angularjs_restservice.get(student.studentid); promisegetsingle.then(function (pl) { var res = pl.data; $scope.studentid = res.studentid; $scope.name = res.name; $scope.email = res.email; $scope.class = res.class; $scope.enrollyear = res.enrollyear; $scope.city = res.city; $scope.country = res.country; $scope.opertype = 0; }, function (errorpl) { console.log('some error in getting details', errorpl); }); } //to delete record $scope.delete = function (student) { var promisedelete = crud_angularjs_restservice.delete(student.studentid); promisedelete.then(function (pl) { $scope.message = "student deleted successfuly"; getallrecords(); clearmodels(); }, function (err) { console.log("some error occured." + err); }); } }); app.service("crud_angularjs_restservice", function ($http) { //create new record this.post = function (student) { var request = $http({ method: "post", url: "http://localhost:50028/studentservice.svc/addnewstudent", data: student }); return request; } //update record this.put = function (studentid, student) { debugger; var request = $http({ method: "put", url: "http://localhost:50028/studentservice.svc/updatestudent", data: student }); return request; } this.getallstudent = function () { return $http.get("http://localhost:50028/studentservice.svc/getallstudent"); }; //get single records this.get = function (studentid) { return $http.get("http://localhost:50028/studentservice.svc/getstudentdetails/" + studentid); } //delete record this.delete = function (studentid) { var request = $http({ method: "delete", url: "http://localhost:50028/studentservice.svc/deletestudent/" + studentid }); return request; } }); })(); here wcf service code ......
[servicecontract] public interface istudentservice { [operationcontract] [webinvoke(method = "get", requestformat = webmessageformat.json, responseformat = webmessageformat.json, uritemplate = "/getallstudent/")] list<studentdatacontract> getallstudent(); [operationcontract] [webget(requestformat = webmessageformat.json, responseformat = webmessageformat.json, uritemplate = "/getstudentdetails/{studentid}")] studentdatacontract getstudentdetails(string studentid); [operationcontract] [webinvoke(method = "post", requestformat = webmessageformat.json, responseformat = webmessageformat.json, uritemplate = "/addnewstudent")] bool addnewstudent(studentdatacontract student); [operationcontract] [webinvoke(method = "put", requestformat = webmessageformat.json, responseformat = webmessageformat.json, uritemplate = "/updatestudent")] void updatestudent(studentdatacontract contact); [operationcontract] [webinvoke(method = "delete", requestformat = webmessageformat.json, responseformat = webmessageformat.json, uritemplate = "deletestudent/{studentid}")] void deletestudent(string studentid); } } here implementation of method of wcf service
using system; using system.collections.generic; using system.linq; using system.runtime.serialization; using system.servicemodel; using system.text; namespace wcf_rest_service { // note: can use "rename" command on "refactor" menu change class name "studentservice" in code, svc , config file together. // note: in order launch wcf test client testing service, please select studentservice.svc or studentservice.svc.cs @ solution explorer , start debugging. public class studentservice : istudentservice { studentmanagemententities ctx; public studentservice() { ctx = new studentmanagemententities(); } public list<studentdatacontract> getallstudent() { var query = (from in ctx.students select a).distinct(); list<studentdatacontract> studentlist = new list<studentdatacontract>(); query.tolist().foreach(rec => { studentlist.add(new studentdatacontract { studentid = convert.tostring(rec.studentid), name = rec.name, email = rec.email, enrollyear = rec.enrollyear, class = rec.class, city = rec.city, country = rec.country }); }); return studentlist; } public studentdatacontract getstudentdetails(string studentid) { studentdatacontract student = new studentdatacontract(); try { int emp_id = convert.toint32(studentid); var query = (from in ctx.students a.studentid.equals(emp_id) select a).distinct().firstordefault(); student.studentid = convert.tostring(query.studentid); student.name = query.name; student.email = query.email; student.enrollyear = query.enrollyear; student.class = query.class; student.city = query.city; student.country = query.country; } catch (exception ex) { throw new faultexception<string> (ex.message); } return student; } public bool addnewstudent(studentdatacontract student) { try { student std = ctx.students.create(); std.name = student.name; std.email = student.email; std.class = student.class; std.enrollyear = student.enrollyear; std.city = student.city; std.country = student.country; ctx.students.add(std); ctx.savechanges(); } catch (exception ex) { throw new faultexception<string> (ex.message); } return true; } public void updatestudent(studentdatacontract student) { try { int stud_id = convert.toint32(student.studentid); student std = ctx.students.where(rec => rec.studentid == stud_id).firstordefault(); std.name = student.name; std.email = student.email; std.class = student.class; std.enrollyear = student.enrollyear; std.city = student.city; std.country = student.country; ctx.savechanges(); } catch (exception ex) { throw new faultexception<string> (ex.message); } } public void deletestudent(string studentid) { try { int stud_id = convert.toint32(studentid); student std = ctx.students.where(rec => rec.studentid == stud_id).firstordefault(); ctx.students.remove(std); ctx.savechanges(); } catch (exception ex) { throw new faultexception<string> (ex.message); } } } } here html code ...
@{ layout = null; } <!doctype html> <html data-ng-app="restclientmodule"> <head title="asas"> <title></title> <script src="~/scripts/angular.min.js"></script> <script src="~/scripts/myscripts/modules.js"></script> </head> <body> <table id="tblcontainer" data-ng-controller="crud_angularjs_restcontroller"> <tr> <td> <table style="border: solid 2px green; padding: 5px;"> <tr style="height: 30px; background-color: skyblue; color: maroon;"> <th></th> <th>id</th> <th>name</th> <th>email</th> <th>class</th> <th>year</th> <th>city</th> <th>country</th> <th></th> <th></th> </tr> <tbody data-ng-repeat="stud in students"> <tr> <td></td> <td><span>{{stud.studentid}}</span></td> <td><span>{{stud.name}}</span></td> <td><span>{{stud.email}}</span></td> <td><span>{{stud.class}}</span></td> <td><span>{{stud.enrollyear}}</span></td> <td><span>{{stud.city}}</span></td> <td><span>{{stud.country}}</span></td> <td> <input type="button" id="edit" value="edit" data-ng-click="get(stud)" /> </td> <td> <input type="button" id="delete" value="delete" data-ng-click="delete(stud)" /> </td> </tr> </tbody> </table> </td> </tr> <tr> <td> <div style="color: red;">{{message}}</div> <table style="border: solid 4px red; padding: 2px;"> <tr> <td></td> <td> <span>student id</span> </td> <td> <input type="text" id="studentid" readonly="readonly" data-ng-model="studentid" /> </td> </tr> <tr> <td></td> <td> <span>student name</span> </td> <td> <input type="text" id="sname" required data-ng-model="name" /> </td> </tr> <tr> <td></td> <td> <span>email</span> </td> <td> <input type="text" id="semail" required data-ng-model="email" /> </td> </tr> <tr> <td></td> <td> <span>class</span> </td> <td> <input type="text" id="sclass" required data-ng-model="class" /> </td> </tr> <tr> <td></td> <td> <span>enrollement year</span> </td> <td> <input type="text" id="senrollyear" required data-ng-model="enrollyear" /> </td> </tr> <tr> <td></td> <td> <span>city</span> </td> <td> <input type="text" id="scity" required data-ng-model="city" /> </td> </tr> <tr> <td></td> <td> <span>country</span> </td> <td> <input type="text" id="scountry" required data-ng-model="country" /> </td> </tr> <tr> <td></td> <td></td> <td> <input type="button" id="save" value="save" data-ng-click="save()" /> <input type="button" id="clear" value="clear" data-ng-click="clear()" /> </td> </tr> </table> </td> </tr> </table> </body> </html> here screen shot when run application.. 
first, need use * in [servicecontract]. this:
[webinvoke(method = "*" that way, allow method receive options requests.
then should add web.config:
<httpprotocol> <customheaders> <add name="access-control-allow-origin" value="*"/> <add name="access-control-allow-headers" value="x-requested-with,content-type, accept" /> </customheaders> </httpprotocol> do not forgot handle options requests. solve it:
public list<studentdatacontract> getallstudent() { if (httpcontext.current.request.httpmethod == "options") return null; var query = (from in ctx.students select a).distinct(); list<studentdatacontract> studentlist = new list<studentdatacontract>(); query.tolist().foreach(rec => { studentlist.add(new studentdatacontract { studentid = convert.tostring(rec.studentid), name = rec.name, email = rec.email, enrollyear = rec.enrollyear, class = rec.class, city = rec.city, country = rec.country }); }); return studentlist; } that's it. luck.
Comments
Post a Comment