Web-Based Applications in C#: From Problem Analysis to Program Design
This guide covers essential concepts in developing web-based applications using C#. It focuses on event handling, form control validation, and the effective implementation of user interface elements such as buttons, lists, and calendars. Learn how to wire event handler methods for various controls, manage AutoPostBack properties, and implement validation controls to enhance user experience. Additionally, the book explains how to utilize the Calendar control for date selection and display, along with data binding in GridView and DataGrid for dynamic data presentation.
Web-Based Applications in C#: From Problem Analysis to Program Design
E N D
Presentation Transcript
15 Web-Based Applications C# Programming: From Problem Analysis to Program Design 3rd Edition C# Programming: From Problem Analysis to Program Design
Part II C# Programming: From Problem Analysis to Program Design
Events • By default, only a few events trigger postback to the server • Buttons click, events do • Changes in selections to ListBox, RadioButton, RadioButtonList, CheckBox, CheckBoxList, and DropDownList do not • AutoPostBack property can be set to true to automatically trigger a postback to the server • Be judicious with changes to AutoPostBack property C# Programming: From Problem Analysis to Program Design
Adding Common Form-Type Controls Figure 15-19 Web site after adding server controls C# Programming: From Problem Analysis to Program Design
Wiring Event-Handler Methods All three radio buttons wired to the same event-handler method Figure 15-20 Wiring the same event to three RadioButton objects C# Programming: From Problem Analysis to Program Design
RadioButton Event-Handler Method privatevoid radioButton_CheckedChanged(object sender, System.EventArgs e) { if (this.radBtnFresSop.Checked) { this.lblClassif.Text = "Freshmen & Sophomores "; } elseif (this.radBtnJrSr.Checked) { // More statements C# Programming: From Problem Analysis to Program Design
Button Event-Handler Method (continued) privatevoid btnSubmit_Click(object sender, System.EventArgs e) { this.lblSubmit.Text = "Thanks " + this.txtBxFname.Text + "! You will be contacted... "; if (lstBxInterests.SelectedIndex > -1) { this.lblSubmit.Text += " to discuss joining" + " the \"" + this.lstBxInterests.SelectedItem.Text + "\" team."; } } Retrieve from TextBox and selections from ListBox Retrieve values from TextBox and selections from ListBox C# Programming: From Problem Analysis to Program Design
Validation, Custom, and Composite Controls C# Programming: From Problem Analysis to Program Design
Validation Control Properties • Treat validation control objects like any other control • Properties • ControlToValidate • Tie the validation control to a specific form control object • ErrorMessage • Set to the message you want displayed when the input control does not pass the validation C# Programming: From Problem Analysis to Program Design
Validation Controls (continued) RequiredField Validator control is placed beside the object it is validating Figure 15-21 Adding a RequiredFieldValidator control C# Programming: From Problem Analysis to Program Design
Page Validation • Every control field on the page that has an associated validation control is checked when the page is posted • CausesValidation property of Button(s) can be set to false • By default, every Button object's CausesValidation property is set to true C# Programming: From Problem Analysis to Program Design
Calendar Control • Display calendar months on a Web page • Calendar is live • Can view and select dates • Properties • SelectedDate • Used to pick the month, day, and year for display • Initially set to the current date; date can be set programmatically • Customize with gridlines, borders; change font, background, foreground colors; set cell padding and spacing C# Programming: From Problem Analysis to Program Design
Calendar Control (continued) Click here to view “code behind” file Current selection (.aspx file) Use Page_Load( ) event-handler method to set the date with program statements Click here to view HTML tags Current design view Figure 15-23 Switching between .aspx and .aspx.cs files C# Programming: From Problem Analysis to Program Design
Calendar Control (continued) Figure 15-24 Using the Properties window to set the SelectedDate property C# Programming: From Problem Analysis to Program Design
DateTime Class C# Programming: From Problem Analysis to Program Design
Using a Calendar Control in Applications privatevoid btnShowCalendar_Click(object sender, System.EventArgs e) { Calendar1.SelectedDates.Clear( ); meetingDate = new DateTime (DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 8,0,0); meetingDate = meetingDate.AddDays(7); if (meetingDate.DayOfWeek.ToString() == "Sunday") { meetingDate = meetingDate.AddDays(1); } C# Programming: From Problem Analysis to Program Design
Using a Calendar Control in Applications (continued) Calendar1.SelectedDate = meetingDate; this.lblMsg.Text = ("Meeting " + "next week: " +meetingDate.DayOfWeek + ", " + meetingDate.Month + "/" + meetingDate.Day + " at " + meetingDate.Hour + " P.M."); } // end of btnShowCalendar_Click ( ) method C# Programming: From Problem Analysis to Program Design
Calendar Control (continued) Displayed date Figure 15-25 Calendar showing different dates selected C# Programming: From Problem Analysis to Program Design
DataGrid and GridView Controls • Display data in a tabular format • Can bind data to a data source, such as a database • Common data source classes used to bind DataGrid objects to the actual data • DataReader • DataSet C# Programming: From Problem Analysis to Program Design
GridView Control • GridView is a little more sophisticated than DataGrid • GridView features • Automatic data binding • Auto generation of buttons for selecting, editing, and deleting • Automatic sorting • Automatic paging C# Programming: From Problem Analysis to Program Design
Using a DataGrid Control in Applications • Use OleDB Data Provider for Access database • Connection string identifies the provider as an Access database and specifies the name of the database • Follow same guidelines/steps used to connect to database using Windows application • Minor change needed for Web application • DataBind( ) method call is different for Web applications C# Programming: From Problem Analysis to Program Design
WebControls Application– Database Access privatevoid btnShowMembers_Click(object sender, System.EventArgs e) { lblMembers.Visible = true; try { string sConnection = "Provider= Microsoft.ACE.OLEDB.12.0;" + "Data Source=" + "C:\\CSharpProjects\\WebControls\\member.accdb"; OleDbConnection dbConn = new OleDbConnection(sConnection); string sql = "Select FirstName, LastName From memberTable " + " Order By LastName Asc, FirstName Asc;"; C# Programming: From Problem Analysis to Program Design
OleDbCommand dbCmd = new OleDbCommand( ); dbCmd.CommandText = sql; dbCmd.Connection = dbConn; OleDbDataAdapter memberDataAdap = new OleDbDataAdapter( ); memberDataAdap.SelectCommand = dbCmd; memberDS = new DataSet( ); // DataSet declared as protected class member memberDataAdap.Fill(memberDS, "memberTable"); // Binding is only change needed from the Windows app this.dataGrid1.DataBind( ); } // Catch clause goes here C# Programming: From Problem Analysis to Program Design
AccessDataSource • Can use the data visual configuration tools and have these statements automatically generated for you • Instead of writing the program statements • AccessDataSource and SqlDataSource • These classes reduce the need for accessing individual Data Provider classes • All providers (SQL Server, Oracle, ODBC, and OLEDB) can use SqlDataSource. C# Programming: From Problem Analysis to Program Design
AccessDataSource (continued) • AccessDataSource inherits from the SqlDataSource • Use SQL queries to perform data retrieval • Includes large number of properties and methods • Do not have to set the Connection String property • Just identify the location of the Access .mdb file using the DataFile property • Can provide relative path to the data base • Use visual configuration tools to connect C# Programming: From Problem Analysis to Program Design
Using Visual Tools to Connect GridView object dragged to form New Data Source Smart tag Figure 15-26 Binding data source to the GridView C# Programming: From Problem Analysis to Program Design
Use Visual Tools to Connect (continued) Figure 15-27 Connecting to Access database C# Programming: From Problem Analysis to Program Design
Use Visual Tools to Connect (continued) Place database in the reserved App_Data directory Figure 15-28 Relative address for the Access database C# Programming: From Problem Analysis to Program Design
Use Visual Tools to Connect (continued) Figure 15-29 AccessDataSource Object C# Programming: From Problem Analysis to Program Design
Use Visual Tools to Connect (continued) Figure 15-30 Identify what data to retrieve C# Programming: From Problem Analysis to Program Design
Modifying the Data • By default, DataGrid control displays data in read-only format • To allow users to edit data, use Advanced tab from the Data Source Configuration tool to configure the select statement • This generates the additional Insert, Delete, and Update SQL statements • All primary key values must be retrieved as part of the select statement • Key columns can be removed using the smart tag once the configuration is complete C# Programming: From Problem Analysis to Program Design
Use Visual Tools to Connect (continued) Figure 15-31 GridView tasks C# Programming: From Problem Analysis to Program Design
Use Visual Tools to Connect (continued) • When application runs, columns display Edit and Delete • Clicking the Edit button causes the row of data to be displayed in an editable format Figure 15-32 Modifying data table C# Programming: From Problem Analysis to Program Design
Other Controls • Navigation • Can now add site navigation by defining a site map • TreeView and SiteMapPath controls • Data • DetailsView and FormView controls • Display and edit data from different data sources • Automatically retrieve data when page runs C# Programming: From Problem Analysis to Program Design
Other Controls (continued) • Login • Security control that enables you to authenticate users • PasswordRecovery control helps users change or remember passwords • LoginStatus control lets you present a Login or Logout button C# Programming: From Problem Analysis to Program Design
Web Services • Enable exchange of data from one computer to another,over the Internet or an intranet • Applications that return data • Do not involve presentation layer • Uses standard protocols • Hypertext Transfer Protocol (HTTP) • Extensible Markup Language (XML) • Simple Object Access Protocol (SOAP) • Web Services Description Language (WSDL) C# Programming: From Problem Analysis to Program Design
Web Services (continued) • Messages are sent as XML from one method to another • Data is physically returned as part of an XML message • XML uses tags to provide format for describing data like HTML • HTML tags tell browser how to display data in different formats • XML is readable • XML uses tags to describe the data being exchanged C# Programming: From Problem Analysis to Program Design
Windows Communication Foundation (WCF) • Used to build connected service-oriented applications Figure 15-34 WCF service application C# Programming: From Problem Analysis to Program Design
Smart Device Applications (Optional) • Mobile application development involves writing apps for handheld devices • Many different platforms • Windows Mobile OS – compact Microsoft OS • Silverlight for Windows Phone • Windows Phone Developer Tools-CTP must be installed • Applications can be created without a PDA • Emulator that simulates device is included C# Programming: From Problem Analysis to Program Design
Silverlight • Template for developing applications for smart devices targets Silverlight • Web application framework that enables you to integrate multimedia-like graphics, sounds, and animations into applications • Uses a subset of the framework • Graphical user interfaces are less sophisticated • Fewer controls and events C# Programming: From Problem Analysis to Program Design
Silverlight (continued) • User interfaces that are declared in Extensible Application Markup Language (XAML) • XAML file contains a Canvas object, which acts asplaceholder for other elements C# Programming: From Problem Analysis to Program Design
Creating a Smart Device Application • Select File, New, Project, Visual C#, Silverlight for Windows Phone • Select Windows Phone Application • Blank miniature phone is displayed with a left arrow, Windows logo, and a search tool • ContentGridis placed on the phone • Using the WYSIWYG approach, drag and drop controls to the form C# Programming: From Problem Analysis to Program Design
Creating a Smart Device Application (continued) Figure 15-35 Adding controls to the smart device application C# Programming: From Problem Analysis to Program Design
Create Smart Device Application (continued) Figure 15-36 Adding controls to the smart device application C# Programming: From Problem Analysis to Program Design
Drag controls onto phone Set properties Use Format alignment tools Double-click on text to register event-handler methods Create Smart Device Application (continued) Figure 15-37 Metric/English Converter final design C# Programming: From Problem Analysis to Program Design
Creating a Smart Device Application (continued) • Only programming statements added were those included in the event-handler methods privatevoid btnCompute_Click (object sender, System.EventArgs e) { this.lblResult.Text = (double.Parse(this.txtBxV1.Text)* double.Parse(this.txtBxV2.Text)).ToString( ); } private void menuExit_Click (object sender, System.EventArgs e) { this.Close( ); } C# Programming: From Problem Analysis to Program Design
Click Start Without Debugging on the Debug Takes a couple minutes to load emulator Smart device app complete with Web browser Building and Running the Smart Device Application Figure 15-38 Phone emulator C# Programming: From Problem Analysis to Program Design
Creating a Smart Device Application (continued) Figure 15-39 WinPhone App running Figure 15-40 Smart device application output C# Programming: From Problem Analysis to Program Design