Serializing .NET Resources (.resx) as JSON (part 2)

So after playing with my own code after a while I realized that there was a slight flaw in my thinking.  Since every application is slightly different in the way it determines what culture to use, and that each request is technically a different Thread, I need a more generic way to capture that information.

I decided to use a querystring value.  Here is my updated code in regards to reading the querystring culture, setting it and fired up the appropriate ResourceManager..

 

ResourceManager rm = new ResourceManager(ConfigurationManager.AppSettings["JSResourcesAssemblyType"].ToString(),
                Assembly.LoadFile(ConfigurationManager.AppSettings["JSResourcesAssemblyPath"].ToString()));
            if (context.Request.QueryString["CultureCode"] == null) return;
            var culture = context.Request.QueryString["CultureCode"].ToString();            
            ResourceSet rs = rm.GetResourceSet(new CultureInfo(culture), true, true);            
            var sbInitial = "var rm = {";
            var sb = new StringBuilder(sbInitial);            
            var resEnum = rs.GetEnumerator();
            while (resEnum.MoveNext())
            {
                if (sb.ToString() != sbInitial) sb.Append(",");
                sb.Append("\"" + resEnum.Key + "\":\"" + 
                    resEnum.Value.ToString().Replace("\r\n", "").Replace("\"", "\\\"") + "\"");
            }
 
            sb.Append("}");
            sb.ToString();
 
            context.Response.ContentType = "text/javascript";
            context.Response.Write(sb.ToString());
06.09.2011 09:36 by Danny Gershman | Comments (0) | Permalink

Serializing .NET Resources (.resx) as JSON

This is actually quite a useful solution.  The goal here is to use the same resource file for client and server side coding, while also utilizing the “Culture” awareness of .NET that might be built into your application.

Be sure to create your Resources as a separate satellite assembly. 

We are going to create an HttpHandler.  Basically create a class and implement the IHttpHandler interface.

Look at the sample code below.

    public class ResourceJS : IHttpHandler
    {
 
 
        public bool IsReusable
        {
            get { return true; }
        }
 
        public void ProcessRequest(HttpContext context)
        {
            ResourceManager rm = new ResourceManager(ConfigurationManager.AppSettings["JSResourcesAssemblyType"].ToString(),
                Assembly.LoadFile(ConfigurationManager.AppSettings["JSResourcesAssemblyPath"].ToString()));
            rm.GetString("");
            ResourceSet rs = rm.GetResourceSet(Thread.CurrentThread.CurrentCulture, false, false);              
            var sbInitial = "var rm = {";
            var sb = new StringBuilder(sbInitial);
            var resEnum = rs.GetEnumerator();
            while (resEnum.MoveNext())
            {
                if (sb.ToString() != sbInitial) sb.Append(",");
                sb.Append("\"" + resEnum.Key + "\":\"" + 
                    resEnum.Value.ToString().Replace("\r\n", "").Replace("\"", "\\\"") + "\"");
            }
 
            sb.Append("}");
            sb.ToString();
 
            context.Response.ContentType = "text/javascript";
            context.Response.Write(sb.ToString());
        }
    }

You can see here that there are two Web.config values that have specified here.  JSResourcesAssemblyType is the full Namespace and root class name of the Resource files.  JSResourcesAssemblyPath is the location of satellite assembly.  This uses reflection to load up the metadata of the assembly.

Once this compiled, you need to add this to the web.config.  Here is a sample for IIS7.

 

<handlers>
            <remove name="WebServiceHandlerFactory-Integrated" />
            <remove name="ScriptHandlerFactory" />
            <remove name="ScriptHandlerFactoryAppServices" />
            <remove name="ScriptResource" />            
            <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
            <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
            <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      <add name="ResourceJS" path="ResourceJS.axd" verb="GET" type="ResourceJS" resourceType="Unspecified" requireAccess="Script" preCondition="integratedMode" />
      <add name="UrlRoutingHandler" preCondition="integratedMode" verb="*" path="UrlRouting.axd" type="System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
    </handlers>

You can see the ResourceJS is being extended to the url ResourceJS.axd.  Below is my sample page.

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ResourceJSTest.aspx.cs" Inherits="ResourceJSTest" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/2.1.0.0-debug/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/ResourceJS.axd"></script>
    <script type="text/javascript">
        $(function () {
            $("#target").html(rm.FAQ_Q8_TEXT);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="target"></div>
    </form>
</body>
</html>
The rm object in javascript has all the “keys” that were defined in the original RESX file for that culture.  You can call any of these as a property of rm.   Very re-usable.
06.08.2011 14:19 by Danny Gershman | Comments (0) | Permalink

PartialView: Why?

There are several cases where you would want to break down your view into several small components. One use case that I am working with right now, is I have a multi-lingual site that I would like to reload content using AJAX principles.

Normally what I would do in the case of a non-multi lingual site is to create another ActionResult to return the ViewModel that is changing with the new parameters. I like to use a custom ActionResult that I have called JsonpResult. The problem resides in the fact that I have labels not in my database but in Resource files. So what I would need to do is to somehow hydrate my Resource file data into the ViewModel.

Once the data comes down the pipe, my AJAX callback handles the wiring up of the ViewModel response back to the HTML page using Javascript (I use jQuery).

This definitely works, however it becomes a question of maintainability. I now need to not only maintain my original ASP.NET view, but I also need to maintain a set of scripts that handle AJAXian behavior. If you need to have your site SEO, then you really need to make sure that both the Server Side and Client Side behavior are both working the same.

This is where Partial Views come into play for me. What I do is "pull out" the logical data sections where the bulk of the reload occurs. The nice thing about PartialView is that you can pass your ViewData and Model along to the PartialView. If your PartialView is strongly typed against your ViewModel you can get Intellisense to help with the wiring of the PartialView.

Now all I need to do with my AJAX call is to write the response back to a single DIV rather than handling data points individually. What it does mean is that there would be more content coming down the pipe. However, the trade off is easier to read and maintain code.

Technorati Tags: ,,,
03.22.2011 20:17 by Danny Gershman | Comments (0) | Permalink

jQuery is bundled w/VS2010

Both webforms and MVC have jquery 1.4.1 in the Scripts folder by default.

image

Technorati Tags: ,,
02.03.2011 11:22 by Danny Gershman | Comments (0) | Permalink

Decoupling CSS Files (Skinning)

It can be very useful to decouple CSS files from each other without reusing classes.  In some cases you might want a designer to focus on handling the coloring items and not have control over positioning.  This can be very painful especially if most of your CSS classes have already been defined.

This methodology allows you to dynamically create some “Skin” classes based off predefined ones.  I have created two simple helper functions.  This tutorial requires that you use jQuery.

function applySkin() {
    _skinObjs($("body"));    
    _skinObjs($("div"));
    _skinObjs($("span"));    
    _skinObjs($("a"));
}
 
function _skinObjs(objs) {
    for (var i = 0; i < objs.length; i++) $(objs[i]).addClass($(objs[i]).attr("class") + "-Skin");    
}

This will essentially, add a “–Skin” class to every body, div, span, and anchor tag on your page (feel free to add additional tags as necessary). 

Now you can remove what information you want repeated.  So let’s say that you have a Site.css stylesheet and you want to remove some stylistic definitions to a separate file (coloring for example).  To continue on that example, take this sample html code.

<html>
<head>
<title>Sample Page</title>
<link href="Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="MainTitle">Hello World!</div>
</body>
</html>

 

Take a look at the Site.css, notice how the color information is in the same file.

.MainTitle 
{
    font-size: 32pt;
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: #fea130;
}

So what I need to do now is to create a separate file.  Let’s call it Site-Skin.css.  I will append to my class “-Skin” as seen earlier.  I also need to remove it from my Site.css file.

Updated Site.css

.MainTitle
{
    font-size: 32pt;
    position: absolute;
    top: 100px;
    left: 100px;
}

 

Site-Skin.css

.MainTitle-Skin
{
    background-color: #fea130;
}

Now I need to specify in my HTML code the link to the particular “-Skin” I want to use.  Let’s say that I’m using a scripting language like ASP.NET, I could put the skins in different folders and dynamically change the decoupled CSS file.

<%@ Page Language="C#" %>
<html>
<head>
<title>Sample Page</title>
<link href="Site.css" rel="stylesheet" type="text/css" />
<link href="<%=Skin_Folder%>/Site-Skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="MainTitle">Hello World!</div>
</body>
</html>

 

Now if you look below you can see my folder structure has multiple Site-Skin.css files.

image

This is very powerful as your designer can very easily work on the Skin while you work / or someone else works on positioning and other features of the styling process.

Technorati Tags: ,,,
12.14.2010 13:58 by Danny Gershman | Comments (0) | Permalink

Simulating POST with Fiddler

Sometimes its useful to simulate POST action on a WebForm or a Webservice in ASP.NET for debugging.  Fortunately Fiddler allows you to compose (construct) such a request.  First thing to do is fire up Fiddler.  Jump to the “Request Builder” tab.

image

From the drop down, select “POST”.  Put the URL you are testing in the textbox.  The other thing to input is in the “Request Headers” field which is to let the receiving page that form data is being passed.  “Content-type: application/x-www-form-urlencoded”

image

The final piece of data is the key value pairs of the data to be passed.  Make sure these values are URL encoded.  Put this in the “Request Body” field.

image 

One setting to change is to ensure that request will be automatically tracked.  Switch to the option tab, as ensure “Inspect Session” is checked.

image

Click “Execute” to fire off the request.  This can be really useful if you need to debug something.  Make sure your ASP.NET development server is running.  In this case mine is running on localhost, port 8080.  Set your breakpoint in Visual Studio and then fire off the request.  Then the breakpoint will catch and you can step through.  This is a great way to test different variations of data POSTs.

Technorati Tags: ,,,,
05.06.2010 07:40 by Danny Gershman | Comments (3) | Permalink

Configuring ASP.NET MVC on IIS6

http://blog.stevensanderson.com/2008/07/04/options-for-deploying-aspnet-mvc-to-iis-6/

Technorati Tags: ,,
03.23.2010 08:30 by Danny Gershman | Comments (4) | Permalink

BlogEngine.NET custom captcha

One of the biggest flaws with my blog was that there was no CAPTCHA  ("Completely Automated Public Turing test to tell Computers and Humans Apart.)  Wikipedia article here.

I was getting comment spammed.  This I hope will reduce if not eliminate BOTS from putting false comments into my blog.  BOTS do this to increase their ranking on search engines in order to get more hits to their sites, when a keyword is entered.

Upon looking at the code for BlogEngine.NET, I did notice that there looked like there was some DEV in the area of the CAPTCHA, but it wasn’t fully implemented.

There is still one minor security flaw in my CAPTCHA design.  Once it’s fixed I will reveal what it was and how I fixed it.  In the meantime, I’ve gone ahead and deleted all fake comments and uploaded the new code.

If you try to comment on my blog now, you’ll see a little picture with some number on it.  The picture is of one of my cats “Sneakers”.  If the number is typed incorrectly, you won’t be able to post the comment.  Some of the messaging needs fixing as well.  This is definitely a good feeling project for me.

image

12.24.2009 12:36 by Danny Gershman | Comments (3) | Permalink

Determine ASP.NET root page

Sometimes when an ASP.NET page loads up from the root of a directory, the page name is not revealed via HTTP headers.  If it’s a webforms application, simply scroll down the Postback form section. (id=”aspnetForm”)

Look at the action attribute.  See the sample below.

<form name="aspnetForm" method="post" action="Home.aspx" id="aspnetForm">
Technorati Tags: ,,,
12.03.2009 06:55 by Danny Gershman | Comments (0) | Permalink

Run ASP.NET Development Server without Visual Studio

Ever want to run ASP.NET development server without having to fire up Visual Studio Debugger.

You can create your own scripts or commands by being able to access this.

%WINDOWS PATH%\Microsoft.NET\Framework\v2.0.50727\WebDev.WebServer.exe

Here is the command line options as shown without setting any parameters.  Enjoy!

image

08.05.2009 07:11 by Danny Gershman | Comments (3) | Permalink