Solving ‘unable to open site’ in WebMatrix

As you all know, I have been working with Web matrix for last month or so. I find it very easy to develop web sites and manage web sites. One thing, I started to like more is the ability to launch Visual Studio from web matrix. Now back to the problem at hand. I downloaded a web site template from dream template web site since I am not good at any kind of design aspect of it.  It downloaded the full template including the style sheets and bunch of htmls. First thing you have to remember to do is to unblock the zip files before extracting all the files. Once you unblock and extracted. If you would launch Web Matrix and try to open the site with ‘open site from folder’, it will not open the site, I tried opening existing web sites using that open and it does not open. I tried coping the files around to see if it might be because of the directory placement etc., nothing worked. Finally I opened the Web Matrix in admin mode and try opening the sites and all opened properly without any problems. So I guess IISExpress might be blocking opening files from locations that is not opened in admin mode. Anyway, if any of you run into this problem, try opening it as Admin mode you should be all set.

One thing I noticed, even though I was able to open the web sites with this model, my changes does not reflect on the pages, that is something I am working on. It might be as simple as this problem. If I find something new like this, I will post it here.

Starting out with KnockOut JS–Don’t do it without WebMatrix

So far all my development was using Silverlight. Now that Microsoft officially killed (I know, I know and lets not go there) Silverlight, we started looking at future alternatives. One of the task was to look at knockout JS. One of the reason was as a Silverlight developer who enjoys MVVM pattern, I should be able to adapt to it fast. So in this blog I am not going to talk about how to do things in Knockout JS, rather the tools you need to have to get started.

One thing I really I love about Knockout JS is, amount of documents available for newbie like me to get started. First of the links that you must have

The mother ship is @ Knockout JS. In my opinion you will not need anything else. This has fantastic starter tutorials, excellent documents. I wish every one creates web site like this some day. One another site you need to have in your bookmark if you decide to develop is Knock me out. This blog lots of tips and tools that is going to make your coding life so easy.

There are two forums that you can get answers from. Google groups and of course Stack overflow. In my opinion, I would recommend you guys to use Google Forums, I seem to get more response there than stack over flow. Oh by the way, I asked one question on Stack overflow, guess who answered, John Papa himself. I was so happy to see, John Papa is on Knockout camp. I will come to that in a minute.

Ok development environment. So you decided to start testing and play around with Knockout JS. One thing you need to think about is, how are you planning to develop the app. As you all know, I am more inclined to Microsoft IDEs so I am going to talk about only MS IDEs. You could develop Knockout sites using ASP.Net MVC templates. You will end up using ASP.Net features inter mingled with Knock out. I wanted to learn Knockout with out the noises of other technologies and focus purely on Knockout. I still want ease of development and of course intellisense. I came across Web Matrix day before yesterday and I fell in love immediately. Please remember to download the beta (2/18/12) It is so easy to develop and file based operation make it easy to drag and drop files and make it available to the solution etc., One good thing is if you want to develop ASP.Net MVC model you can develop it in there also, if you want to develop pure HTML model, you can do that also, that is what drawn me to this. So if you are setting up environment like me

1. Download Web Matrix Beta.

2. Download Knockout JS

3. Download jQuery js.

4. Download knock out mapping. (If you plan to do JSON)

Now that you have all in place, lets start building our first knock out code. Fire up Web matrix

image

In here, click on templates and create an empty site as shown below, name the site as HelloWorld

image

Now the site is created and it will take you a page something like

image

Please make sure you have downloaded knockout JS (KO) (step 2 of the download). Now click on the Files option on bottom left hand side

image

which will toggle the top left hand side to show the files instead of site.

image

First thing I do, is to create Scripts folder, where I am going to house all my scripts. So right click on the HelloWorld and create a new folder

image

call it Scripts. Next, open the Script folder so that you can copy knockout js that you have downloaded. One thing, I need to point out here, there is no solution or project model that we used to in Visual Studio. If a file is available in the directory structure then the file is available to use. So the idea here is that, if you want a file added to script, all you have to do is drop the file in Scripts folder. So, to do that, right click on Scripts folder and make it show the folder in windows explorer. Now copy KO js into the folder from your download directory. If you copied the file and if it does not show up in the web matrix view, make sure you right click on the directory and do ‘Refresh’. That’s is it, now we have the environment setup to write the code.

image

We could write the Hello world like java script model all in view, but we are doing knock out, so lets do it like we do it in MVVM, we will use binding to show Hello World. We are going to create a view model and setup a property which will have a string value of Hello World which is what we are going to bind in the view to show hello world. So do that, we click on Scripts folder and add a new java script file called ViewModel.js

image

image

Paste the code from below to make your view model java script

   1:  /// <reference file="knockout-2.0.0.js" />
   2:   
   3:  function ViewModel() {
   4:      var self = this;
   5:      self.helloWorld = "Hello World";
   6:  };
   7:   
   8:  var viewModel;
   9:   
  10:  function init(){
  11:      this.viewModel = new ViewModel();
  12:      ko.applyBindings(viewModel);
  13:  }
 

1 –> it is a required line, you add the reference to the javascript library so that web matrix can give you intellisense. If you do not have this line, then line 12, when you type ko. it will not show available methods.

3-6 –> This is our view model. Here we have one property called helloWorld which has ‘Hello World’ string assigned to it.

8 –> define the view model variable to be used in binding.

10-13 –> This is a very important method. This is required if you would want to separate the view and view model separate. You will see in a minute, this method is called on html body load so that, view model is created and also all the ko binding are applied as well.

Now lets look at our view. For our view, I am using the default.cshtml file.

   1: <!DOCTYPE html>

   2: <script src="Scripts/knockout-2.0.0.js" type="text/javascript"></script>
   1:  

   2: <script src="Scripts/ViewModel.js" type="text/javascript">

</script>

   3: <html lang="en">

   4:     <head>

   5:         <meta charset="utf-8" />

   6:         <title></title>

   7:     </head>

   8:     <body onload="init()">

   9:         <p><span data-bind="text: helloWorld"></span></p>

  10:     </body>

  11: </html>

2 –> references the ko js library and viewmodel java script.

8 –> instantiate the view model on the html load.

9 –> binds the helloWorld property of the view model to the DOM element.

That’s all folks. There is a clear separation of view and view model. Not only there is separation, this allows us to do unit testing of view model easy.

Few points to remember;

1. Make sure every html tag have associated end tag. If you do not, the ko will not come around and inject the code for you. I had a code like

<strong data-bind=”text: helloWorld”/> <—– this will not work.

<strong data-bind=”text: helloWorld”></strong> <— this works.

2. When using web matrix, in your view model, add reference to all the js library you are using so that web matrix can help you with intellisense.

3. I like web matrix model of developing KO application since, it is file based, I can just copy files without dependencies and is pure HTML/JS development. But if you choose to develop using ASP.Net MVC, that is also build into it.