EntityUI Automatic UI Generator using CodeFirst Approach

• Download source - 1.7 MB

Introduction

EntityUI is basically an idea to be able to create User Interface in ASP.NET applications using Code First approach. I think most programmers would agree that CRUD and Basic UI Interface is the most annoying and repetitive part of application design, especially for Business Applications. It is definitely for me.

The ideal thing for me would be to write my class, and then just say .Save or .Load or .Render, and it should happen automagically. This is the idea behind EntityUI.

Background

Microsoft has been trying to address this for, well, forever and they come up with semi-decent tools. They have the GridView or FormView render the UI, and the CRUD quickly gets written with SQLDataSource. It’s awesome and works really well if you are going to throw a quick page and never maintain it, but it doesn’t work so well with real applications, with a well-designed tiered framework. Then we got Dynamic Controls, and the latest effort seems to be LightSwitch. I have a different idea on how to render UI, and I believe it’s simpler as it starts with the Class the developer writes, and it will be extremely flexible.

I had originally started with the Save and Load design, but then Microsoft released Entity Framework 4.1 that introduced the Code First Approach, and it somewhat takes care of the CRUD. Believe it or not, I had a very similar design in mind. Anyway, they beat me to it, and since that’s available, I wanted to start on the UI part, which will give the developers a similar tool. The way it will work is that using the properties of a class, the EntityUI Framework will create the User Interface.

Using the Code

The first draft of the source code demonstrates how this idea will work. Basically what it shows is that you write your class, then with a few lines of code, you can have your UI rendered!

Here is the model class that we will use in this example:

   Public Class Department
       Public Sub New()
           Me.Courses = New HashSet(Of Course)()
       End Sub
   
       ' Primary key
       Public Property DepartmentID As Integer
       Public Property Name As String
       Public Property Budget As Decimal
       Public Property StartDate As System.DateTime
       Public Property Administrator As System.Nullable(Of Integer)
   
       ' Navigation property
       Public Overridable Property Courses As ICollection(Of Course)
   End Class

Basically the model class I have used for rendering the UI is the same as what Microsoft uses in their Code First Fluent API sample.

It's pretty straight forward and has several self-explanatory properties.

Next, we will write code that will render the UI for the above model. Here is the code that does render the UI:

' Instantiate School Class with Events
Protected WithEvents Departments As New EntityUI(Of Department)

Protected Sub Page_Load(ByVal sender As Object, _
          ByVal e As System.EventArgs) Handles Me.Load

    ' Example on how to use EntityUI to automatically Render Input control
    PlaceHolderUI.Controls.Add(Departments.RenderInputPanel())

End Sub

In the above code, what we do is first create a page level property "Departments" using the EntityUI Framework of Type Department.

In page load, we use the EntityUI Framework's "RenderInputPanel()" method, which basically returns an ASP.NET panel control, with label and input fields for each of the Property of our Model Class, based on the property types.

The Framework also provides several Events. The following code shows how to handle "InputSaved" event.

     Sub SaveClicked() Handles Departments.InputSaved
          ScriptManager.RegisterStartupScript(Me.Page, Page.GetType, _
          "saveclicked", "alert('You pressed Save');", True)
     End Sub

The layout is controlled by standard CSS styles. The EntityUI.css file should be included in the target web application so that these styles can be applied.

Do keep in mind that this is NOT a finished product or final code. This is pretty incomplete, probably version 0.2.

The goal is to basically automatically generate the UI for this class, similar to how Entity Framework generates the SQL CRUD.

Right now, the EntityUI Framework pretty much only works for basic DataTypes like String, Int and Date. The eventual goal/scope of the project is to allow the developer absolute control and flexibility and the following options:

• Add more Input Types (like currency, time, etc.) and also provide Validation
• Ability to override default render methods
• Ability to control which properties/validators/buttons get displayed using a Configuration Class
• Ability to override default CSS style elements
• Get the DropDownList and AutoComplete working
• Ability to Render a Grid for List

Do let me know if anyone would like to contribute and help with development.

Update

I get emails about EnitityUI every once in a while, so just posting an update on the status since the original post. I have added some more controls and functionality to EntityUI, but it's still not complete. I am working a lot with knockout to implement the MVVM pattern in my code now, and it's awesome. I am working on using knockout in EntityUI also. Hopefully there will be new code soon.

I have also been working on a Complete Application that uses Entity UI to allow users to create their own input forms, and then it saves it in the database. The application is called Social Corporate and is in beta at www.socialcorporate.com. It's free. I would appreciate other developers' feedback, and if anyone is interested in implementing it in their project, let me know.