MVC 4.0 tutorial: UI Design and Mobile Development

Sample video for our MVC 4.0 tutorial: UI Design and Mobile Development with Expert Instructor -- James Curtis.

Get full course details @ http://bit.ly/13fLt5h

The MVC 4 framework has a lot of tools that makes web development powerful. In this course you will learn how to use JavaScript, jQuery UI and Partial Views to enhance MVC 4 Web Applications. Then you will continue use JavaScript with jQuery Mobile to detect mobile browsers in a MVC 4 web application.

---

Closed Caption:

this
do
first pick a star of the basic the nbc4
here we have the model view and
controller the view is highlighted in
blue
because as the main part they were going
to be looking at however
the UI design is not just limited to the
views models can also have attributes
the control the views
such as required
string length in other custom attributes
controllers can also have attributes the
true access to the view like you can
allow anonymous to certain action
results
or you can require loggins to you secure
other parts I've your controller
I'm here we have similar in BC for
basics
you have your CSS your JavaScript and
jQuery libraries
and then have an additional javascript
or jQuery libraries
like knockout modernize our and so forth
a cascading style sheets is the
preferred method over inline styles for
their use
this is also helpful because you're not
in one of styling for
elements within code but you can have
consistency throughout your web
application
also jQuery can reference these for any
the elements
to provide quick functionality or
any other kind of functionality that
you're trying to identify an element
where
other parts we get into your JavaScript
and jQuery library is
in jQuery is the default for NBC as that
their de facto library
having jQuery within UMBC also enhances
the user experience
opposed to just simple webform postback
very vanilla typeof website
other things you can do to enhance your
web applications at other JavaScript and
jQuery base libraries
and these include knockout modernize ur
in jQuery UI these three actually come
with the nbc4 template
but only modernize our is actually
turned on by default
from within the layout page in
way at an NBC are much like master pages
in webforms
for ASP dotnet this is a common template
that is used throughout your web
application
this uses placeholders t find areas for
content from view pages
and you can actually be fine your own
custom placeholders aside from the ones
are provided for you from the nbc4
template
many layout can exist within it NBC web
application
and these are defined by the view star
areas within the route or an area
the router web application so in other
words you can actually have
eighty layout defiant per area if you'd
like
however that probably be overkill as you
wanna try to reuse as much code is
possible
and having different layouts for every
single area is probably not a good idea
and unless you have a situation where
you have a web application
thats I anonymous users are accessing
everything in the roots
and then say for instance you have an
area defined as a Member section
and you wanted their user experience in
their look and feel to be different
then that way you could probably have a
different layout
however you could probably just get away
with having different menu
to keep all your style in the same I'm
use in MBC 4 are different from
traditional web forms we actually had
occurred behind
here the views contained the HTML
JavaScript
injuries occurred and then displays
model passed from the controller
here we want to try to keep things as
clean as possible
by instituting the dry method or don't
repeat yourself
we also use partial views wherever we
can
and then also we use custom JavaScript
libraries to assist
us in user experience within the view
itself in
personal views and NBC are much like
user controls with an ASP net web forms
here they contain reusable HTML
JavaScript in or a circa
it's also eliminates duplication with an
views
if you use content more than one place
you want to make it into a partial view
this does not require my out to render
unlike templates however you can provide
a model to be partial view
if it is different frumpy mean madala of
the parent view page
that is calling it and like I said this
is similar to user controls within web
forms
if you used to that in
so getting started with the basic 7pc
set up
and particular for design you go to File
new project and then select in BC for
web application
change the name whatever you want the
product name to be
click OK and then here you have several
templates and you can download more
templates
number for NBC that we're going to use
rego and select Internap cation
and then choose raisers our view engine
and then go ahead and say okay
the same time very set up a brand new
project
sums go Cancellara this scope I'll
open product solution
you I cap
so what you get with the default nbc4
template which is different from
MBC three in webforms is
everything is laid out slightly
differently we still have a global ASE
acts like you'd find in webforms
however you know is we don't have any
default pagers within the route
up our web project when I mean things
where all the views are neither that
display the JavaScript in each email
they're all sorted by the controller
that they belong to you
however the exception to that rule was
shared well there can be assured
controller
usually in your default nbc4 templates
you're not have a controller that goes
along with the shared folder
this is the default folder nbc4 creates
that contains the way out which is our
master page
and a couple other built-in display
templates
for air %um your personal login
so some things to know if what does give
a quick tour we're
around where things are at within your
nbc4 project
if you're new to NBC were coming from
MEC version 3
and they did move some things around on
your so
will just go through this so after
Clearwater start with the App Store
folder this is a default folder that is
created by your
nbc4 template within here yeah
authorization configurations panels
which are key to the second
I your filters wear your red circle
felker's and so for
our routes depending on how you want to
you dissect
the rock configuration if you want to
the controller
action and then I D E or if you want the
ID to come first
I here's how here's where you'll be fine
as customer routes
comic course if you're nearly nbc4
we now have a web a PI and you can play
with the configuration there as well
so let's go back to our panel
configuration and what this is
grand opening boy in this is
designed to Poulin a
in bundled together CSS in javascript
files for you
I'm so you can make a call within your
layout page
or on individual pages if you just need
require your CSS on a one particular
paid him out across your site
you can refer to the script bundles by
this Colleen
Tilda such bundles last week we're in
this case
and when you call that its gonna pull an
any version
for jQuery that defines .gs
another example here's to require you I
use jQuery for validation
on modernize ur is defined here
and that's actually already poured into
your way out I'm
or your master page I'm in here we
define the CSS
and here is all the CSS for your cheek
where you I think I'm
so it gives you can a good idea have how
to add your custom
transcript files Day weekend I'm
keep getting your web application
because you want to do the same thing
however in my experience some
third-party tools
hike from tower records are new flavor
our X
Products Co kendo they are not to
I really happy about being bundled in
with everything else like we're doing
which a query
so those might be exceptions your role
for modeling
while you can still bundle all your own
custom JavaScript libraries
some third-party tools may not bundle
correctly so you just go after
has to call them the old fashion way
from your way out page
okay so that was our bundle
configuration on
next thing on our list that we want to
look at is a
I'm down on our content this is stayed
the same
on however now they provide you with the
base jQuery UI
styles within your site CSS is
same controllers use to get the account
in their home controller
and nothing new there I'm filter
a it does come with simple membership
now
I which is kinda cool so you don't have
to go to the net and
fine to find a how implement that
becomes broken
on with the internet application
version: have NBC to break should
specify that
images or images models to discuss the
basic account model
that goes along with the simple
membership scripts
this is all over good JavaScript that
comes along with the project right now
the templates been updated to you
antiquity 1.8 which one to seven was
kinda majorly so one day
just ask couple extra goodies with it a
comes with jQuery UI and
also now it comes with jQuery
unobtrusive
for Ajax in its valuation in your notice
that there are no Microsoft
Ajax javascript files here now and
that's because
Microsoft is now fully supported jQuery
and that's why you always see really
jQuery here opposed to having a couple
jQuery files on side
I'm except Ajax javascript files I'm
also here we have knockout
which is included in an awesome
modernize ur and knock out
is a and Phoebe amor Model View
ViewModel
transcript engine that assists I the UI
R
with interviews keeping track I love
I elements on the page in kind linking
them together i get a text file this one
too
span that's just plain the first name as
you type in the first name in the text
box
Hill changes on the fly for every
keystroke I within that span so
I'm not gonna have some really powerful
stuff way beyond a simple example
in by its included but it's not turned
on by default
are referenced but a faulty in your way
out page
on pic so the last section
her phone and there are looking at is
the views on again
he to these views but the exception to
share actually matches a controller
I'm appears we have account we have
count we have home we have home
I'm so that's how that we are kinda
works in with an shared
I we have our way out page which is
kinda like a master page
as I mentioned before from ASP net web
forms
so in here you can see how
were we're calling our style bundle
their
I hear were referencing a bundle for
modernize our
which is only has the one file in there
butter nonetheless that's how you
reference that
in we have partial
being polled and that's a that's a
partial view to pinpoint an
here were rendering a section called
featured on and so
we can we can call that from any verb
you saying and you're gonna section
featured
as guest ticket right here in between
our HTML
on their surrender body that's thats the
same as before
in in then again down here when you're
think that's doing now is
its rendering the scripts I just before
the body tag
for jQuery and this is kind where you
want to do that
if you can if the just group isn't
required to be
in the head iron head tag depend on what
you like monitor
for this has to be in the head tag for
to work properly
I'm and last but not least here's a
section
that's been defined conscripts so
anywhere near view if you have your own
script block
I you can shove it in a section
conscripts
you know automatically render out after
the jQuery is called
in this set up right here so why are the
last things
we we look at our folders but when the
last things go OK is to call me SEX
am we are you look at the bun or syrup
under the upstart folder
circle way SEX is kind the last thing to
look at
if we're looking at other things like
you know if we want session starter
her other methods we went over I'd this
is where we would do it
I'm here are often seen all the
configurations I'm
later on when we get into you do browser
detection
or revisit this so we can actually add
nobody'd action to it as well in