MVC4 and dropdown using onchange - javascript

I've searched several posts on this and the methods all would normally work, however...
I'm in an environment where we use 3 different servers (Dev, UAT and Prod). All 3 have differing URL structures:
http://dev.com/myusername/applicationname (Dev)
http://uat.com/applicationname (UAT)
http://prod.com/applicationname (Prod)
The issue that I'm having is when I try to use a dropdown I'm having problems getting the url right. The issue is when I use the following code to populate my dropdown:
#Html.DropDownList("Owners", ViewData["Owners"] as SelectList, new { onchange = "document.location.href='/Builds/' + this.options[this.selectedIndex].value;" })
It handles the event just fine, but produces a URL of:
http://dev.com/Builds/value. I need it to be http://dev.com/myusername/application/Builds/value.
Any ideas on how I can accomplish this?

Get the base uri then append your stuff to that:
string baseUrl = Request.Url.Scheme + "://" + Request.Url.Authority +
Request.ApplicationPath.TrimEnd('/') + "/";
Note that the trim is there because it may or may not end with the trailing slash depending on where it is hosted (root or sub directory)
You might also be able to use
HttpContext.Current.Server.MapPath("~/Builds/")
This might also work:
#HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority)#Url.Content("~/Builds/")

Related

Javascript - Forward Slash appended automatically in URL with the Window.Location.Hash

In my Angular JS website, I wish to append the text "#Page/" to the URL using Javascript. Here my problem is that the forward slash(/) is getting added when using the code Location.hash
For example, Let say the URL is https://MyWebsite.com/Products
var location = window.location;
location.hash = "#page/" + pageNumber;
window.location = location
After executing the above code, the Window.location turned out to be https://MyWebsite.com/Products/#page/1.
But what I need is the forward slash(/) should not be included between products and #page.
https://MyWebsite.com/Products#page/1.
The strange thing is that when I checked the same code with the other websites don't have Angular JS, implemented only with the Asp.net Webforms and ASP.net MVC, I got the desired result.
Does this kind of issue have something to do with the Angular JS?
I believe # is special character reserved for a page fragment reference.
See https://www.ietf.org/rfc/rfc3986.txt
Can you do with without # or use the # to reference the fragment? e.g.
window.location.href += 'page/' + pageNumber + '#' + pageFragment;

Thymleaf javascript variable combining

I'm using thymeleaf in my spring boot project. It's working well. Now I need to render one url in JavaScript as a string and need to concatenate with one JavaScript variable. I have tried the following code.
location.href = /*[[#{/signage/save}]]*/ '' + res.id
But the generated output is
location.href='/signage/save';
What I want is following
location.href = '/signage/save' + res.id;
How can I achieve it?
You can tell Thymeleaf to uncomment certain code if the page is served dynamically using special comment syntax /*[+...+]*/. And inside this commented block, you can put expressions and they will be evaluated together with the whole block.
/*[+ location.href = [[#{/signage/save}]] + res.id +]*/
Will be rendered as
location.href = '/signage/save' + res.id
After trying few methods got the solution, not exactly what I needed but it works for me. I just wrapped it using parenthesis ((.....))
location.href = (/*[[#{/signage/save}]]*/ '') + res.id
and generated output is
location.href = ('/signage/save') + res.id;

What's the best method to EXTRACT product names given a list of SKU numbers from a website?

I have a problem.
I have a list of SKU numbers (hundreds) that I'm trying to match with the title of the product that it belongs to. I have thought of a few ways to accomplish this, but I feel like I'm missing something... I'm hoping someone here has a quick and efficient idea to help me get this done.
The products come from Aidan Gray.
Attempt #1 (Batch Program Method) - FAIL:
After searching for a SKU in Aidan Gray, the website returns a URL that looks like below:
http://www.aidangrayhome.com/catalogsearch/result/?q=SKUNUMBER
... with "SKUNUMBER" obviously being a SKU.
The first result of the webpage is almost always the product.
To click the first result (through the address bar) the following can be entered (if Javascript is enabled through the address bar):
javascript:{document.getElementsByClassName("product-image")[0].click;}
I wanted to create a .bat file through Command Prompt and execute the following command:
firefox http://www.aidangrayhome.com/catalogsearch/result/?q=SKUNUMBER javascript:{document.getElementsByClassName("product-image")[0].click;}
... but Firefox doesn't seem to allow these two commands to execute in the same tab.
If that worked, I was going to go to http://tools.buzzstream.com/meta-tag-extractor, paste the resulting links to get the titles of the pages, and export the data to CSV format, and copy over the data I wanted.
Unfortunately, I am unable to open both the webpage and the Javascript in the same tab through a batch program.
Attempt #2 (I'm Feeling Lucky Method):
I was going to use Google's &btnI URL suffix to automatically redirect to the first result.
http://www.google.com/search?btnI&q=site:aidangrayhome.com+SKUNUMBER
After opening all the links in tabs, I was going to use a Firefox add-on called "Send Tab URLs" to copy the names of the tabs (which contain the product names) to the clipboard.
The problem is that most of the results were simply not lucky enough...
If anybody has an idea or tip to get this accomplished, I'd be very grateful.
I recommend using JScript for this. It's easy to include as hybrid code in a batch script, its structure and syntax is familiar to anyone comfortable with JavaScript, and you can use it to fetch web pages via XMLHTTPRequest (a.k.a. Ajax by the less-informed) and build a DOM object from the .responseText using an htmlfile COM object.
Anyway, challenge: accepted. Save this with a .bat extension. It'll look for a text file containing SKUs, one per line, and fetch and scrape the search page for each, writing info from the first anchor element with a .className of "product-image" to a CSV file.
#if (#CodeSection == #Batch) #then
#echo off
setlocal
set "skufile=sku.txt"
set "outfile=output.csv"
set "URL=http://www.aidangrayhome.com/catalogsearch/result/?q="
rem // invoke JScript portion
cscript /nologo /e:jscript "%~f0" "%skufile%" "%outfile%" "%URL%"
echo Done.
rem // end main runtime
goto :EOF
#end // end batch / begin JScript chimera
var fso = WSH.CreateObject('scripting.filesystemobject'),
skufile = fso.OpenTextFile(WSH.Arguments(0), 1),
skus = skufile.ReadAll().split(/\r?\n/),
outfile = fso.CreateTextFile(WSH.Arguments(1), true),
URL = WSH.Arguments(2);
skufile.Close();
String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }
// returns a DOM root object
function fetch(url) {
var XHR = WSH.CreateObject("Microsoft.XMLHTTP"),
DOM = WSH.CreateObject('htmlfile');
WSH.StdErr.Write('fetching ' + url);
XHR.open("GET",url,true);
XHR.setRequestHeader('User-Agent','XMLHTTP/1.0');
XHR.send('');
while (XHR.readyState!=4) {WSH.Sleep(25)};
DOM.write(XHR.responseText);
return DOM;
}
function out(what) {
WSH.StdErr.Write(new Array(79).join(String.fromCharCode(8)));
WSH.Echo(what);
outfile.WriteLine(what);
}
WSH.Echo('Writing to ' + WSH.Arguments(1) + '...')
out('sku,product,URL');
for (var i=0; i<skus.length; i++) {
if (!skus[i]) continue;
var DOM = fetch(URL + skus[i]),
anchors = DOM.getElementsByTagName('a');
for (var j=0; j<anchors.length; j++) {
if (/\bproduct-image\b/i.test(anchors[j].className)) {
out(skus[i]+',"' + anchors[j].title.trim() + '","' + anchors[j].href + '"');
break;
}
}
}
outfile.Close();
Too bad the htmlfile COM object doesn't support getElementsByClassName. :/ But this seems to work well enough in my testing.

How should I create relative paths in javascript using MVC3?

I am having some difficulty aligning my paths without a hardcode in javascript. I am running an asp.net MVC3 web application.
If my path is of the form
var url = 'http://serverNameHardcode/websiteNameHardcode/service/service?param1=' + param;
Then things work fine when I do
$.get(url,
{},
function (data) {alert('callback success');},'json');
I would like to create a relative path. I tried
var url = 'service/service?param1=' + param;
And this works when I run locally and also in Firefox, but not in IE7. When I publish to the server without the hardcode the callback never fires. I know MVC-3 adds some complexity to routing, but I do not know if it applies to this situation; so, I marked this question as such.
How should I setup my path so I don't need hardcodes?
Just write out the app path as a global js variable from your master view, then compose links as
APPPATH + "path/whatever"
Just had to solve this for one of my jQuery plugins, where it is preferable not to modify anything global (i.e. outside the scope of the plugin use) so I had to disregard the marked answer.
I also found that because I host DEV locally in IIS I could not use a root-relative path (as localhost is not the root).
The solution I came up with extended what I had already started with: a data-controller attribute specifying which controller to use in the element I am applying my plugin to. I find it preferable to data-drive the controller names so the components can be more easily reused.
Previous:
<div data-controller="Section">
Solution:
<div data-controller="#Url.Content("~/Section")">
This injects the server root (e.g. /Test.WindowsAzure.Apr2014/ before the controller name so I wind up with /Test.WindowsAzure.Apr2014/Section which is perfect for then appending actions and other parameters as you have. It also avoids having an absolute path in the output (which takes up extra bytes for no good reason).
In your case use something like:
// Assuming $element points to the element your plugin/code is attached to...
var baseUrl = $element.data('controller');
var url = baseUrl + '/service?param1=' + param;
Update:
Another approach we now use, when we do not mind injecting a global value, is Razor-inject a single global JavaScript variable onto window in the layout file with:
<script>
window.SiteRoot = "#Url.Content("~/")";
</script>
and use it with
var url = window.SiteRoot + '/service?param1=' + param;
One option:
var editLink = '#Url.Action("_EditActivity", "Home")';
$('#activities').load(editLink + "?activityID=" + id);
another example:
var actionURL = '#Url.Action("_DeleteActivity", "Home")';
$('#activities').load(actionURL + "?goalID=" + gID + "&activityID=" + aID);
If you don't need to add to the string:
$('#activities').load('#Url.Action("_Activities", "Home", new { goalID = Model.goalID},null)');
I really need the path to get this to work, maybe its IE7. Who knows. But this worked for me.
Grab the URL and store it somewhere. I chose to implement the data attribute from HTML5.
<div id="websitePath" data-websitePath='#Request.Url.GetLeftPart(System.UriPartial.Authority)#Request.ApplicationPath'></div>
Then when you need to perform some AJAX or otherwise use a URL in javascript you simply refer to the stored value. Also, there are differences in the versions of IIS (not cool if your devbox is IIS5 and your server is IIS7). #Request.ApplicationPath may or may not come back with a '/' appended to the end. So, as a workaround I also trim the last character if it is /. Then include / as part of the url.
var urlprefix = $('#websitePath').data('websitepath');
urlprefix = urlprefix.replace(/\/$/, "");
var url = urlprefix + '/service/service?param1=' + param;
While the accepted answer is correct I would like to add a suggestion (i.e. how I do it).
I am using MVC, and any ajax request goes to a controller. My controllers have services so if a service call is required the controller will take of that.
So what's my point? So if ajax always communicates with a controller, then i would like to let the MVC routing resolve the path for me. So what I write in Javascript for url is something like this:
url: 'controller/action'
This way there is no need for the root path etc...
Also, you can put this in a separate Javascript file and it will also work whereas #Url.Content will need to be called on the view.

How to use xpath in Selenium RC with JavaScript?

I am using Selenium RC with IE 6 and XPath locators are terribly
slow.
So I am trying to see if javascript-xpath actually speeds up things.
But could not find enough/clear documentation on how to use native x-
path libraries.
I am doing the following:
protected void startSelenium (String testServer, String appName, String testInBrowser){
selenium = new DefaultSelenium("localhost", 4444, "*" +testInBrowser, testServer+ "/"+ appName + "/");
echo("selenium instance created:"+selenium.getClass());
selenium.start();
echo("selenium instance started..." + testServer + "/" + appName +"/");
selenium.runScript("lib/javascript-xpath-latest-cmp.js");
selenium.useXpathLibrary("javascript-xpath");
selenium.allowNativeXpath("true");
}
This results in speed improvement of XPath locator but the
improvements are not consistent. On some runs the time taken for a
locator is halved; while sometimes its randomly high.
Am I missing any configuration step here? Would be great if someone
who has had success with this could share their views and approach.
Thanks,
Nirmal
Solution:
protected void startSelenium (String testServer, String appName, String testInBrowser){
selenium = new DefaultSelenium("localhost", 4444, "*" +testInBrowser, testServer+ "/"+ appName + "/");
echo("selenium instance created:"+selenium.getClass());
selenium.start();
echo("selenium instance started..." + testServer + "/" + appName +"/");
selenium.useXpathLibrary("javascript-xpath");
}
I implemented this myself and I only had to do selenium.useXpathLibrary("javascript-xpath"). In my tests, the javascript xpath was about 7x faster on IE 8. Haven't really tested on anything else, but we only use it for IE.
I have never done this but think that you may need to do something like
//Add the library to the page since runScript just does an eval on the JS
selenium.runScript("document.body.append(document.createElement('script')).src = 'path/to/lib');");
selenium.useXpathLibrary("javascript-xpath");
selenium.allowNativeXpath("true");
You will need to add the library to the page and then load it.
However, I would recommend using CSS Selectors instead of XPath Selectors as they are a lot faster in Selenium. You can see how to use different locator strategies here. I have seen tests become at least twice as fast as the original XPath.

Categories

Resources