Difference between revisions of "DD Class3"

esse quam videri
Jump to: navigation, search
(Data Binding)
m (Text replacement - "syntaxhighlight lang="csharp" line="1" " to "syntaxhighlight lang="csharp"")
 
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
[[Category:Data Design]]
 
[[Category:Data Design]]
 +
 +
==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 [http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innerhtml.aspx 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==
 +
<syntaxhighlight lang="csharp">
 +
//Adding Controls at run time
 +
Button b = new Button();
 +
b.ID = "Button2";
 +
b.Text = "Added Button";
 +
b.Click += new EventHandler(b_Click);
 +
Panel1.Controls.Add(b);
 +
</syntaxhighlight>
 +
 +
 +
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==
 
==Validators==
Line 13: Line 57:
 
Require Field Validator
 
Require Field Validator
  
<csharp>
+
<syntaxhighlight lang="csharp">
 
<asp:RequiredFieldValidator id="valid1_validator"
 
<asp:RequiredFieldValidator id="valid1_validator"
 
         ControlToValidate="valid1"
 
         ControlToValidate="valid1"
Line 20: Line 64:
 
         &nbsp; * Must not be empty  
 
         &nbsp; * Must not be empty  
 
</asp:RequiredFieldValidator>
 
</asp:RequiredFieldValidator>
</csharp>
+
</syntaxhighlight>
  
 
http://iam.colum.edu/dd/classsource/class4/validation/validator_require.aspx
 
http://iam.colum.edu/dd/classsource/class4/validation/validator_require.aspx
Line 32: Line 76:
 
http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class4/validation/validator_range.aspx
 
http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class4/validation/validator_range.aspx
  
<csharp>
+
<syntaxhighlight lang="csharp">
 
<asp:rangevalidator runat="Server"  
 
<asp:rangevalidator runat="Server"  
 
id="age_range"  
 
id="age_range"  
Line 43: Line 87:
 
       *
 
       *
 
</asp:rangevalidator>
 
</asp:rangevalidator>
</csharp>
+
</syntaxhighlight>
  
 
manually check the Page.IsValid state
 
manually check the Page.IsValid state
<csharp>void Page_Load()
+
<syntaxhighlight lang="csharp">void Page_Load()
 
{   
 
{   
 
     //This example shows the validate method and how to show or not show the error message manually
 
     //This example shows the validate method and how to show or not show the error message manually
Line 70: Line 114:
 
     }   
 
     }   
 
}  
 
}  
</csharp>
+
</syntaxhighlight>
  
  
Line 80: Line 124:
  
 
This example assumes the there is a DropDownList called ddlStates
 
This example assumes the there is a DropDownList called ddlStates
<csharp>
+
<syntaxhighlight lang="csharp">
 
<asp:DropDownList id="ddlStates" runat="server" >
 
<asp:DropDownList id="ddlStates" runat="server" >
 
</asp:DropDownList>
 
</asp:DropDownList>
</csharp>
+
</syntaxhighlight>
<csharp>
+
<syntaxhighlight lang="csharp">
 
//beware code fragment below
 
//beware code fragment below
 
ListItem li = new ListItem("SomeState", "SS");      //create a listitem
 
ListItem li = new ListItem("SomeState", "SS");      //create a listitem
Line 90: Line 134:
 
li = new ListItem("AnotherState", "AS");            //make another listitem
 
li = new ListItem("AnotherState", "AS");            //make another listitem
 
ddlStates.Items.Add(li);                            //add the second listitem
 
ddlStates.Items.Add(li);                            //add the second listitem
</csharp>
+
</syntaxhighlight>
  
 
http://iam.colum.edu/dd/classsource/class3/DataBindDropDownStates.aspx [http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/DataBindDropDownStates.aspx source]
 
http://iam.colum.edu/dd/classsource/class3/DataBindDropDownStates.aspx [http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/DataBindDropDownStates.aspx source]
Line 104: Line 148:
 
  [http://iam.colum.edu/datadesign/gbrowser.php?file=/classsource/binding/CheeseArray.aspx.cs CheeseArray.aspx.cs]
 
  [http://iam.colum.edu/datadesign/gbrowser.php?file=/classsource/binding/CheeseArray.aspx.cs CheeseArray.aspx.cs]
  
 +
http://support.microsoft.com/kb/307860
  
 +
Controls that inherit from ListControls or DataListControl can be databound
  
http://iam.colum.edu/dd/classsource/class3/RadioBindDropDownStates.aspx
+
===DataControls===
[http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/RadioBindDropDownStates.aspx source]
+
There are essentially two types of controls that support databinding ListControls and DataBoundControls Presentation Rendering types for data controls
  
http://iam.colum.edu/dd/classsource/class3/DataBindDropDownStates2.aspx
+
*ListControl
[http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/DataBindDropDownStates2.aspx source]
+
Repeat a fixed template
 +
DropDownList,CheckBoxList,RadioButtonList,BulledList
  
Notice the Name and the Value in both of these examples are the same. ListControls support both Name and Value fields and these can have different values. Be when a single dimensional data source is bound to the control the name and value will be the same.
+
*DataBoundControl Iterative Control
In order to define these parameter we need to have a named field from an object.
+
More flexable user defined templates
btw it just wouldn't be fair if I didn't show you how to do it with objects
 
  
http://iam.colum.edu/dd/classsource/class3/DataBindDropDownStatesObjective.aspx
+
* DataGrid - very rich table bound controls
[http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/DataBindDropDownStatesObjective.aspx source]
+
* 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+
  
and finally databinding to sql server (really we are using and object here DataTable)
+
Demo
 +
http://iam.colum.edu/datadesign/classsource/binding/WebControls.aspx [http://iam.colum.edu/datadesign/gbrowser.php?file=/classsource/binding/WebControls.aspx source]
 +
http://iam.colum.edu/datadesign/gbrowser.php?file=/classsource/binding/WebControls.aspx.cs
  
http://iam.colum.edu/dd/classsource/class3/DataBindDropDownStatesData.aspx
+
/WebControls.aspx.cs
[http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/DataBindDropDownStatesData.aspx source]
 
  
Same example with XML
+
==Data Controls and Templates==
 +
There are essentially two types of controls that support databinding <b>ListControls</b> and <b>DataBoundControls</b>
 +
   
 +
Presentation Rendering types for data controls
  
http://iam.colum.edu/dd/classsource/class3/DataBindDropDownStatesCountryData.aspx
+
'''ListControl'''
[http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/DataBindDropDownStatesCountryData.aspx source]
+
: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+
 +
*[http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.formview.aspx FormView]
 +
:single view for form 2.0+
 +
*[http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.aspx ListView]:
 +
:Lookless controls that implements all new 2.0+ templates
 +
 
 +
http://iam.colum.edu/dd/classsource/ado/SimpleADOAllControls.aspx - [http://iam.colum.edu/dd/gbrowser.php?file=/classsource/ado/SimpleADOAllControls.aspx source]
 +
 
 +
==MVC Models and View Models==
 +
 
 +
In the models folder lets make a new class for the model
 +
<syntaxhighlight lang="csharp">
 +
        public class Course
 +
    {
 +
        public string CourseName { get; set; }
 +
        public string CourseNumber { get; set; }
 +
        public bool IsOnline { get; set; }
 +
    }
 +
</syntaxhighlight>       
 +
Now add a new controller with the add controller Default way from generated code way
 +
 
 +
<html>
 +
<img src="http://brookfield.sat.iit.edu/jmeyers/463/images/MVC/MVCController.PNG">
 +
</html>
 +
<syntaxhighlight lang="csharp">
 +
            [HttpPost]
 +
        public ActionResult Create(FormCollection collection)
 +
        {
 +
            try
 +
            {
 +
                // TODO: Add insert logic here
 +
                Course course = new Course() { CourseName = collection["CourseName"],
 +
                    CourseNumber = collection["CourseNumber"],
 +
                    IsOnline = (bool)collection.GetValue("IsOnline").ConvertTo(typeof(Boolean))};
 +
                //return RedirectToAction("Index");
 +
                return View("Create", course);
 +
            }
 +
            catch (Exception e)
 +
            {
 +
                //throw e;
 +
                return View();
 +
            }
 +
        }
 +
</syntaxhighlight>           
 +
Easier way by strong typing the course
 +
<syntaxhighlight lang="csharp">
 +
            [HttpPost]
 +
        public ActionResult Create(Course c)
 +
        {
 +
            return View("Create", c);
 +
        }
 +
</syntaxhighlight>   
 +
Now add the View
 +
<html>
 +
<img src="http://brookfield.sat.iit.edu/jmeyers/463/images/MVC/MVCAddViewCreate.PNG">
 +
</html>
 +
 
 +
===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
 +
<syntaxhighlight lang="csharp">
 +
            [Required]
 +
        [DisplayName("Course Name")]
 +
        [StringLength(50,
 +
          ErrorMessage = "Course Name cannot be longer than 50 characters")]
 +
        public string CourseName { get; set; }
 +
 
 +
        [Required]
 +
        [DisplayName("CourseNumber")]
 +
        [StringLength(12,
 +
          ErrorMessage = "First Name cannot be longer than 12 characters")]
 +
        public string CourseNumber { get; set; }
 +
 
 +
        [Required]
 +
        public bool IsOnline { get; set; }
 +
</syntaxhighlight>
 +
 
 +
==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.
 +
 
 +
<!--
  
 
==Homework==
 
==Homework==
  
Make a table with all of the columns from your cheese registration form
+
Make your own class and make a list or collection of you own objects. This class should be defined in app_code and the objects can be instantiated on the page. Then use databinding to display the list of object with at least 2 list or data controls.
 
 
Convert registration form to use XML and SQL database for the Countries and States.
 
  
http://iam.colum.edu/dd/gbrowser.php?file=/classsource/class3/countryfile.xml
+
Use the VPN to connect to our network and bind data from the cheese database to two controls on two different pages. Use simple drag and drop and SQLDataSource Method.
  
 
Chapter 4 BDD
 
Chapter 4 BDD
 +
-->

Latest revision as of 03:20, 9 February 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

//Adding Controls at run time
Button b = new Button();
b.ID = "Button2";
b.Text = "Added Button";
b.Click += new EventHandler(b_Click);
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

<asp:RequiredFieldValidator id="valid1_validator"
        ControlToValidate="valid1"
        Display="Static"
        runat="server">
        &nbsp; * Must not be empty 
</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

<asp:rangevalidator runat="Server" 
		id="age_range" 
		controltovalidate="age" 
		display="dynamic" 
		errormessage="Age must be an integer between 18 and 65." 
		minimumvalue="18" maximumvalue="65" 
		Type="Integer" 
		EnableClientScript="False">
      *
</asp:rangevalidator>

manually check the Page.IsValid state

void Page_Load()
{   
    //This example shows the validate method and how to show or not show the error message manually
    if(Page.IsPostBack){
        //You can manully call Validate() whenevr you like 
        Page.Validate();
        
        //Now we need to check id the results
        if(!Page.IsValid)
        {
            //Check each control and update the error message apropriately
            if(!age_required.IsValid){
                errorMessage.Text = age_required.ErrorMessage + "<br>";
            }
            else if(!age_range.IsValid){
                errorMessage.Text = age_range.ErrorMessage + "<br>";
            }
        }
        else
		{
		    errorMessage.Text = "no errors";
		}
    }  
}


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

<asp:DropDownList id="ddlStates" runat="server" >
</asp:DropDownList>
//beware code fragment below
ListItem li = new ListItem("SomeState", "SS");      //create a listitem
ddlStates.Items.Add(li);                            //add the listitem to the dropdown
li = new ListItem("AnotherState", "AS");            //make another listitem
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+
single view for form 2.0+
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

        public class Course
    {
        public string CourseName { get; set; }
        public string CourseNumber { get; set; }
        public bool IsOnline { get; set; }
    }

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

            [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here
                Course course = new Course() { CourseName = collection["CourseName"],
                    CourseNumber = collection["CourseNumber"], 
                    IsOnline = (bool)collection.GetValue("IsOnline").ConvertTo(typeof(Boolean))};
                //return RedirectToAction("Index");
                return View("Create", course);
            }
            catch (Exception e)
            {
                //throw e;
                return View();
            }
        }

Easier way by strong typing the course

            [HttpPost]
        public ActionResult Create(Course c)
        {
            return View("Create", c);
        }

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

            [Required]
        [DisplayName("Course Name")]
        [StringLength(50,
          ErrorMessage = "Course Name cannot be longer than 50 characters")]
        public string CourseName { get; set; }

        [Required]
        [DisplayName("CourseNumber")]
        [StringLength(12,
          ErrorMessage = "First Name cannot be longer than 12 characters")]
        public string CourseNumber { get; set; }

        [Required]
        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.