jquery
sanosh3
week_11-_lecture_2.pdf
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 1 of 10
Injecting jQuery Mobile into an MVC Application
Last week, we created an MVC project called Week10 that accepted a first name and last name
on the Index view of the Home controller and forwarded that information to the Summary action
of the Home controller where they were displayed back to the user. This week we are going to
revisit that project by adding jQuery Mobile capabilities to it. Start by browsing to the location
where you created the Week10 solution and copy it. In my case, the solution folder is located in
C:\ITC2811\Week10\
Next, copy the solution folder to Week11 folder. In my case, the folder is located in C:\ITC2811\
Now rename the solution folder to Week11 and then go to the folder and launch the project by
clicking the Week10.sln file. Once the solution opens, in the Solution Explorer, right click the
solution, choose Rename from the context menu, and rename the solution to Week11.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 2 of 10
Next, in the Solution Explorer, right click the project, choose Rename from the context menu,
and rename the project to Week11.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 3 of 10
The solution and project names should now be Week11 as seen below.
Now, right click the _Layout.cshtml file under the Views/Shared folder as seen below and choose
Copy in the context menu.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 4 of 10
Right click on the Shared folder under the Views folder and choose Paste as seen below.
The copied file now appears in the Shared folder as seen below. Rename it to
_Layout.Mobile.cshtml by right clicking it and choosing Rename in the context menu.
We now have a layout file called _Layout.cshtml and another one called _Layout.Mobile.cshtml.
When ASP.NET MVC tries to render a view that uses a layout in a mobile browser, it first checks
to see whether a layout file with the name _Layout.Mobile.cshtml exists and if it finds it, it uses it
to render the view in that mobile browser. If the view is being rendered in a desktop/laptop
browser, MVC simply uses _Layout.cshtml.
Now go ahead and double click the _Layout.Mobile.cshtml to open it as seen below.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 5 of 10
Replace the contents of _Layout.Mobile.cshtml with the listing seen in the following image. Note
that in the <body></body> tags, we have added a jQuery Mobile compatible page (the div with
data-role="page"), which has a jQuery Mobile header, content, and footer (divs with the data-
role="header", data-role="content", and data-role="footer" properties respectively).
Additionally, we have instructed the layout file to render views that use it within the div with the
property data-role="content" (using @RenderBody). We now expect that every time this MVC
application runs in a mobile browser, it should use this layout file (_Layout.Mobile.cshtml) to
render the application views that use the layout.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 6 of 10
We are not done yet as we have not added the jQuery Mobile package to the project yet. We are
going to do this by using the NuGet Package Manager console by going to the TOOLS menu on
the main menu bar in Visual Studio and select NuGet Package Manager -> Package Manager
Console.
In the Package Manager Console on the bottom of the IDE, type in the following command as
seen in the following image and hit enter.
Install-package jquery.mobile
The package is then imported to our project as seen in the following image.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 7 of 10
Now add the jQuery Mobile CSS, jQuery script, and jQuery Mobile script to
_Layout.Mobile.cshtml by dragging them from the Content and Scripts folders in the project and
dropping them in the <head></head> section as seen in the following image.
At this point we have made all changes necessary to make our simple ASP.NET MVC
application both desktop browser and mobile browser ready. Let’s run the application by hitting
F5. Once the project loads in the desktop browser, it should display the Index view of the Home
controller as seen below. To make sure that we haven’t broken anything, we are going to
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 8 of 10
regression test the application in the desktop browser by entering a first name, a last name, and
clicking Save as seen below.
The application now redirects to the Summary view where the information is displayed back to
us. Great! The desktop version is still working as expected. Keep the desktop browser open so
that the application continues to run.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 9 of 10
Now it’s time to test the application in the Opera Mobile browser. Launch the emulator, choose a
Profile, and click Launch as seen in the image below.
Type in the Home page URL (in this case it is http://localhost:51964/ ) in the Opera Mobile
browser and click Go.
Northeastern University, ITC 2811 – Advanced Application Development Week 11- Lecture 2
Page 10 of 10
Perfect! The Index view of the Home controller is now rendered via the _Layout.Mobile.cshtml
file which is jQuery Mobile enabled. Go ahead and type in a first name and a last name and click
Save as seen below.
The application now redirects to the Summary view where the information is displayed back to
us using the jQuery Mobile enabled layout file.
