BTI420 notes – Tue Mar 10

More fun topics to help you learn more about web app programming.

.

Topic coverage today

Rich text editing

Microsoft Azure services

Code First Migrations

.

Rich text editing

rich-text-editorCKEditor is a JavaScript app that replaces an HTML <textarea> element with a nice-looking and highly-functional rich text editor.

An example app (named RichTexteditor) is on the GitHub repository.

Here’s what you need to know to use CKEditor:

The HTML <textarea> element must use the ‘name’ attribute, and the attribute’s value must be the name of a property in the view model class.

The HTML <textarea> will obviously be inside an HTML Form.

On a view, get the CKEditor app from its content delivery network (using a standard <script> element).

Then, run the app’s ‘replace’ method to replace the standard <textarea> rectangle with the rich text editor.

.

Controller method to handle the HTML Form post

Normally, the ASP.NET runtime prevents HTML or script code from being posted to a controller method, for obvious security reasons.

In this situation, we know that the rich text editor will include HTML code, and yes, we do want it. Therefore, we have to add this attribute to the controller method that handles the HTML Form post:

ValidateInput(false)

.

Microsoft Azure services

From Wikipedia:

“Microsoft Azure is a cloud computing platform and infrastructure, created by Microsoft, for building, deploying and managing applications and services through a global network of Microsoft-managed datacenters. It provides both PaaS and IaaS services and supports many different programming languages, tools and frameworks, including both Microsoft-specific and third-party software and systems.”

Your professor will guide you on a tour of the services that we will use in this course, as well as services that you may be interested in using in the future. In this course, we will use the website and sql database services.

.

Design model updates, and Code First Migrations

During the lifetime of the programming assignment, you must make some changes to the design model. New properties will be added, maybe some data annotations, and possibly new entity classes.

When you make a change, and then run your app (and view a page in a browser), you will soon see an error message. It told you that the database design has changed, and recommends that you use Code First Migrations.

That’s what you’ll learn now.

Migrations enable you to KEEP YOUR EXISTING DATA when you make minor changes to your design model classes.

It’s a developer technology, but it obviously helps the users, because you can make many changes to your design model classes, and your web app keeps running, with its existing data.

You MUST use Code First migrations to deploy to Microsoft Azure.

.

Before you enable and configure Migrations, you must remove the statement in the MVCApplication class that starts/initializes the data store initializer. Why? Because we now want to keep your existing data, and have Migrations manage that process. So, go ahead and remove the statement that starts/initializes the data store initializer.

.

Configuring Code First Migrations

Configuring Migrations requires two simple tasks:

  1. Enable migrations
  2. After a change (or set of changes), add a ‘migration’ definition, and update the data store.

The first task is to ‘enable’ Migrations. In Visual Studio 2013, open the TOOLS menu. Choose ‘Library Package Manager’, then ‘Package Manager Console’. That will open a command-line window/panel.

Type the following command. It’s a once-per-project command. After you do this, you will not have to do it again for the current project:

enable-migrations

This command configures the base or start state of your the design model classes, and its persistent store implementation.

If you have existing data, and have not made a change to your design model classes, then you can skip the second task below. Read the package manager console messages carefully – it will tell you the status.

Then, whenever you have made a change to your design model classes, you do the second task, by executing the following two commands in the Package Manager Console:

add-migration DescriptiveNameForTheMigrationDefinition 

update-database

In a new (or almost new) project, the descriptive name for your first migration definition can be “Initial” or something similar.

If you anticipate performing many changes, then you can do the add-migration and update-database in a granular way. Or, you could just do all your changes, and run these commands once.

.

Does your web app need initial data?

Before configuring Code First Migrations, you removed the statement in your MvcApplication class that started/initialized the store initializer.

What if your web app really does need initial data?

Copy the code from your StoreInitializer class’ Seed() method, to the new Configure class’ Seed() method. When you do this, wrap it in an ‘if’ statement that enables the code to run only if it needs to, something like this (assuming that we want to add Program objects):

if (context.Programs.Count() == 0)
{
    // Add your Program and Course objects here, and save changes
}

.

Resources and references 

Introduction and overview – Code First Migrations

Migrations commands – EF Migrations Command Reference

.

.

.

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: