Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
See more: (untagged)
Hi everyone i have a project to submitt can anyone help me out with this, i have 1 week fr 28-09-12/3-10-12, pls i would be thankfull to u all:
Lab 2 - Asp.Net MVC 3
This lab will include HTML, CSS, Javascript, some Asp.Net MVC3 that holds together
it, and your twitter feed and favorite songs as a Spotify playButton! Labs can look quite
long out, but since you've done the exercises in the course so far, you have basically already done more
than half the labs.
Labs are a small group lab - you will be working in the form of pair programming, which is
a form of work such as applied if one follows the development extreeme
Programming (XP). You will build web application in groups of two quite easily. To
be extra clear: You should sit both simultaneously and help build the common
parts (not split them individually). Both should be involved in kodandet. The only thing you should
do individually, the "own" page of the lab, and report afterwards.
The deadline to declare is the last day of the course, that is Friday the 28th september. The project
report you to me in a supervision session and the reports you send in to me by email.
Description of what you should do
● The web application must include a home page that includes a clock that
updated every second (so it shows the correct time).
● There should be a page for you each with well-chosen cuts out your CVs (from Lab1).
○ In addition, you are on your own side also have your Twitter Feed (or if you are
like me and do not have a twitter feed, so you can really excellent to have someone
else)
○ and a Spotify Play button or a Grooveshark widget with your favorite song, so that
visitor quickly and easily listen to it.
● Further, you should be able to play nummergissarspelet (as you recall from
Javascript exercise)
● and you will also be able to play a variant where the logic is handled on the server (backend)
instead of in the browser. Thus, two versions of the same game.
● Finally, you should both (individually) write a small report on the lab (instructions
follow).
You will then jointly sign the front and number games pages and then individually write
side of yourselves. Everything must be put together into a single project, as you then reported.
The report you write individual then and email in to me (my address is, among all else
important about the course in course pm on Jensen online)
The general requirements are the usual:
(Applies to both G and VG)
● All CSS must be in a separate file (and not mixed with HTML code), and the file is
be in / Content / directory
● All Javascript must be in separate files and be in a subdirectory of / Scripts / directory.
● All HTML must be semantic (HTML5 will be used)
● All HTML should validate as HTML5
● All the styling must be done with CSS and can not be done with HTML.
● labs must be made in Visual Studio as an Asp.net MVC 3 project with C # as backendspråk.
● All the "logic" of backenden should be in the controller and not in view.
Not rocket surgery, but for most of you surely a fun challenge. Do not forget that everything you
need to know to solve the problem, see what we have gone through the lessons and exercises.
You know where to find it.
Little help
G
First Create a new Asp.Net MVC 3 project (C #) and rename it to something appropriate (in the style of
IntroWebLab2 or similar)
2nd Headlines (Index.cshtml in / Views / Home / directory), we want a welcome and
even a clock that is updated in real time (using javascript).
○ Enter the welcome and create some form of block-elements to be used
to display the time.
○ Make the block element has a border around it that is 1 pixel thick and in a fine
color.
○ Create a javascript file in a subdirectory of / Scripts / and link the file into your View
(Just as we tend to link the javascript files in our html pages). (Hint: check in /
Shared / _Layout.cshtml how standardjavascripten is inlänkade)
○ Write a javascript function that looks up the box and set its innerHTML to
what today's date and the current time is. (Hint: Date ())
○ Because we always want to know what time it is right now, we need to update the
time box every second - so make sure that your function runs once a second. (Hint:
setInterval)
3rd We want to have some fun nummergissarspel on our site. They do not really naturally together
with Controller called "Home," but we want them in a new Controller.
○ Add a new (empty) Controller called "Game Controller" in the directory
Controller.
○ You will be automatically created for you Action called index. We await the
method until further notice.
■ (trivia: It's web-practice "default page" named Index).
4th We will create a page (Action) for our javascript nummergissarspel inside our
Game Controller.
○ Add words to a method / function (action) called jsgame. (Check as how
Index-action is made).
○ What we want it to do is display a page with our javascript game - that will
Action method just open up a view with this.
■ Right-click on your jsgame-action and select "Add View".
○ Put javascript nummergissarspelet from the exercises of the page (the view). (Come
Remember that javascript must be in a separate file in the Scripts directory)
○ In order to find the games on the page, we want to link to them.
■ Locate the menu / Shared / _Layout.cshtml and create a link to the Index
Action in Game Controllers. (Hint: @ Html.ActionLink (...))
○ But if we try to follow the link, we will get an error because we do not have
created a view for the index in GameContoller.
■ To add a new View for Index in Game Controllers. In that view, we want to link
to the scripting game
■ Add a link to Action jsgame in your new view (tip: @ Html.ActionLink)
5th But for some reason, so we do not want our game in javascript - we do not really trust
browser or something. So we will create a version of the game using "Mail Back" to
server instead, where we put our game logic.
○ So we begin by creating an Action for that we rename the postback game.
○ Add a link to your post backgame-Action in GameControllerns Index view (where you
put the link to the javascript game before)
The first thing we want to do in our Action is to ensure that there is a "right answer"
was random for our game. But we can not randomise it every time the method
run (which would surely correct answer changed between each guess). So we need to save
storing it at any suitable location. Since the answer must be unique for each
users and we do not want to store it for longer than necessary, so we put it in
Session list on the server. (Session is unique for each user who is in
page and is automatically cleaned out afterwards).
Session-list is a list of type object - and because we have not gone through
object orientation yet, so you will have bit of code that generates a random number and
save into the session list:
if (Session ["correctNumber"] == null)
{
Random rnd = new Random ();
int = rnd.Next random number (1, 10);
Session ["correctNumber"] = random number;
}

The code checks if there is something in the session with the key "correctNumber" (that
say, it's already created a right answer?), if not then randomly an integer between 1
and 10 back and then saved into the Session list of key "correctNumber".

This action is supposed to then show our game interface so that the user can enter
some guesses - we must surely still have a text box for conjecture, a button that
press and a box to view feedback in.
■ So we add a View for this even in this method.
○ But instead of scripting to handle guess, so it shall send the
back to the server. So around your text box, and your key you must have a Form.
(Remember Html.BeginForm ()?).
■ Enclose your input element with a form and indicate no other
Action, but let it return the user typed into the same
Action Method (if you do not enter anything in Beginnings Form will be sent
data back to the Action that created it, in this case
to 'postback game').
○ On the server side must guess taken care of - our action postback game
have not a clue that there might be a guess farandes and that the
expected to do something with it. So we need to create a variant of post backgame
receiving guess.
■ Copy your post backgame-Action methodology and paste a new definition
that it also takes in an argument / variable / input parameter (guess)
preferably in the form of an int. (Let Session code remain, so that we are safe
that it can not possibly missing a correct answer when you get into a guess).
Do not forget that the argument must be named exactly the same as the text box in
the view as you enter guesses in - otherwise it can not MVC know that it is
just the box that corresponds to the argument.
○ This means that if there is no input (guess from the user in the
this case), then the postback game-Action not have argued that
run, and if there is an argument in the form of an int, so running the version of
postback game instead.
○ Now we are ready to write game logic. If statements in C # are the same as those in
Javascript, with the bonus that you do not have Harket with triple ===, C # is "Strongly
typed ", ie works == exactly in the way one might expect.
■ Remember: In JavaScript, we compare things to ===, the kind every other language as
we use ==
○ When we verified whether the guess was greater than, less than or equal to the right
response, we want to notify the user (ie the view). We make it easy for
us and uses us out ViewBag. Check the Home Controller Action called
Index, and the Index view for the Home to see how they use ViewBag to send
A message from the controller to the view.
■ We do not have any logic in the view that we can have in the controller, come
Remember "Separation of Concerns"
■ Build if / else statements in the controller that checks if the guess was too low,
high or law and notify the user of the result by sending
it via ViewBag to view.
6th My page
You will individually create a personal page in your web application.
○ Creating respective Action in Home Controller
○ In your Action, add a View.
○ In Your View - insert carefully selected parts of your CV page from Lab1
7th We have also heard that this thing with social media is crazy hot, and that we can use
of APIs from other sites to add some functionality on our own. In this
labs, we start a little sniff of it and therefore we will add to our twitter feed and also
a player for our favorite song.
○ Add a twitter feed on your side (your own twitter stream or anyone else - you
can google up one, whichever). It's easier than you might think - go to http://
twitter.com / about / resources / widgets / widget_profile and download the Javascript code
which automagically embed a twitter feed on your side.
○ Music think we do also. Enter a player with your favorite song from either
Spotify or Grooveshark:
■ Spotify: https://developer.spotify.com/technologies/spotify-play-button/
■ Grooveshark:
First Go to www.grooveshark.com
2nd Locate your song, mouse over it and select options -> Share
song.
3rd At the bottom of the box, choose Moore. Now select Embed.
4th Copy the code into your page.
VG
The VG-variant, you will find some information on their own to apply a few simple things we
not necessarily have gone through. There is no direct hard things - the difficulty is that we
have not gone through how to do everything in class.
Eighth Backendnummerspelet
A numbers game that never starts can be a little dull. In javascript variant enough the
having to reload the page to get a new set - but the postback variant will
the correct answer to be fixed in the Session variable for a while. So we need the creation of a "Reset" -
function.
○ Add a new Action called "Reset" in your Game Controller (it does not take any
Arguments / input parameters / variables).
○ Overwrite Session ["correctNumber"] with a new random number
○ Display a view that says that the game has been restarted and create a link back to
Game, i.e. Action postback game (hint: @ Html.ActionLink)
○ Add a link to your Reset Action in your game, ie in your view postback game.
○ To do that you get a good error message if you enter anything other than a
figure guess. (Hint: "C # 4.0 optional parameters")
○ Redo reset function so that you can choose the maximum value of the game when starting
if (hint: think about how conjecture functionality was made).
○ Keep track of how many guesses made so far and show this in view. See also
sure that they are cleared at reset.
○ If you guess the correct answer to the box in your View that displays feedback from
server turn green. (Hint: CSS class for the box is the setting in the view using C # -
logic)
9th Number game in frontendvarianten (javascript)
○ Add inlänkningen your javascriptfil before the HTML elements of the text box and
button. Now there are no DOM elements (textbox and button) to access
in javascript file because they are not created when the javascript file is run. Loose so that
knapptryckarfunktionen paired with button first when the page is loaded
clear (i.e. loose so that the page works). Tip: window.onload = function () {....
10th General
○ Ensure that all inlänkningar to javascript and CSS files are med@Url.Content (...)
instead of fixed paths. (Hint: Check the _Layout.cshtml)
○ Använd@Html.TextBox (...) instead of <input type="text"...> both javascriptoch
backendvarianten
The report:
In your report you should answer the following questions:
First How did you have the cooperation of the group?
2nd How was the collaboration of the group?
3rd How did you feel that the integration (ie, when you put it all together into a single project)
between all group members share went, there was no problem?
4th What will be harder / worse and easier / better to work with web development group
Posted
Comments
Dylan Morley 28-Sep-12 9:20am    
Sure, I'll get straight onto it! Hold on
bawa123 28-Sep-12 9:35am    
thanx buddy! im g8rfull for ur support buddy
Richard MacCutchan 28-Sep-12 9:25am    
Since you cannot be bothered to do your own work, why do you think anyone else will do it for you?
Stephen Hewison 28-Sep-12 11:39am    
Homework!!!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900