Click here to Skip to main content
15,867,568 members
Articles / Web Development / ASP.NET

EntityUI Automatic UI Generator using CodeFirst Approach

Rate me:
Please Sign up or sign in to vote.
4.21/5 (5 votes)
7 May 2013CPOL4 min read 34.8K   613   11   9
Automatic UI Generator with two-way binding for ASP.NET Forms from an object using Code First Principals

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:

VB.NET
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:

VB.NET
' 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.

VB.NET
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
My area of expertise is developing management database systems for business so that they can efficiently store and lookup existing customer's information and related data, and be able to generate various reports. My goal is to always deliver innovative design and a user friendly interface.

Comments and Discussions

 
QuestionCool Pin
jfriedman8-Mar-14 1:26
jfriedman8-Mar-14 1:26 
I like your idea however I think that you would have been better suited to use HTML and CSS as a foundation.

In that way you could have multiple rendering platforms already at your disposal and then you could utilize extra attributes in the html to annotate intricacies which are relevant to only certain platforms or environments.

Overall the article is succinct and gets the point across fairly well in such a small amount of typing and is very easy to digest and leave the reader with little to desire in terms of explanations.

Keep up the good work!
AnswerRe: Cool Pin
Razi Syed12-Mar-14 4:12
Razi Syed12-Mar-14 4:12 
QuestionRead filled fields in the SaveClicked function Pin
The Programmer13-May-13 1:19
The Programmer13-May-13 1:19 
QuestionSome theoretical underpinnings for your project Pin
kennardconsulting15-May-12 20:15
kennardconsulting15-May-12 20:15 
GeneralRe: Some theoretical underpinnings for your project Pin
Razi Syed15-May-12 20:44
Razi Syed15-May-12 20:44 
QuestionContribute your development Pin
alagunellaikumar11-Apr-12 23:37
alagunellaikumar11-Apr-12 23:37 
QuestionReinventing the wheel. Pin
Brady Kelly8-Apr-12 2:42
Brady Kelly8-Apr-12 2:42 
AnswerRe: Reinventing the wheel. Pin
razisyed8-Apr-12 16:53
razisyed8-Apr-12 16:53 
QuestionWhere is the source for EntityUI and WebUI DLLs? Pin
Jason Vogel28-Mar-12 5:38
Jason Vogel28-Mar-12 5:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.