Url.Link() not generating proper link with querystring - asp.net-web-api

I'm creating an ASP.NET Core WebAPI that has a route with an optional parameter. In the return result I am embedding links to "previous" and "next" pages. I'm using Url.Link() to generate these links, but the link created is not generating a proper URL.
Example code:
[HttpGet("{page:int?}", Name = "GetResultsRoute")]
public IActionResult GetResults([FromQuery]int page = 0)
{
...
var prevUrl = Url.Link("GetResultsRoute", new { page = page - 1 });
var nextUrl = Url.Link("GetResultsRoute", new { page = page + 1 });
...
The URL generated will be something like:
"http://localhost:65061/api/results/1"
What I want is:
"http://localhost:65061/api/results?page=1"
What am I doing wrong here?

I think you are doing everything right here. It just MVC is able to match your [page] value in Url.Link to the route constraint HttpGet("{page:int?}", thus appending it as a part of the URL path, e.g. results/1
From the docs - Ambient values that don't match a parameter are ignored, and ambient values are also ignored when an explicitly-provided value overrides it, going from left to right in the URL. Values that are explicitly provided but which don't match anything are added to the query string.
In your case,
var prevUrl = Url.Link("GetResultsRoute", new { pageX = page - 1 });
would result in
http://localhost:65061/api/results?pageX=1
So ether append the query string parameter yourself, remove the constraint, or switch to MVC recommend format of URL, e.g. /api/results/xxx

Related

Where is my fault? PUT method not allowed

Help me please to find my fault?
my data return
my update method
and then this my edit
editHandler(item) {
this.inputType = "Ubah";
this.editId = item.id_profile;
this.form.noinduk = item.noinduk;
this.form.tanggal = item.tanggal;
this.form.tempat = item.tempat;
this.form.jeniskelamin = item.jeniskelamin;
this.form.asalsekolah = item.asalsekolah;
this.form.tahun = item.tahun;
},
my problem
my route/api
enter image description here
You are not passing id as parameter. editId should have value. While it is empty, your route trying to access:
Route::get('Profile', 'Api\ProfileController#index');
route. And as error said it is not allowed. Because it supports only get method. Url should look like:
http://127.0.0.1:8000/api/Profile/357
357 may be any number that represents id

Magento Configurable Product Overwrite Defaults by URL

I was browsing through js/varien/configurable.js and noticed a comment that said, // Overwrite defaults by url. Does mean there is a way to pre-select the drop down values by altering the url?
If so, can you please show me an example of how this is accomplished (example: color)? Perhaps http://www.example.com/test/product.html#color=blue? What are the options for the url to modify the selections? Associated sku? Attribute and option labels? Attribute and option IDs?
// Overwrite defaults by url
var separatorIndex = window.location.href.indexOf('#');
if (separatorIndex != -1) {
var paramsStr = window.location.href.substr(separatorIndex+1);
var urlValues = paramsStr.toQueryParams();
if (!this.values) {
this.values = {};
}
for (var i in urlValues) {
this.values[i] = urlValues[i];
}
}
// Overwrite defaults by inputs values if needed
if (config.inputsInitialized) {
this.values = {};
this.settings.each(function(element) {
if (element.value) {
var attributeId = element.id.replace(/[a-z]*/, '');
this.values[attributeId] = element.value;
}
}.bind(this));
}
Thank you in advance!
So it seems that you can pre-select product attribute options using the url, however, it is not a very user-friendly way of doing so. The full url must be followed by #attribute_id=option_id. You'll want to have access to the database to get the appropriate ids unless you have plans of using native Magento functions to implement this.
Example
http://www.example.com/test/product.html#107=54&33=82
When you load this url, Magento will pre-select those values from the dropdown menus. Believe me, I would rather it be something like this: #attribute_code=option_code (#color=dark_blue), although I am almost certain that there are only ids and labels for options of a drop down.
If you're looking for a way to make this more user-friendly, perhaps try adding url rewrites to accomplish this. Example: http://www.example.com/test/product.html#107=54&33=82 to http://www.example.com/test/dark-blue-product.html

Add row to Google Spreadhseet via API

I am building a Chrome extension which should write new rows into a Google Spreadsheet. I manage to read the sheet content but am not able to write an additional row. Currently my error is "400 (Bad Request)". Any idea what I am doing wrong here?
I have gone through the Google Sheets API documentation and other posted questions here but was not able to find any solution.
Here is the code which I use to GET the sheet content (this works):
function loadSpreadsheet(token) {
var y = new XMLHttpRequest();
y.open('GET', 'https://spreadsheets.google.com/feeds/list/spreadsheet_id/default/private/values?access_token=' + token);
y.onload = function() {
console.log(y.response);
};
y.send();
}
And this is the code I try to POST a new row (gives me "400 - Bad Request"):
function appendRow(token){
function constructAtomXML(foo){
var atom = ["<?xml version='1.0' encoding='UTF-8'?>",
'<entry xmlns="http://www.w3.org/2005/Atom" xmlns:gsx="http://schemas.google.com/spreadsheets/2006/extended">',//'--END_OF_PART\r\n',
'<gsx:name>',foo,'</gsx:name>',//'--END_OF_PART\r\n',
'</entry>'].join('');
return atom;
};
var params = {
'body': constructAtomXML("foo")
};
url = 'https://spreadsheets.google.com/feeds/list/spreadsheet_id/default/private/full?alt=json&access_token=' + token;
var z = new XMLHttpRequest();
z.open("POST", url, true);
z.setRequestHeader("Content-type", "application/atom+xml");
z.setRequestHeader("GData-Version", "3.0");
z.setRequestHeader("Authorization", 'Bearer '+ token);
z.onreadystatechange = function() {//Call a function when the state changes.
if(z.readyState == 4 && z.status == 200) {
alert(z.responseText);
}
}
z.send(params);
}
Note: spreadsheet_id is a placeholder for my actual sheet ID.
Follow the protocol and to make it work.
Assume spreadsheet ID is '1TCLgzG-AFsERoibIUOUUE8aNftoE7476TWYKqXQ0xb8'
First use the spreadsheet ID to retrieve list of worksheets:
GET https://spreadsheets.google.com/feeds/worksheets/1TCLgzG-AFsERoibIUOUUE8aNftoE7476TWYKqXQ0xb8/private/full?alt=json
There you can read list of worksheets and their IDs. Let use the first worksheet from the example. You'll find its id in feed > entry[0] > link array. Look for "rel" equal 'http://schemas.google.com/spreadsheets/2006#listfeed'.
In my example the URL for this worksheet is (Worksheet URL): https://spreadsheets.google.com/feeds/list/1TCLgzG-AFsERoibIUOUUE8aNftoE7476TWYKqXQ0xb8/ofs6ake/private/full
Now, to read its content use:
GET [Worksheet URL]?alt=json
Besides list-row feed, you'll also find a "post" URL which should be used to alter spreadsheet using list-row feed. It's the one where "rel" equals "http://schemas.google.com/g/2005#post" under feed > link.
It happens that it is the same URL as for GET request. In my case: https://spreadsheets.google.com/feeds/list/1TCLgzG-AFsERoibIUOUUE8aNftoE7476TWYKqXQ0xb8/ofs6ake/private/full. Just be sure to not append alt=json.
Now, to insert a new row using list-row feed you need to send POST with payload which is specified in docs. You need to send a column name prefixed with "gsx:" as a tag name. However it may not be the same as the column name in the spreadsheet. You need to remove any white-spaces, make it all lowercase and without any national characters. So to make your example work you need to replace <gsx:Name> with <gsx:name>.
Before the change you probably had the following payload message:
Blank rows cannot be written; use delete instead.
It's because the API didn't understand what the "Name" is and it just dropped this part of entry from the request. Without it there were no more items and the row was blank.
Alternatively you can read column names from the GET response. Keys from objects in feed > entry array that begins with gsk$ are columns definitions (everything after $ sign is a column name).
=================================================================
EDIT
To answer a question from the comments.
I've changed two things from your example:
function appendRow(token){
function constructAtomXML(foo){
var atom = ["<?xml version='1.0' encoding='UTF-8'?>",
'<entry xmlns="http://www.w3.org/2005/Atom" xmlns:gsx="http://schemas.google.com/spreadsheets/2006/extended">',
'<gsx:name>',foo,'</gsx:name>',
'</entry>'].join('');
return atom;
};
/*
var params = {
'body': constructAtomXML("foo")
};
*/
var params = constructAtomXML("foo");
url = 'https://spreadsheets.google.com/feeds/list/'+spredsheetId+'/default/private/full?alt=json&access_token=' + token;
var z = new XMLHttpRequest();
z.open("POST", url, true);
z.setRequestHeader("Content-type", "application/atom+xml");
z.setRequestHeader("GData-Version", "3.0");
z.setRequestHeader("Authorization", 'Bearer '+ token);
z.onreadystatechange = function() {//Call a function when the state changes.
if(z.readyState == 4 && z.status == 200) {
alert(z.responseText);
}
}
z.send(params);
}
1) <gsx:Name> to <gsx:name>. Without it you'll receive an error.
2) params object should be a String! Not an object with some 'body' key. You just need to pass a value you want to send to the server.

Kendo AutoComplete

I want to use kendo AutoComplete in a kendoGrid for inline editing. When user inputs anything I'd use it to call a RESTful web service to return a list of products with names that start with the input value.
My questions are:
My web service expects a request looks like http://localhost/myService/appl where "appl" is the value that user enters and the prefix. However, kendo seems to always format the request something like http://localhost/myService?product=appl. How do I change the format?
How do I get the value that user has input in the grid (the AutoComplete textbox) so I can pass it in the request URL?
Define in the DataSource of your autocomplete an url function.
In that function, you can get typed value as:
var val = op.filter.filters[0].value;
and then return the url with the composed value.
Then it is something like:
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: function (op) {
var val = op.filter.filters[0].value;
return "/myService/" + val;
}
}
}
})

How do you model form changes under Spring MVC?

Say you're writing a web page for fruit vendors using Spring MVC's SimpleFormController, version 2.5.6. On this page the vendor can do simple things like change their name or their address. They can also change their inventory based on a drop down list filled with present inventory selections.
When this drop down list selection changes, the entire form changes to match the inventory of what has been selected. So one stock selection may have bananas and pears, another may have melons, blueberries and grapefruit.
Inside each inventory selection is a input field that needs to be propagated back to the database, for the sake of this example let's say that the user enters the number of fruit.
The way this is modeled in the database is that each Stock name is stored in a table, which has a one to many relationship with the contents of each stock, which would be the type of fruit in this example. Then the type of fruit has a one to many relationship with the quantity the vendor selects. Stock name and the type of fruit in each stock are stored in the database and are unchangeable by the user, with the connected fruit quantity table being editable.
My question is, how do you model the form described above in Spring MVC?
I've tried overriding the isFormChangeRequest and onFormChange to facilitate the form change, but I think I may be misunderstanding the intent of these methods. When I change my backing command object the next time the page is post it tries to bind the request into the form, which breaks if you adjust the size of the Stock array (say from 3 to 2, it will try and bind into the 3rd value, even if it is empty).
If you have a limited amount of different stocks, you can use different handler mappings for each one with a different backing model:
#RequestMapping(params="stock=example1")
ModelAndView handleExample1(#ModelAttribute("stock") ApplesOrangesPears stockObject)
#RequestMapping(params="stock=example2")
ModelAndView handleExample2(#ModelAttribute("stock") BananasPotatos stockObject)
But I guess that is not the case, there are a lot of different stock types and they are dynamic. In that case you can register custom property editor (#InitBinder), and determine dynamically the actual type of the backing object for the inventory, then validate, and convert to or from it explicitly.
What I ended up doing is firing a JavaScript event when the selection in the drop down is changed. This JavaScript (seen below) generates a URL based on the selection of the drop down and uses a location.replace to go to the new URL, which causes the controller to generate a new form.
Using this method over overriding the isFormChangeRequest and onFormChange has allowed me to avoid binding errors caused by left over post data.
function changeUrl(selectionValue) {
var param = getParams();
param["dropdownselection"] = selectionValue;
window.location.replace(getBaseUrl() + buildQueryString(param));
}
//taken from http://javascript.about.com/library/blqs1.htm
function getParams() {
var qsParm = new Array();
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i = 0; i < parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0,pos);
var val = parms[i].substring(pos+1);
qsParm[key] = val;
}
}
return qsParm;
}
function getBaseUrl() {
var url = document.location.toString();
if (url.indexOf('?') != -1) {
url = url.substring(0, url.indexOf('?'));
}
return url;
}
function buildQueryString(param) {
var queryString = "?";
for (var key in param) {
queryString += key + "=" + param[key] + "&";
}
//remove last "&"
return queryString.substring(0,queryString.length - 1);
}

Resources