Mobile Ready HTML5 MVC.NET

I just started working with MVC3 Mobile Ready Template and MVC3 razor view engines.
I have a project where I need to laydown a mobile background image but I don't know where in the master mobile layout to put it where some other jquery or css rule will not override the image.

Just,
The mobile css is pulled directly from jquery mobile site.
Look in the master.cshtml in shared/M directory to see all CSS and javascript references.
to apply your background image, use the rules outlined here
http://stackoverflow.com/questions/6467806/jquery-mobile-background-image

Sammy,

As mentioned in the comments section, I needed to grab a few partialviews and found that the viewengine override wasn't giving me those, so here's the addition to the MobileViewEngine class:

        public override ViewEngineResult FindPartialView(ControllerContext controllerContext, string partialViewName, bool useCache)
        {
            ViewEngineResult result = null;
            var request = controllerContext.HttpContext.Request;

            if (request.IsSupportedMobileDevice() && ApplicationHelper.HasMobileSpecificViews)
            {
                string viewPathAndName = ApplicationHelper.MobileViewsDirectoryName + partialViewName;
                result = base.FindPartialView(controllerContext, viewPathAndName, true);

                if (result == null || result.View == null)
                {
                    result = base.FindPartialView(controllerContext, viewPathAndName, false);
                }

            }
            else
            {
                result = base.FindPartialView(controllerContext, partialViewName, useCache);
            }
            return result;
        }

cheers for now
jim

Oh and one quick question. Where does the 'Mobile...' (to the left of the log on button) trim get generated from??. I've searched the source and can't (in the short space of time that I've been looking at it) locate where this is. In reality, I'd like to change this trim to something else, so would be good to know where this lives. 

thanks again
jim

The button  is generated from the login partial.
the reason you got the error is because you referenced the full path of the partial view.
I didn't want to have two separate rules to locate the view based on the device.

I can't figure out where the 'Mobile ...' text came from either.  Can either of you please advise?  Thanks!

timetoprogitup - sorry just getting back now. If you haven't already found it, you can find the 'Mobile ...' reference in the : Views\Shared\M\_Layout.cshtml file. it's under the section: <h1 aria-level="1">Mobile MVC3.0</h1>. basically, this gets truncated and that's why a search for it yielded no results. 

hope thid helps somebody else too.
jim

Whenever I try to install this extension an error dialog appears with the following message:

"The extension could not be installed because the following error occurred:

Object reference not set to an instance of an object."

Any idea what might be going on? I don't see any additional errors in the Application event log or anything that seem to be helpful. I'm using VS2010, v10.0.40219.1 SP1Rel with .Net Framework 4.0.30319 SP1Rel.

You will need to install MVC 3.0 and Web Standards Update for Microsoft Visual Studio 2010 SP1 
http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83

Again me.... 

I'm using "Mobile Ready HTML5 MVC.NET" for a large project and now i'm using Areas to keep the house in order. 

The problem is that MobileViewEngine can't find the views on the current areas.

Can you help me with that? 

Very tks. 

Not sure why you cant locate the view within an Area?
can you check if the area is actually registered? can you post the code where the engine fails to locate a view within the area?
I can try to set up an area example for you if you like. I know it work with areas because I used it with Areas multiple times.

When I try to install, I get an error that says "extension already installed to all applicable applications" However, I don't see the extension anywhere in VS2010 and I've never installed this before, so I don't understand why I'm getting this error.

I have a 64-big Windows 7 machine with VS2010, LightSwitch, Dev-X, and ComponentOne installed.  What do you think the problem might be?

Can you check if the template was installed but the installation got corrupted?
see if you can get an update on the template.

I get the error "The project type is not supported by this installation", when I try to create a new solution using the template 

Could you please let me know the prerequisites for using this template?

You need to install mvc3 first. http://www.asp.net/mvc/mvc3

Hi, first.. very tks great work.

My question is.... i'm testing with android 2.3 and the pages don´t render, with ios 5.0 works fine.


What can i do?

I'm was reviewing user_agent response from Android 2.3 default Browser and it don't send anything usable to indentify it is a mobile. 

Well all  i did was:
Install Opera mobile on that android and now opera returns Android in the user_agent.
Be carefull opera user_agent was configured as tablet mode.

Hey, 

First off, I would like to thank you for a great template. Nice work! 

I have a small problem though. I using the exact same membership system as in the template, ie the in built asp.net membership provider. This works great when I'm running the app on my computer browser(chrome and firefox), but when I try to login or register on my mobile (Iphone 4s), the page will freeze when loading the page. It's pretty strange. Maybe the half of all times I try to login/register through my mobile, I get this error. When I reload the page, it says "Error loading the page". I'm sure it's not that I'm using wrong username or password. It must be something that is happening in action LogOn and Register. The problem never occurs when running the mobile app on my computer browser in production. 

Anyone that have experienced this problem too? What can be wrong? 

Thanks
Erik  

Hi, in the MVC Mobile template, in the Mobile views (not normal views) I see an issue with the Sign-in/sign-out. 

After sign-in it seems some of the pages are still cached, and not showing the sign-in without a browser refresh. Similarly after sign-out you can navigate to signed-in pages still.

I tried to over-come this by adding rel="external" to the action-links. This forces re-freshes, and on a PC it seems to work (although a bit slower).
But the result is rather ugly on mobile (Android 2.2, WP7 and Symbian Belle tested): With rel="external" the pages first render without js/css and then render-flashes again with full jquerymobile page.
On the other hand, after adding rel="external" to all the links, the top-menu tabs seem to work better, i.e. the selected tab gets the theme color correctly.

It seems that on desk-top view this issue is not present, it is only mobile.

Do you have any idea how to mitigate this problem, using rel="external" is clearly not the way to go.

Kelpiercer,
jQM can handle caching by using an attribute on the page "data-role="page" data-cache="never"
if you set data-cache to never and still have issues, you can use the script below to clear the cached page

jQuery('div').live('pagehide', function(event, ui){
      var page = jQuery(event.target);

      if(page.attr('data-cache') == 'never'){
        page.remove();
      };
    });

Hi Sammy, thank you for replying!

What I mean is that this issue exists already in the Mobile Ready HTML5 MVC.NET template.

This is how to demonstrate the problem:
1) From VS, add new project, select Mobile Ready HTML5 MVC.NET template.
2) Modify method "IsSupportedMobileDevice" in the ApplicationHelper.cs so that it always returns "true"  (i.e. indicates the client is a mobile device, although actually using PC browser)
3) Press F5 (run - browser window opens to the MVC3 mobile Home/Index view)
4) Click/touch "Log on", and log yourself on. 
5) You will now see the Home/Index view saying at header "Welcome ..." and "Log off"
6) Click /touch "About" - you will see Home/About view with "Welcom ..." and "Log off"
7) Now click/touch "Home" - you will see Home/Index view saying only "Log on", i.e. this view now doesn't know that you had already signed in!!
8) The same problem will be present when you decide to log off.

Now, one of the principles of jQuery Mobile is that you would not always load/refresh the pages, right?
So, if I set data-cache="never" to all the links I have, or user rel="external", then wouldn't this make the performance on a mobile device unnecessarily worse in typical events when there is no sign-in or sign-out, but the user just using the application normally?

Is there a neat way to solve this problem, and should that be added to the template too?

Thank you for publishing your work!

Kelpieracer,
I would test jqm in a desktop browser. The library is meant for mobile devices.download any mobile emulator to test against.
You don't have to make all links external, you just need to mark the login and logout links as external
[code]
@if
    (Request.IsAuthenticated) {
    <text>Welcome <strong>@User.Identity.Name</strong>!
    
      <a data-role="button" class="no-Ajax" data-transition="flip" rel="external"  style="float:right" href="@Url.Action("LogOff","Account")">Log off</a>
     </text>
}
else {
    <a data-role="button" class="no-Ajax" data-transition="flip"  rel="external" style="float:right" href="@Url.Action("LogOn","Account")">Log on</a>
    
}
[/code]
I have a few mobile devices to test this against, once I complete the test, if an  update to the template is needed I will do that.

Thank you,

Sammy Ageil

First, nice job on the template and greatly appreciated.

Have you thought about using 51degrees.mobi for your mobile detection functionality instead of maintaining supported devices in the ApplicationHelper?

Also, iPad requests come up as a mobile request. Not sure if that is the desired or expected result from many.

Having implemented it myself on a MVC3 mobile site recently as well as my own mobile view engine, I can tell you that it is pretty simple.

Let me know if you need any help.

ED,
The main reason to use ApplicationHelper class is having control over the devices identified as mobile.
I haven't used 51degrees.mobi but from what I seen, it requires some XML configuration and I am not a fan of XML.
Have you published your mobile view engine?

Thank you,

Sammy