Adding mime types to web.config

In some cases, we need to add mime types in order for the IIS to detect our files. For instance, I needed to add a custom font using CSS3 and so I added it to my stylesheet as follows:

@font-face {font-family: “myCustomFont”; src: url(../fonts/myFont.otf) format(“opentype”);}

When running on my Localhost, the font would appear fine however when upload to IIS the fonts would not show properly.

It also makes a difference depending which IIS one is using.

If running on IIS 6 or older, you will need to configure mime types on the server:

Read Microsite Instructions on configuring mime types for IIS6

If running on IIS 7 or newer, the mime types can be added to the web.config which will allow you to not touch the IIS directly (suggested):

Open the web.config and in the <system.webServer> section which is situated directly within <configuration> tag and add the following mime types to cover it all:

<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
<mimeMap fileExtension=".ogg" mimeType="video/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".spx" mimeType="audio/ogg" />
<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>

Hope that helps 🙂

Error: Request format is unrecognized for URL unexpectedly ending in ‘/myMethod’.

Scenario:

I have created a Web Application with an “asmx” page to allow web methods (Insert, Update, Delete) to act as a web service. I used a jQuery Post to communicate with the Web Method and all worked fine while working on my localhost. Once the Web App was deployed to server, when I try to access the Web Method from the browser example: “myDomain.com/myPage.asmx/Insert”, I kept on getting an error saying: “Request format is unrecognized for URL unexpectedly ending in ‘/Insert’.”

Cause:

Apparently this was caused due to cross domain access origin issues. Cross-domain origin does not allow one domain to call a page/method from another domain. The Web Methods needed to allow access for cross-domain calls.

Solution:

Step 1:

In my web.config, I add the following section under the section:

<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
</protocols>
</webServices>

Step 2:

I created a global.aspx page and added an Application_BeginRequest method. In this method I declared access to cross-domain as shown below:

protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
}

Hope this helps 🙂

Error: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I was trying to make an AJAX Post to another domain http://freegeoip.net/ to get Geo Location and therefore the browser would not allow me to proceed due to cross-domains. Cross domain means that if you are on domain A.com and would like to make a request to domain B.com, it does not allow the request to be made since the boundaries are set on the domain A.com by your browser. Script tags allow us to overcome this boundary however we still cannot read or do anything with the data returned.

Ajax Post:

$.ajax({

url: 'http://freegeoip.net/json/',
type: 'POST',
dataType: 'json',
success: function (data) {

var ip = data["ip"];
var country_name = data["country_name"];
var city_name = data["city"];

}

});

Error:

XMLHttpRequest cannot load http://freegeoip.net/json/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4868‘ is therefore not allowed access.

Solution ( Very Easy!) :

JSONP is just like the normal JSON we are used to but it also passes an extra parameters with more of your pages details. When sending a request to another domain B.com with JSON, if the domain B.com has JSONP enabled, it will change the response in a way to be readable for us to handle. Therefore, all we need to do is change the dataType from “json” to “jsonp” as follows:

$.ajax({

url: 'http://freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function (data) {

var ip = data["ip"];
var country_name = data["country_name"];
var city_name = data["city"];

}

});

This worked perfectly for me, and I could successfully get the Client IP, Country and City.

PS: the above requires jQuery to function since we are using a jQuery Ajax Request.

Goodluck 🙂

Solution: Unrecognized attribute ‘targetFramework’. Note that attribute names are case-sensitive.

Issue:

I was using Visual Studio 2012 and was writing a Web App using .NET 4.5 so in my web.config I had:

<compilation debug="true" targetFramework="4.5">

However every time I run my app, I was getting an error “Unrecognized attribute ‘targetFramework’. Note that attribute names are case-sensitive.”

This is caused by the IIS running an older version of ASP.NET

Solution to fix on local dev box:

  • Click on “Website” tab in the top menu
  • Select “Start Options..”

Website-StartOptions

  • From the pop-up window, on the left menu select “Build”
  • Choose your .NET framework desired
  • Click OK/Apply

.NET_framework

That should be it 🙂

WinSCP authentication using private key C#

Environment:

I was trying to connect to WinSCP from my Web Application using C# however I kept on getting an unknown server error. After doing some research (of which I did not find much), my dear friend helped me out figuring out the solution. So here it goes..

Error:

winscp> open "name@host.com:22" -privatekey=C:\keys\private.ppk
Searching for host...
Connecting to host...
Authenticating...
Continue connecting to an unknown server and add its host key to a cache?
The server's host key was not found in the cache. You have no guarantee that the server is the computer you think it is.
The server's dss key fingerprint is:
ssh-dss 1024 68:57:83:42:c9:42:08:db:13:0d:80:ec:8b:e2:43:c0
If you trust this host, press Yes. To connect without adding host key to the cache, press No. To abandon the connection press Cancel.
(Y)es, (N)o, C(a)ncel, (C)opy Key: Cancel
Host key wasn't verified!
Host key fingerprint is ssh-dss 1024 68:57:83:42:c9:42:08:db:13:0d:80:ec:8b:e2:43:c0.

Authentication failed.

Continue reading

Preview Image from File Upload using JavaScript

Try it out now:

Demo

Steps:

Step 1: Add a input type=”file”, give it an id and add the attribute multiple to allow for multiple file upload

<input type="file" id="files" name="files" multiple >

Step 2: On Page load, add an event listener for your input file upload change event


<script>

window.onload = function() {

var inputLocalFont = document.getElementById("files");

inputLocalFont.addEventListener("change", previewImages, false);

}

</script>

Step 3: Create a previewImages() function to be called when the change event is fired


<script>

//Preview new images to upload

function previewImages() {

var fileList = this.files;

var previewImages = document.getElementById("previewImages");

var anyWindow = window.URL || window.webkitURL;

previewImages.innerHTML = “”;

for (var i = 0; i < fileList.length; i++) {

var objectUrl = anyWindow.createObjectURL(fileList[i]);

var filenameExt = fileList[i].name.split(‘.png’);

var filename = filenameExt[0];

var holder = ‘<div style=”float:left;”>’ +

‘ <img alt=”” src=”‘ + objectUrl + ‘” width=”100px” height=”100px” style=”margin: 15px;” />’ +

‘</div>’;

previewImages.innerHTML += holder;

window.URL.revokeObjectURL(fileList[i]);

}

//This will be used to set the hight of the parent div

previewImages.innerHTML += “<div style=’width: 100%; clear: both; float: none’></div>”;

}
</script>

Enjoy 🙂

MVC Redirect from View with Parameters

I needed to redirect to another view using JavaScript for which I encountered quite some issues to do so.

1. First of all, windows.location.href = “http://&#8230;.” would not work.

2. Then I discovered that what needed to be done to redirect to another view was:

window.location.href = ‘@(Url.Action(“Index”, “Home”))’;

3. However, I needed to pass a search query and so I added the normal new parameter:

var mySearchQuery = $(“#mySearch”).val();

window.location.href = ‘@(Url.Action(“Index”, “Home”, new { search = mySearchQuery }))’;

The above kept on giving me error, no matter what I tried to put instead of mySearchQuery.

4.Finally, I found the solution for this. Which was:

var mySearchQuery = $(“#mySearch”).val();
var tempUrl = ‘@(Url.Action(“Index”, “Home”, new { search = 0, }))’;
var actualUrl= tempUrl .replace(“0”, mySearchQuery );
window.location.href = actualUrl;

Hope that helped 🙂