css3pie in MVC, where to place the pie.htc file?

Question

I've been trying to use the Css3pie in my MVC project to render rounded corner panel but have no luck so far.

I follow the sample with normal html page and it works perfectly but not in my MVC project. I think it is something to do with the path of the 'pie.htc' file that is being confused in MVC

I place the 'pie.htc' file in project folder (root) and in my css file, i use: behavior: url(/PIE.htc);

I think the MVC router needs to be modified to accept htc file extension? Sorry im new with MVC. Has anyone tried pie.htc and have it working in MVC project, please help?

Thanks!

Answer 1

As a side note (and maybe it will fix your issue anyway) if you don't want to have the .htc file at your root, you can do the following to get around the relative pathing issues inherent with behaviors. It's not the prettiest solution, but it works well -

In your css, define the behavior as:behavior: url(CSS3PIE);

Then in your Global.asax.cs have the following code:

protected void Application_BeginRequest(Object sender, EventArgs e)
{
    CheckForCSSPIE();
}

private void CheckForCSSPIE()
{
    if (!Regex.IsMatch(Request.Url.ToString(), "CSS3PIE"))
    {
        return;
    }

    const string appRelativePath = "~/Content/css/PIE.htc";
    var path = VirtualPathUtility.ToAbsolute(appRelativePath);
    Response.Clear();
    Response.StatusCode = (int)HttpStatusCode.MovedPermanently;
    Response.RedirectLocation = path;
    Response.End();
}

It will simply look for any request matching "CSS3PIE" and return the .htc file from the correct location.

Answer 2

Add the following to the RegisterRoutes(RouteCollection routes) method of the Global.asax file

routes.IgnoreRoute("pie.htc");

Answer 3

In your stylesheet, add the following behavior:

behavior: url("/Content/PIE/PIE.css")