Difference between revisions of "DD Class3"

Revision as of 18:28, 25 January 2016

Review HW

Basic Events

Button and controls can cause PostBack and can register their own events like OnClick

http://iam.colum.edu/dd/browser/browser.aspx?f=/classsource/events

OnCommand

Commands Rather than OnClick

http://iam.colum.edu/dd/classsource/events/Command.aspx

http://iam.colum.edu/dd/gbrowser.php?file=/classsource/events/Command.aspx.cs

Labels and Panels

demo labels and innerHtml on regular html tags

Control Loops

List Controls

List Controls .Items check .Checked to find Checked controls

Looping through the Items collection in a ListControl. Example In Class!!!

Dynamically Adding Contols

1 //Adding Controls at run time
2 Button b = new Button();
3 b.ID = "Button2";
4 b.Text = "Added Button";
5 b.Click += new EventHandler(b_Click);
6 Panel1.Controls.Add(b);

Questions?

VPN how to connect via VPN. You have all access to our network off campus. VPN will allow you to use local machine names iamdbv.iam.local or siam2.iam.local from off campus.

http://imamp.colum.edu/mediawiki/index.php/IAM_VPN

Validators

Validating Input

Using aspx validators

Types of validations and error messages

http://msdn2.microsoft.com/en-us/library/aa479045.aspx

Require Field Validator

1 <asp:RequiredFieldValidator id="valid1_validator"
2         ControlToValidate="valid1"
3         Display="Static"
4         runat="server">
5         &nbsp; * Must not be empty 
6 </asp:RequiredFieldValidator>

http://iam.colum.edu/dd/classsource/class4/validation/validator_require.aspx http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class4/validation/validator_require.aspx

Range validator

This example shows the validate method and how to show or not show the error message manually

http://iam.colum.edu/dd/classsource/class4/validation/validator_range.aspx http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class4/validation/validator_range.aspx

 1 <asp:rangevalidator runat="Server" 
 2 		id="age_range" 
 3 		controltovalidate="age" 
 4 		display="dynamic" 
 5 		errormessage="Age must be an integer between 18 and 65." 
 6 		minimumvalue="18" maximumvalue="65" 
 7 		Type="Integer" 
 8 		EnableClientScript="False">
 9       *
10 </asp:rangevalidator>

manually check the Page.IsValid state

 1 void Page_Load()
 2 {   
 3     //This example shows the validate method and how to show or not show the error message manually
 4     if(Page.IsPostBack){
 5         //You can manully call Validate() whenevr you like 
 6         Page.Validate();
 7         
 8         //Now we need to check id the results
 9         if(!Page.IsValid)
10         {
11             //Check each control and update the error message apropriately
12             if(!age_required.IsValid){
13                 errorMessage.Text = age_required.ErrorMessage + "<br>";
14             }
15             else if(!age_range.IsValid){
16                 errorMessage.Text = age_range.ErrorMessage + "<br>";
17             }
18         }
19         else
20 		{
21 		    errorMessage.Text = "no errors";
22 		}
23     }  
24 }

Progamatically add and Bind Data

You can dynamically add list items to and control that inherits ListControl ListControl

To add items to a ListControl use the ListControls Items.Add() function

This example assumes the there is a DropDownList called ddlStates

1 <asp:DropDownList id="ddlStates" runat="server" >
2 </asp:DropDownList>

1 //beware code fragment below
2 ListItem li = new ListItem("SomeState", "SS");      //create a listitem
3 ddlStates.Items.Add(li);                            //add the listitem to the dropdown
4 li = new ListItem("AnotherState", "AS");            //make another listitem
5 ddlStates.Items.Add(li);                            //add the second listitem

http://iam.colum.edu/dd/classsource/class3/DataBindDropDownStates.aspx source

Same this but with RadioButtonList

Data Binding

In class

How to add an array to a table or drop down?
http://iam.colum.edu/datadesign/classsource/binding/CheeseArray.aspx source
CheeseArray.aspx.cs

http://support.microsoft.com/kb/307860

Controls that inherit from ListControls or DataListControl can be databound

DataControls

There are essentially two types of controls that support databinding ListControls and DataBoundControls Presentation Rendering types for data controls

• ListControl

Repeat a fixed template DropDownList,CheckBoxList,RadioButtonList,BulledList

• DataBoundControl Iterative Control

More flexable user defined templates

• DataGrid - very rich table bound controls
• DataList - column or HTML flow bound control
• Repeater - lookless data control (no predetermined formating)
• GridView - very rich table bound controls with Paging Sorting Selecting Editing v 2.0+
• DetailsView - single record editor Paging Sorting Selecting Editing v 2.0+
• FormView - single view for form 2.0+

Demo http://iam.colum.edu/datadesign/classsource/binding/WebControls.aspx source http://iam.colum.edu/datadesign/gbrowser.php?file=/classsource/binding/WebControls.aspx.cs

/WebControls.aspx.cs

Data Controls and Templates

There are essentially two types of controls that support databinding ListControls and DataBoundControls

Presentation Rendering types for data controls

ListControl

we looked at list contorls in class 2

Repeat a fixed template

• DropDownList
• CheckBoxList
• RadioButtonList
• BulledList

DataBoundControl Iterative Control

More flexable user defined templates

• DataGrid

very rich table bound controls

• DataList

column or HTML flow bound control

• Repeater

lookless data control (no predetermined formating)

• GridView

very rich table bound controls with Paging Sorting Selecting Editing v 2.0+

• DetailsView

single record editor Paging Sorting Selecting Editing v 2.0+

• FormView

single view for form 2.0+

• ListView:

Lookless controls that implements all new 2.0+ templates

http://iam.colum.edu/dd/classsource/ado/SimpleADOAllControls.aspx - source

MVC Models and View Models

In the models folder lets make a new class for the model

1         public class Course
2     {
3         public string CourseName { get; set; }
4         public string CourseNumber { get; set; }
5         public bool IsOnline { get; set; }
6     }

Now add a new controller with the add controller Default way from generated code way

 1             [HttpPost]
 2         public ActionResult Create(FormCollection collection)
 3         {
 4             try
 5             {
 6                 // TODO: Add insert logic here
 7                 Course course = new Course() { CourseName = collection["CourseName"],
 8                     CourseNumber = collection["CourseNumber"], 
 9                     IsOnline = (bool)collection.GetValue("IsOnline").ConvertTo(typeof(Boolean))};
10                 //return RedirectToAction("Index");
11                 return View("Create", course);
12             }
13             catch (Exception e)
14             {
15                 //throw e;
16                 return View();
17             }
18         }

Easier way by strong typing the course

1             [HttpPost]
2         public ActionResult Create(Course c)
3         {
4             return View("Create", c);
5         }

Now add the View

MVC Validation

MVC Scaffolding and Validating with the Model

Data Annotation http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model Or Model State http://msdn.microsoft.com/en-us/library/dd410404(v=vs.90).aspx The class can then be decorated to support validation. You need to include the data annotations fields

using System.ComponentModel.DataAnnotations;
using System.ComponentModel;
           

The you can add code decorators

 1             [Required]
 2         [DisplayName("Course Name")]
 3         [StringLength(50,
 4           ErrorMessage = "Course Name cannot be longer than 50 characters")]
 5         public string CourseName { get; set; }
 6 
 7         [Required]
 8         [DisplayName("CourseNumber")]
 9         [StringLength(12,
10           ErrorMessage = "First Name cannot be longer than 12 characters")]
11         public string CourseNumber { get; set; }
12 
13         [Required]
14         public bool IsOnline { get; set; }

Home Work

2 pts ASPX Cheese Reg form

2 pts MVC Simple Cheese form

1 pt HTML Cheese Form

Build registration form for cheese conference in html and then build the same form in aspx.

Cheese Registration System

The html page should post a page that displays thank you message. The aspx form should post back to itself, once the form has posted back the survey should be hidden the page should show a summary of the form and a thank you message.

Use the simple course Model above to create an MVC page that validates a course. When the form posts a cheese a view with a summary of the course should be displayed.