I have wcf service with method GetLayoutData. Following code i have written for this:
var app = angular.module('bundleModuleApp', ['ngResource', 'mydirectives']);
app.factory('masterResource', function ($resource)
{
var src = $resource("../BundleService/BundleComponents.svc/GetLayoutData/:bundlename", { bundlename: "#bundlename" },
{
GetData: { method: "GET", params: {}, isArray: false },
GetDataById: { method: "GET", params: { bundlename: "Iotasol" }, isArray: false }
});
return src;
});
function LayoutController($scope, masterResource) {
$scope.LayoutBean = masterResource.GetDataById();
}
Now i want to specify full url of service like:
http://www.abc.com/BundleService/BundleComponents.svc/GetLayoutData/:bundlename
instead of:
../BundleService/BundleComponents.svc/GetLayoutData/:bundlename
Can any one tell me how can I pass full url of service dynamically
Related
I'm using the recognizeText REST endpoint from javascript running locally on my dev machine. I can successfully call the endpoint, get the operation-location url for the result and send a GET request to that url.
The issue is the return from the operation-location url is 200 success (meaning the operation has completed and doesn't need more time), but the body of the result is always empty.
How can I get the extracted text from the response?
My code:
var subscriptionKey: string = "my key";
var endpoint: string = "https://eastus.api.cognitive.microsoft.com/";
var uriBase: string = endpoint + "/vision/v2.0/recognizeText?mode=Printed";
const fetchData = {
headers: {
"Content-Type": "application/json",
"Ocp-Apim-Subscription-Key": subscriptionKey
},
body:
'{"url": "https://www.bing.com/th/id/OIP.nZoyhANat4WNndv0jeoXFAHaLp?w=183&h=289&c=7&o=5&dpr=1.5&pid=1.7"}',
method: "POST"
};
fetch(uriBase, fetchData).then(data => {
var operationLocation = data.headers.get("Operation-Location");
if (operationLocation) {
const resultFetchData = {
headers: {
"Content-Type": "application/json",
"Ocp-Apim-Subscription-Key": subscriptionKey
},
method: "GET"
};
setTimeout(function(operationLocation, resultFetchData) {
fetch(operationLocation, resultFetchData).then(resultData => {
alert(JSON.stringify(resultData, null, 2));
});
}, 10000);
}
});
}
There is something wrong with your fetch request code block, try this :
fetch(uriBase, fetchData).then(data => {
var operationLocation = data.headers.get("Operation-Location");
if (operationLocation) {
const resultFetchData = {
headers: {
"Content-Type": "application/json",
"Ocp-Apim-Subscription-Key": subscriptionKey
},
method: "GET"
};
setTimeout(()=> {
fetch(operationLocation, resultFetchData).then(resultData => {
return resultData.json();
}).then((data)=>{
console.log(JSON.stringify(data, null, 2));
});
},10000);}
});
Result :
var app = angular.module('myApp2', []);
app.controller('myCtrl2', function($scope, $http,$window)
{
$scope.getLogdetails = function (postCredential) {
//alert("hello check data");
$http({
method: 'Post',
url:'https://localhost:44339/Signs/datacheck',
data: $scope.postdata,
params: { username: $scope.username, password: $scope.password }
}).then(function mysucess(response) {
console.log(response, "response");
if (response.data =="true")
{
//console.log("save")
//console.log(response.data,"sar");
window.location = '/homepage.html?username=' + name;
//console.log(response.data,"");
} else {
alert("username name passords incorect");
}
})
}
});
this my js file
.
getting this error as in the screenenter image description hereshot
Here is my WebAPI POST method which expects BookingDetail and BookingVenue objects:
[HttpPost]
[ValidateUserSession]
public JsonResult CheckBooking(BookingDetail BookingDetail, BookingVenue objBV)
{
try
{
if (BookingDetail != null && objBV != null)
{
bool result = Ibook.checkBookingAvailability(BookingDetail, objBV);
if (result == false)
{
return Json("NotAvailable");
}
else
{
return Json("Available");
}
}
else
{
return Json("Available");
}
}
}
Angular code from where I'm getting the values from UI and making a post passing these 2 objects:
this.checkbookingavailability = function (Book) {
var BookingVenueObj = {
EventTypeID: Book.EventSelected,
VenueID: Book.Venueselected,
GuestCount: Book.NoofGuest,
};
var BookingDetailObj = {
BookingDate: Book.BookingDate
};
var response =
$http({
method: "POST",
url: "/Booking/CheckBooking/",
headers: {
'RequestVerificationToken': $cookies.get('EventChannel')
},
data: { BookingDetail: BookingDetailObj, BookingVenue: BookingVenueObj }
});
return response;
}
Problem is in my WebAPI code, both the objects as null
You can only pass one object in the body so I would recommend you to create a new DTO "BookingDto" for that containing BookingDetail and BookingVenue as member and change the signature of your WebAPI to this:
[HttpPost]
[ValidateUserSession]
public JsonResult CheckBooking([FromBody]BookingDto bookingObj)
You need to serialize JSON object which you are sending to server just by calling JSON.stringify over object.
var response =
$http({
method: "POST",
url: "/Booking/CheckBooking/",
headers: {
'RequestVerificationToken': $cookies.get('EventChannel')
},
data: JSON.stringify({
BookingDetail: BookingDetailObj,
BookingVenue: BookingVenueObj
})
});
return response;
As dear Pankaj mentioned you need to Serialize your data objects with Stringify function in javascript, Also consider that you must mention that this http request contain Application/JSON content. All these can be shown here:
var response =
$http({
method: "POST",
url: "/Booking/CheckBooking/",
headers: {
'RequestVerificationToken': $cookies.get('EventChannel'),
'Content-Type' : 'application/json'
},
data: JSON.stringify({
BookingDetail: BookingDetailObj,
BookingVenue: BookingVenueObj
})
});
return response;
How to pass json object to WebApi as GET using $resource in angular?
My service:
pmsService.factory('Widgets', ['$resource', function ($resource) {
var data = $resource('/api/:path/:id', {
path: '#path'
}, {
getWidgets: {
params: { path: 'widgets' },
method: "GET",
isArray: true
},
getWidget: {
params: { path: 'widgets' },
method: "GET",
isArray: false
},
getWidgetData: {
params: { path: 'widgets' },
method: "POST"
},
});
return data;
In angular controller:
Widgets.getWidgetData({ id: $scope.widget.id}, $scope.paramValues ).$promise.then(function (data) {
$scope.widget.Data = data;
$log.debug($scope.widget.Data);
});
In Controller:
[Route("api/widgets/{id}")]
[HttpPost]
public Object Get(int id, dynamic prms)
{
....
}
This should sends 2 parameters to WebApi Controller, id and list of parameters for the Widget. Fiddler shows:
/api/widgets/31/%5Bobject%20Object%5D
So routing works correctly, but the object prms I received is empty.
I don't really understand what you're trying to do there but
if you're trying to achieve a url parameter as in /api/widgets/31?foo=bar, then this is how I would do it.
angular
.module('myMod', ['$resource'])
.factory('Widgets',
['$resource', function ($resource) {
return $resource(
'/api/:path/:id/',
{'path': '#path'},
{
getWidgets: {
params: {path: 'widgets'},
method: "GET",
isArray: true
},
getWidget: {
params: {path: 'widgets'},
method: "GET",
isArray: false
},
getWidgetData: {
params: {path: 'widgets'},
method: "GET",
isArray: false
}
})
}])
.controller('WidgetsController',
['$scope', 'Widgets', function ($scope, Widgets) {
$scope.widget = Widgets.getWidget({
id: 1,
foo: 'bar'
});
}]);
That would a make GET request to /api/widgets/1?foo=bar. You can include a nested object or an array like this and it will be serialised and appended to the url
// In controller
.controller('WidgetsController',
['$scope', 'Widgets', function ($scope, Widgets) {
$scope.widget = Widgets.getWidget({
id: 1,
fields: ['name', 'price']
});
}]);
This would make a GET request to /api/widgets/1?fields=name&fields=price.
I usually prefer to use the $httpParamSerializerJQLike serializer to serialize the parameters in this form /api/widgets/1?fields[]=name&fields[]=price which in my experience is less problematic. To use this serializer, you need to configure $http like so
angular
.module('myMod')
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.paramSerializer = '$httpParamSerializerJQLike';
}])
Hope that helps
views.list = Ractive.extend({/*...*/});
var Content = Ractive.extend({
template: '#template-content',
components: {
//view: views['list']
},
onrender: function() {
/* call this.request */
},
request: function(route) {
var self = this;
$.ajax({
url: route,
type: 'GET',
data: {},
dataType: 'json',
success: function(data){
self.components.view = views[data.view];
}
});
}
});
Ajax request returns {view:'list'}. I write in the console: "Content.components.view" and see:
function ( options ) {
initialise( this, options );
}
But "Content.findComponent('view')" returns "null".
It will work if I uncomment the line "//view: views['list']" in the components. How to dynamically change the component?
Update 1:
I thought I can do this:
var Content = Ractive.extend({
components: {
// Aaaand add listener for data.view?
view: function(data) {
return views[data.view];
// But no, it is not updated when changes data.view ...
}
},
data: {},
oninit: function() {
var self = this;
self.set('view', 'list');
},
});
Not work.. Why then need "data" argument?
I won :)
// Create component globally
Ractive.components.ListView = Ractive.extend({});
// Create ractive instance
var Content = Ractive.extend({
template: '#template-content',
partials: {
view: 'Loading...' // So... default
},
oninit: function() {
var self = this;
$.ajax({
...
success: function(data){
// Hardcore inject component
self.partials.view = '<'+data.view+'/>';
// Little hack for update partial in template
self.set('toggle', true);
self.set('toggle', false);
}
});
},
});
In Content template:
{{^toggle}}{{>view}}{{/}}
It's works-fireworks!