Develop and construct an APA formatted paper (also use LIRN (or JSTOR), Internet, and the textbook)...

Question

Question

Develop and construct an APA formatted paper (also use LIRN (or JSTOR), Internet, and the textbook)...

Develop and construct an APA formatted paper (also use LIRN (or JSTOR), Internet, and the textbook) that provides a detailed analysis of the following concepts: · Description of ASP.NET’s functionality and what software is needed for developing applications · Detailed procedures for creating an ASP.NET application using Visual Studio · The proper procedure for using HTML, CSS, and Bootstrap in Web From applications · The development of multi-page web applications · Debugging ASP.NET applications · Implementation of server controls.

Engineering Computer-Science

0 0

Add a comment Transcribed image text

Answer 1

Answer #1

Softwares required to work with ASP.NET applications

=========================================

IDE (Integrated Developement environment)

--------------------------------------------------------------------

in any language to develop any application IDE is must.

The IDE is a core piece of software development these days and is the one tool developers use on a daily basis.

The default IDE for Microsoft developers (which includes ASP.NET) is Visual Studio;

Visual studio includes almost everything needed to develop, test, and debug web applications

Version control

Any one version control is required to checkin or checkout code

popular version controls are

git
TFS (team foundation server)
SVN

the advantage of version control are we can save our work

Browser development tools

When building web applications, prefer to use Chrome and its powerful suite of developer tools, which allow you to scrutinize every aspect of a web page (CSS, JavaScript, DOM, resource files, etc.) and offers a JavaScript console. You can change CSS and other elements on the fly to get an instant preview without touching the source.

IIS(internet information server)

Access to an IIS web server. (IIS Express is free for Windows platforms)

To run an application, create a virtual directory and upload the source files to the associated physical directory.

IIS will compile the application for you when you hit the site for the first time.

Detailed procedures for creating an ASP.NET application using Visual Studio

Create ASP.Net MVC Application

Following are the steps to create a project using project templates available in Visual Studio.

Step 1 − Open the Visual Studio. Click File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Application.

Step 4 − Enter the project name, MVCFirstApp, in the Name field and click ok to continue. You will see the following dialog which asks you to set the initial content for the ASP.NET project.

Step 5 − To keep things simple, select the ‘Empty’ option and check the MVC checkbox in the Add folders and core references section. Click Ok.

It will create a basic MVC project with minimal predefined content.

Once the project is created by Visual Studio, you will see a number of files and folders displayed in the Solution Explorer window.

As you know that we have created ASP.Net MVC project from an empty project template, so for the moment the application does not contain anything to run.

Step 6 − Run this application from Debug → Start Debugging menu option and you will see a 404 Not Found Error.

The default browser is, Internet Explorer, but you can select any browser that you have installed from the toolbar.

Add Controller

To remove the 404 Not Found error, we need to add a controller, which handles all the incoming requests.

Step 1 − To add a controller, right-click on the controller folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Step 2 − Select the MVC 5 Controller – Empty option and click ‘Add’ button.

The Add Controller dialog will appear.

Step 3 − Set the name to HomeController and click the Add button.

You will see a new C# file HomeController.cs in the Controllers folder, which is open for editing in Visual Studio as well.

Step 4 − To make this a working example, let’s modify the controller class by changing the action method called Index using the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCFirstApp.Controllers {
   public class HomeController : Controller {
      // GET: Home
      public string Index(){
         return "Hello World, this is ASP.Net MVC Tutorials";
      }
   }
}

Step 5 − Run this application and you will see that the browser is displaying the result of the Index action method.

Debugging ASP.NET applications

Debugging allows the developers to see how the code works in a step-by-step manner, how the values of the variables change, how the objects are created and destroyed, etc.

When the site is executed for the first time, Visual Studio displays a prompt asking whether it should be enabled for debugging:

When debugging is enabled, the following lines of codes are shown in the web.config:

<system.web>
   <compilation debug="true">
      <assemblies>
      ..............
      </assemblies>
   </compilation> 
</system.web>

Breakpoints

Breakpoints specifies the runtime to run a specific line of code and then stop execution so that the code could be examined and perform various debugging jobs such as, changing the value of the variables, step through the codes, moving in and out of functions and methods etc.

To set a breakpoint, right click on the code and choose insert break point. A red dot appears on the left margin and the line of code is highlighted as shown:

You can modify the properties of the breakpoint from the Properties menu obtained by right clicking the breakpoint glyph:

The location dialog box shows the location of the file, line number and the character number of the selected code. The condition menu item allows you to enter a valid expression, which is evaluated when the program execution reaches the breakpoint:

Debug ASP.NET Core apps

IIS Express is the default, and is preconfigured. If you're debugging on Local IIS, make sure you meet the requirements for local IIS debugging.

Select the ASP.NET Core project in Visual Studio Solution Explorer and click the Properties icon, press Alt+Enter, or right-click and choose Properties.
Select the Debug tab.
In the Properties pane, next to Profile,
- For IIS Express, select IIS Express from the dropdown.
- For local IIS, select the app name from the dropdown, or select New, create a new profile name, and select OK.
Next to Launch, select either IIS Express or IIS from the dropdown.
Make sure Launch browser is selected.
Under Environment variables, make sure that ASPNETCORE_ENVIRONMENT is present with a value of Development. If not, select Add and add it.

7.Use File > Save Selected Items or Ctrl+S to save any changes.

8.To debug the app, in your project, set breakpoints on some code. In the Visual Studio toolbar, make sure the configuration is set to Debug, and either IIS Express, or the new IIS profile name, appears in the emulator field.

9.To start debugging, select IIS Express or <IIS profile name> in the toolbar, select Start Debugging from the Debug menu, or press F5. The debugger pauses at the breakpoints.

Implementation of server controls

The ASP.NET page framework includes a number of built-in server controls that are designed to provide a more structured programming model for the Web. These controls provide the following features:

Automatic state management.
Simple access to object values without having to use the Request object.
Ability to react to events in server-side code to create applications that are better structured.
Common approach to building user interfaces for web pages.
Output is automatically customized based on the capabilities of the browser.

In addition to the built-in controls, the ASP.NET page framework also provides the ability to create user controls and custom controls. User controls and custom controls can enhance and extend existing controls to build a much richer user interface.

HTML server controls

The HTML server controls are HTML elements that include a runat=server attribute. The HTML server controls have the same HTML output and the same properties as their corresponding HTML tags. In addition, HTML server controls provide automatic state management and server-side events. HTML server controls offer the following advantages:

The HTML server controls map one to one with their corresponding HTML tags.
When the ASP.NET application is compiled, the HTML server controls with the runat=server attribute are compiled into the assembly.
Most controls include an OnServerEvent for the most commonly used event for the control. For example, the <input type=button> control has an OnServerClick event.
The HTML tags that are not implemented as specific HTML server controls can still be used on the server side; however, they are added to the assembly as HtmlGenericControl.
When the ASP.NET page is reposted, the HTML server controls keep their values.

The System.Web.UI.HtmlControls.HtmlControl base class contains all of the common properties. HTML server controls derive from this class.

To use an HTML server control, use the following syntax (which uses the HtmlInputText control as an example):

======================================

======================================

Web server controls

Web controls are similar to the HTML server controls such as Button, TextBox, and Hyperlink, except that Web controls have a standardized set of property names. Web server controls offer the following advantages:

Make it easier for manufacturers and developers to build tools or applications that automatically generate the user interface.
Simplify the process of creating interactive Web forms, which requires less knowledge of how HTML controls work and make the task of using them less prone to errors.

The System.Web.UI.WebControls.WebControl base class contains all of the common properties. Most of the Web server controls derive from this class.

To use a Web server control, use the following syntax (which uses the TextBox control as an example):

=====================================

<asp:textbox text="hello world" runat=server />

===================================

Web server controls can be divided into four categories:

Basic Web Controls
Validation Controls
List Controls
Rich Controls

Basic web controls

Basic Web controls provide the same functionality as their HTML server control counterparts. However, basic Web controls include additional methods, events, and properties against which you can program.

Validation controls

Validation controls are used to validate the values that are entered into other controls of the page. Validation controls perform client-side validation, server-side validation, or both, depending on the capabilities of the browser in which the page is displayed. Validation controls offer the following advantages:

You can associate one or more validation controls with each control that you want to validate.
The validation is performed when the page form is submitted.
You can specify programmatically whether validation should occur, which is useful if you want to provide a cancel button so that the user can exit without having to fill valid data in all of the fields.
The validation controls automatically detect whether validation should be performed on the client side or the server side.

Properties of the Server Controls

ASP.NET server controls with a visual aspect are derived from the WebControl class and inherit all the properties, events, and methods of this class.

The WebControl class itself and some other server controls that are not visually rendered are derived from the System.Web.UI.Control class. For example, PlaceHolder control or XML control.

ASP.Net server controls inherit all properties, events, and methods of the WebControl and System.Web.UI.Control class.

The following table shows the inherited properties, common to all server controls:

Property	Description
AccessKey	Pressing this key with the Alt key moves focus to the control.
Attributes	It is the collection of arbitrary attributes (for rendering only) that do not correspond to properties on the control.
BackColor	Background color.
BindingContainer	The control that contains this control's data binding.
BorderColor	Border color.
BorderStyle	Border style.
BorderWidth	Border width.
CausesValidation	Indicates if it causes validation.
ChildControlCreated	It indicates whether the server control's child controls have been created.
ClientID	Control ID for HTML markup.
Context	The HttpContext object associated with the server control.
Controls	Collection of all controls contained within the control.
ControlStyle	The style of the Web server control.
CssClass	CSS class
DataItemContainer	Gets a reference to the naming container if the naming container implements IDataItemContainer.
DataKeysContainer	Gets a reference to the naming container if the naming container implements IDataKeysControl.
DesignMode	It indicates whether the control is being used on a design surface.
DisabledCssClass	Gets or sets the CSS class to apply to the rendered HTML element when the control is disabled.
Enabled	Indicates whether the control is grayed out.
EnableTheming	Indicates whether theming applies to the control.
EnableViewState	Indicates whether the view state of the control is maintained.
Events	Gets a list of event handler delegates for the control.
Font	Font.
Forecolor	Foreground color.
HasAttributes	Indicates whether the control has attributes set.
HasChildViewState	Indicates whether the current server control's child controls have any saved view-state settings.
Height	Height in pixels or %.
ID	Identifier for the control.
IsChildControlStateCleared	Indicates whether controls contained within this control have control state.
IsEnabled	Gets a value indicating whether the control is enabled.

Example

A Tree view control comes under navigation controls. Other Navigation controls are: Menu control and SiteMapPath control.

Add a tree view control on the page. Select Edit Nodes... from the tasks. Edit each of the nodes using the Tree view node editor as shown:

Once you have created the nodes, it looks like the following in design view:

The AutoFormat... task allows you to format the tree view as shown:

Add a label control and a text box control on the page and name them lblmessage and txtmessage respectively.

Write a few lines of code to ensure that when a particular node is selected, the label control displays the node text and the text box displays all child nodes under it, if any. The code behind the file should look like this:

=========================================

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;

using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;
 
namespace eventdemo {
   public partial class treeviewdemo : System.Web.UI.Page {
   
      protected void Page_Load(object sender, EventArgs e) { 
         txtmessage.Text = " "; 
      }
      
      protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e) {
      
         txtmessage.Text = " "; 
         lblmessage.Text = "Selected node changed to: " + TreeView1.SelectedNode.Text;
         TreeNodeCollection childnodes = TreeView1.SelectedNode.ChildNodes;
         
         if(childnodes != null) {
            txtmessage.Text = " ";
            
            foreach (TreeNode t in childnodes) {
               txtmessage.Text += t.Value;
            }
         }
      }
   }
}

===================================

Execute the page to see the effects. You will be able to expand and collapse the nodes.

Types of Web Applications

The inception of web introduced hypertext documents but those were replaced by the sophisticated and feature-rich web apps. The current web application development scene can be divided into two approaches. They are:

1. Multi Page Application
2. Single Page Application

What is Multi Page Application?

Multi page applications are the traditional web applications that reload the entire page and displays the new one when a user interacts with the web app.

Each time when a data is exchanged back and forth, a new page is requested from the server to display in the web browser. This process takes time to generate the pages on the server, sending it to a client and displaying in the browser which may affect the user experience.

However, AJAX had made it possible to render just a particular component of the application, but this makes the development process even more difficult and complex.

Benefits of Multi Page Applications

1. Performs well on the search engine.
2. Provides a visual map of the web app to the user.

Drawbacks of Multi Page Applications

1. Comparatively complex development
2. Coupled backend and frontend

What is Single Page Application?

As per the name suggests, single page applications consists just one single page. SPAs present the content in an easy, elegant and effective way as it loads all the content on just one single page rather than navigating the user to different pages.

SPAs are faster than traditional web applications because they execute the logic in the web browser itself rather than on the server. And after the initial page load, only data is sent back and forth instead of the entire HTML that reduces the bandwidth.

Benefits of Single Page Applications

1. Single Page Apps are smooth and fast.
2. They are easy to develop and deploy.
3. SPAs are easier to debug.
4. Can be transited to mobile apps by reusing the same backend code.

Drawbacks of Single Page Applications

1. SPAs perform poor on the search engine. But now, with isomorphic rendering/server-side rendering even SPAs can be optimized for search engine too.
2. Single page applications provide single sharing link.
3. They are less secure compared to traditional multi-page apps because of its cross-site scripting.

Bootstrap in Asp.Net MVC Application

Bootstrap is an open-source HTML and CSS based framework that helps to develop responsive and cross browser webpages easily. It is originally developed for internal use in Twitter and later released as free and open-source for developing web pages.

Besides UI styles, it also has number of jQuery based plugins for building many of useful front-end components like Carousel, Alerts, Pop-up components, etc. For Asp.Net developers, Visual Studio IDE includes Bootstrap package by default in all of its web project templates.

Benefits

The complexity in styling UI elements is made simpler. It is to be noted that most of the web developers are dependent on UI designers for themes and stylesheets until Bootstrap released.
It helps in building responsive web pages easily. Webpages using Bootstrap will auto adjust to various viewports, like smart phones, tablets and desktop screens.
Works in all latest browsers.
It provides many re-usable UI components.
Availability of various free plugins and templates.

several ways to achive multipage web application

=======================================

Put each section in its own div and use javascript to show/hide each section
Put each section in its own asp:Panel and show/hide each section on postback
Put each section in its own page and capture postback from previous page on the next page

Configuring Bootstrap

Download the minified Bootstrap package from here. Unzip the package and copy all the 3 folders into your application root or to the folder where you maintain the styles and scripts. Unzipped package,

If you are using Visual Studio, then creating a new web project will automatically include all necessary bootstrap files for start using bootstrap. If it is not included, you can download using Nuget. On solution explorer, right click project and select “Nuget Package Manager..". Search for Bootstrap and click Install. This will download and install the bootstrap into your project.

Alternatively, you can use CDN instead of maintaining a local bootstrap file copies.

Include the bootstrap stylesheet under head section of the webpage(or your master page layout)

<head>

<title>@ViewBag.Title - My ASP.NET MVC Application</title>

</head>

The 2 meta tags, that sets charset and viewport are mandatory.

Note- I have copied bootstrap styles to Content folder under root directory.

Include the script file before the <body> closing tag. jQuery is necessary if you will use any bootstrap plugin.

</body>

Applying Bootstrap Styles

Bootstrap provides a responsive fluid design for front end by using a 12 columns Grid Layout system.

Grid Layout

The Grid Layout design splits page into 12 columns (or parts) to form a row and controls can be placed inside each column.

Row with 12 separate columns

==========================

</div>

A row can also be defined by combining columns. For example, the below row splits a row into 2, first part taking the width of 8 columns and the other taking width of 4 columns.

</div>

Use of JavaScript in Asp.Net MVC

Now we are in to development of MVC where we would be mostly working with Client side technology the most for make you application lightweight. We would use JavaScript, jQuery library and Bootstrap CSS to make our website interactive. We can validate our Form (.aspx, .html, .cshtml) before sending it server and making ajax calls (post or get) we can reduce response time to load website and provide better user experience for website.

What is JavaScript?

JavaScript is a client-sided scripting language.
JavaScript is relatively simple to learn and implement.
JavaScript provide very interactive user interfaces and dynamic websites.
JavaScript is supported by all browser.
JavaScript is open and cross-platform.

e.g. Let’s have a small example to understand need of JavaScript.

If we have a Registration Form developed in ASP.NET Webforms or MVC and we are validating it on server side. When user fills this Form and submit it to server the request goes to server and then method for Validating Form is called after that if we have improper value then it will return error message which will be displayed by browser. This process take too much time and creates bad user experience at your website or web application. If we validate this same Registration Form on client side with using JavaScript or JQuery we would save valuable time of user by saving round trip to sever for validating. This process will be too fast and will create good user experience at your website or web application. It’s good to do Client side validation first which will send valid data to server and User using this will also love to use it.

css file

to add new css file..

right click on your project - Add new item - select stylesheet - click Ok

to add existing .css file..

write like this

===================================

.body
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

and in aspx page you can refere

========================================

Hide Copy Code<link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />

===========================================

Creating an HTML Input Page

Razor Example

<html>
<body>
@{
if (IsPost) {
string companyname = Request["CompanyName"];
string contactname = Request["ContactName"];
<p>You entered: <br />
Company Name: @companyname <br />
Contact Name: @contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Name:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
}
</body>
</html>

0 0

Add a comment

Develop and construct an APA formatted paper (also use LIRN (or JSTOR), Internet, and the textbook)...

Homework Answers

Post as a guest

Earn Coins

Not the answer you're looking for?

Similar Questions

Need Online Homework Help?

Active Questions