Privacy Policy

This Application does not collect any personal information

This Application does not connect to any online service

This Application does not contain any other features that could allow users to unintentionally share their personal information.

.html() stripping off form tags

Recently I have been working on jQuery and KnockoutJs a bit. A bit means, a lot. :) It has been really exciting times as I have been learning lot of stuff. There are also times where I pull my hair off. :)

I have a View which is a pure html file, with no bells and whistles, except the "data-bind"s for the Knockout. And I load it using .get{} and place it in a

inside a page. Kinda SPA we have in place.

.get ("/<SomeDir>/<Somefile.html>", function(data){
 
 $("#someDiv").html(data); 
 ko.applyBindings(new ViewModel, $("#formElement")[0]);
});

See the second line after the html placement? The ko binding, that is. The application crashes on the line. While debugging, I found that $("#formElement")[0] turns out to be "undefined". "formElement" is the

tag I have which wraps the contents in the html file. I was getting this only on IE10. I have no issues in IE8 and IE9. This really started bothering me. I looked around the internet and had no clue! I started debugging again, with my ultra modern debugging tool - alert() statements :). I place an alert statement right after the html placement. As:

.get ("/<SomeDir>/<Somefile.html>", function(data){
 
 $("#someDiv").html(data);
 alert($("#someDiv").html());
 ko.applyBindings(new ViewModel, $("#formElement")[0]);
});

This retrieved the html data that we placed in. What I saw really took my skin off! I saw that the
form tag (with id as formElement) had been stripped of! Yes, stripped off. Taken off! And that meant there was no "formElement" that got loaded in the DOM and hence the crash. I went hunting for answers again. And I found that I was not alone. Eventhough there was only one link which helped me: http://forum.jquery.com/topic/is-jquery-stripping-form-tags In HTML5, you cannot have a
tag inside a

tag. So, the html() strips the
tag out, without any warning! Thats bizarre. But thats what it does. In the article/forum post mentioned above, there are three workarounds:

1. Take out the "form" tag from the html file.
 This is the easiest and straightforward approach. But my case is different. I have validations in place, using jQuery UI Validation plugin. And that works only against "form"s.

2. Add a "form" tag in the beginning. Just before the opening "form" tag. Even though it would work, it seems like a hack to me. No, it is one.

 3. Use append() function instead of html(). Like,

 
$("#someDiv").html();
$("#someDiv").append(data);

Even though the 1st one is the right move, I would go with the 3rd one. Hope this would save hours of someone's life, as it did mine :) Have a wonderful programming day!

Seeding Junction Tables with EF Code First

My stint with Code First

My first stint with Code First was when I attended a code camp at Lebanon Valley. Mike Lukatchik (@mlukatchik) did a very energetic and informative session of Code First. He emphasized that code first is very useful in an agile environment. I kind of saw where it could be used, and I was very impressed with how he presented. But I should admit that Code First could be practical enough for a enterprise environment. I could almost hear the DBAs getting angry! :)

I was so impressed with Mike's presentation, that I invited him over to present the same session at the Central Penn .NET User Group's monthly meeting. Needless to say, it was one of the best presentations ever. Thanks, Mike!

What is Code First?

There are umpteen number of articles around Code First. But to give a simple answer, code first with Entity Framework is a technique where we create Entities first, instead of creating database objects. The database objects gets created by the Code First framework. If you are knew to Code First, I suggest you to take a plunge into this article -

Our Sample Entities

Now, let us dive into the core of the article. Suppose we have two entities - User and Role. And lets say, a User has more than one Role. And a Role could be shared among many Users. You are right - a Many-to-Many relationship. And, as you know, the Entities in EF are nothing but POCOs. Plain Old CLR Objects.

public class User
{
   public int UserId {get; set;}
   public  List Roles {get; set;}
}

public class Role
{
   public int RoleId {get; set;}
   public  List Users {get; set;}
}

Once you run the migration, the corresponding tables get created. Like the ones below:

--> Screen shot of tables in the database

Junction Table

Where is the relationship though, you may ask.

Well, do you see the collection of Roles entities in User entity? And do you see the collection of User entities in Role entity? The Entity Framework is smart enough to take these into account and create a "THIRD" table - a Junction table.

Note that the junction table DOES NOT have a corresponding Entity in our context. That is because we do not need it. We could use either User entity or Role entity to get the relevant collection data.

Seeding Data

Many a times, to test the application, we need seed data - test data, that is. The Configuration.cs file that EF creates, is used for placing the code to seed the data.

A Footnote:

In my new project, we use Code First. On my very first day, when my Technical Architect told me that we are using Code First,  all the slides and code from Mike's presentation poured in. Even if I didn't know the intricacies of Code First technique, I did not have a starting trouble - it just took 20 minutes of a sample code and little bit of reading to get into the groove. That was all because I had attended Mike's presentation.  Many of my programmer friends and colleagues do not see the benefit of attending a user group meeting or a code camp. Well, here is one! :) The biggest (and the lamest:)) argument I every hear is that "Oh, we wouldn't be using this technology… "… Well, you never know :)