BTI420 notes – Wed Jan 22

More work with HTML Form elements. Scaffolding introduction. More about the Razor View Engine. Get started with HTML Helpers.

.

Checkpoint and brief review

We have completed two full weeks of the course. Some of the topics are familiar, but many are new. Let’s pause for a few minutes, and make sure that you have a good foundation of knowledge.

You must be comfortable with the structure and coding approach for an ASP.NET MVC web app.

Delivering content to the user (on a view) is a critical skill to have.

Equally important, you must be able to get user data into your app.

In this brief discussion, we’ll cover the important topics and concepts. If you have a question, please ask.

There’s a quiz in this week’s computer-lab room session, at the beginning of the timeslot.

.

More work with HTML Form elements

In this course, you have experience with these HTML Form elements:

  • input type=text
  • input type=submit

In this section, you will learn how to render these elements:

  • multi-line text area
  • drop-down list
  • list box, single item select
  • list box, multiple item select
  • radio button group (choose only one)
  • check box group (choose zero or more)

.

Although we’ll build some of this in real time, there’s a posted code example that supports this topic.

.

Introduction to “scaffolding”

This is a feature of the framework that’s well-loved by developers.

Question – what web app programming task is annoying?

Answer – for most people, its programming pages that perform common data operations – get-all, get-one, create, update, and delete.

Scaffolding helps address this task. We can build controllers easier, and views easier. Although some of the results may not make a web designer happy, they enable us to get results fast, and build a base that can be extended.

The ASP.NET MVC designers didn’t invent this approach. It was a well-established feature by the time they got started in 2009. Every major web app framework does this now.

We’ll create an app that performs data operations, using scaffolding. You’ll also learn to create a “manager” class for an ASP.NET web app that centralizes data operations. It’s a transitional concept, on the way to a more modular approach in the near future.

Although we’ll build some of this in real time, there’s a posted code example that supports this topic.

.

More about the Razor View Engine

The textbook has good coverage of this topic in chapter 3, “Views”.

The Razor View Engine is used during request processing to generate an HTML response. The view is the source code file that contains markup and code expressions.

  • Markup language is HTML
  • Code expression language is (for us in this course) C#

Begin a code expression with the ‘at’ sign, @. Then use C#. Razor will transition back to markup at the end of the code expression (in most situations).

In a view, the “Model” property is the strongly-typed model object that is passed in from the controller. It is dereferenced with “@Model”.

The “ViewBag” property provides access to other data that is passed in from the controller. It is dereferenced with “@ViewBag”.

A multi-line code expression is placed in a code block: @{ }

Use parentheses to remove ambiguity: @( )

.

Get started with HTML Helpers

The textbook has good coverage of this topic in chapter 5, “Forms and HTML Helpers”.

You have seen how easy it is to write code for views. In the “scaffolding” topic above, you noticed that scaffolded views included code expressions that began with “Html”. These are HTML Helpers, which are intended to make views easy to write.

HTML Helpers offer these benefits:

  • Link (URI) resolution at runtime
  • Less code required to render some HTML Forms elements
  • Model binding
  • User interface support for interaction and error message display

.

Simple helpers

  • ActionLink – i.e. HTML.ActionLink()

As you will see on the “Login” page, you can also use the Textbox and Password helpers. However, they get more useful when there’s a model object involved.

.

Helpers used with model data

Helpers offer more benefits when used with model data (specifically model binding, and user interface support). You can use these helpers:

  • Textbox
  • Password
  • Label
  • TextArea
  • DropDownList
  • Listbox

.

.

.

.

.

.

.

.

.

.

.

.

Advertisements
  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: