Create a new .Net Core MVC web application. Include the JQuery Mobile-Bower library using the Visual Studio Bower Package Manager.

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

Review the resources to learn the special features of JQuery Mobile.

• Create a new .Net Core MVC web application. Include the JQuery Mobile-Bower library using the Visual Studio Bower Package Manager.
• Build a photo gallery website that will size to the device it is displayed on.
• Include the JQuery Mobile finger swipe capability to change gallery pages.
• Include at least a dozen images in the gallery.

Very important

 Attached is the previous task but I wanted to be done in Visual Studio 20017. I want to see the .aspx and .aspx.cs files

 The program must be written on 2017 visual studio

 I want you to create the program following the exact guidelines (especially the web templates) that were used to create the “Hello world” program. The “Hello” program is not the project it is just a guideline on how and where I want to be written. If you follow the instructions of the “Hello” program a .snl file should be created.

 The “Hello” program is just a Guideline, I don’t need you to write it again

 Here are the guidelines:

Hello, World!

“Hello, World!” is a very simple program that is often used as the very first example by many instructors teaching a programming language to new audiences. It shows beginners how to write, compile (if applicable to the language), and run a simple program that outputs “Hello, World!” to the screen using the new language. Now, let us begin by writing this program in C# by creating and running a variation of Hello, World! That greets the world on behalf of the user. We are going to do this using a simple Web Forms application.

• Launch Visual Studio 2017.
• Create a new web project by going to File > New > Project…

 On the next screen, make sure that Web template under the Visual C# section is highlighted. Under this selection, ASP.NET Web Application should be the only project type available. Call the project HelloWorld and choose a location of your choosing for creating the project (feel free to use the same folder structure as shown in the screenshots if you wish so). Also make sure that Create directory for solution checkbox is checked off and click OK to continue.

On the next dialog box, select the Empty template, check off the Web Forms box and click OK. If you are prompted to login to Azure, dismiss the dialog box.

When the project loads, notice the Solution Explorer window on the right hand side of the screen as seen in the image below. As you can see the solution gets the name of the project by default. Don’t worry about the other items in the solution just yet. We will get to them later on.

It’s now time to add a Web Form to the project. As seen in the image below, right click on the

HelloWorld project, choose Add from the context menu and finally select New Item…

In the Add New Item dialog box, choose Web Form, call it Default.aspx, and click Add.

Next, we are going to add the Toolbox window to the IDE. We do this by going to the View menu item on the top and click the Toolbox item as seen in the following image.

The Toolbox window should now be displayed in the IDE. 

Now, dock the Toolbox window to the IDE by clicking the pin icon on the window as seen below.

At this point, the Default.aspx file should be open but if, for some reason, it is not, open it by double clicking it in the Solution Explorer. Next, click on the Label tool in the Toolbox window (don’t release the mouse button), drag it to the code window on the right hand side, and drop it in between the <div>…</div> tags.

The file should now look like what is shown in the following image.

next, drag a TextBox from the Toolbox window to the code window and drop it on the line after the previously added Label as seen below.

Now, drag a Button element from the Toolbox window to the code window and drop it on the line after the previously added TextBox as seen below.

Again, add a <br /> tag after the Button element and hit Enter. Your code should now look like the image below.

Next, drag another Label element from the Toolbox window to the code window and drop it on the line after the Button as seen below.

It is now to update the values of all the ID and Text properties of the added elements. Just look at the next image and change the values to what is displayed. For example, the ID of the TextBox should be changed from TextBox1 to NameBox.

Next, click the Design tab on the bottom of the code window, as seen below, to see a preview of the elements that you have added to the Web Form.

You can also click the Split tab on the bottom of code page to see both the code view and the design view at the same time as seen below.

It’s now time to run the application and view the results in a browser. In the menu bar, click the Internet Explorer button as seen below. Note that depending on the browsers that are installed on your machine, this button might show other browsers such as Google Chrome or Firefox. If you would like to change the browser, just use the small arrow on the right hand side of the button to view the other options available.

The Web Form should now be running in the browser as seen below. If you enter a value in the TextBox and click the Greet! button, nothing happens. This is because all we have done so far is adding controls to the page but we have not programmed the button to do anything just yet. We are going to fix that shortly though.

Now close the browser to end the debug run of the application. 

Back in the IDE, go to the Solution Explorer window, locate the Default.aspx file and click the small arrow on its left to expand it as seen in the next image. There should be two files under this form called Default.aspx.cs and Default.aspx.designer.cs. Double click the Default.aspx.cs file to open it. This is the file that holds the C# code that handles events related to the controls on the form and other events such as what should happen when the form first loads in the browser. For example, if you want to add a click event handler to the Greet! button that you added to the form earlier on,  the handler code goes into this file.

As you can see in the image below, Default.aspx.cs, currently has only one empty handler method for the form (page) load event. In this case, upon loading the page nothing special is happening but if you were, for example, to initialize some variables upon loading the form, this is where you would put your initialization code (don’t worry about these scenarios as we are just beginning).

Back in the Default.aspx file, go to the Split view and in the design view part of it, double click the button as seen in the next image.

Double-clicking the button should create a click event handler in the Default.aspx.cs file. By default, the event handler for the click event of a button called Submit is a method called Submit_Click(). The image below shows the newly created event handler.

Now, we are going to change the handler code for the click event of the button. In essence, we would like to program it so that whenever someone clicks the Submit button,

 

1. The text from the NameBox TextBox is captured. This is done by accessing the Text property of the TextBox

                                                 NameBox.Text

2. A Hello World message is constructed using String concatenation.

                                                “Hello, World! from “ + NameBox.Text + “.”

3. Finally, the message is displayed in the Greet label. This is done by assigning the message to the Text property of the label.

                                                Greet.Text = “Hello, World! from “ + NameBox.Text + “.”;

The updated event handler method can be seen below.

It’s now time to give the application another test run. Once again, click the Internet Explorer button on the menu bar as seen below to launch a debug version of the application in the browser.

The page should now be updated to display the greeting message in the label.

At this point everything looks good; however, the controls (elements) on the page are too close to one another. Let’s make this better by adding some space between the elements on the form.  We have already done this earlier when we typed in the <br /> tags after each control in the Source code view.

This time, we are going do this directly in the Design View (either in via the Design tab or the Split tab) of Default.asp

In order to add an additional line of space between the controls, all you need to do is to point your mouse after each control and hit Enter.

The following image shows the results. Note that in the Source code view there is now an additional   <br /> tag after each element. Also in the Design view, the controls clearly have more space in between them.  

For now, just keep in mind that many tasks can be done in more than one way in Visual Studio. As we make more progress in the course, we will see more examples.

 

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of