Beer, Photography, Code, and the Rest

January 24, 2012 12:34pm

In the never ending quest to get child applications to work under umbraco do not forget to update the web.config under \Views

\Views\web.config

<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      <pages pageBaseType="System.Web.Mvc.WebViewPage">
          <namespaces>
              <remove namespace="Microsoft.Web.Helpers" />
              <remove namespace="umbraco" />
              <remove namespace="Examine" />
              <add namespace="System.Web.Mvc" />
              <add namespace="System.Web.Mvc.Ajax" />
              <add namespace="System.Web.Mvc.Html" />
              <add namespace="System.Web.Routing" />
          </namespaces>
      </pages>
</system.web.webPages.razor>

The other items you might need to do as well under web.config

Remove <namespaces/>

<pages>
  <namespaces>
    <remove namespace="Microsoft.Web.Helpers" />
    <remove namespace="umbraco" />
    <remove namespace="Examine" />
    <!-- namespaces -->
  </namespaces>
</pages>

Clear out <modules/>

<system.webServer>
  <validation validateIntegratedModeConfiguration="false"/>
  <modules runAllManagedModulesForAllRequests="true">
    <remove name="ScriptModule" />
    <remove name="UrlRewriteModule" />
    <remove name="umbracoRequestModule" />
    <remove name="viewstateMoverModule" />
    <remove name="umbracoBaseRequestModule" />
    <remove name="ClientDependencyModule" />
  </modules>
</system.webServer>

Clear out <httpModules/>

<httpModules>
  <remove name="UrlRewriteModule"/>
</httpModules>

URL: http://tmblr.co/ZZOaJyFIJ__s
(View comments)

(Notes: 6)

April 26, 2011 9:25pm

Using jQuery Mobile with ASP.NET MVC3

jQuery mobile is a framework that allows you to quickly build mobile web applications that allow for greater interactivity on mobile devices. You can quickly take advantage of this framework and mvc3 razor.

Create Project

Create a new MVC3 application using the default Razor template.

Modify _Layout.cshtml

Inside of your _Layout.cshtml add the required jQuery mobile script links.

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>

Replace the existing layout with the following html which is the barebones page layout for jQuery Mobile.

<div data-role="page">
    <div data-role="header">
        <h1>@ViewBag.Title</h1>
        <div id="logindisplay">
            @Html.Partial("_LogOnPartial")
        </div>
    </div>
    <div data-role="content">
        @RenderBody()
    </div>
    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </div>
    </div>
</div>
@if (IsSectionDefined("otherPages"))
{
    @RenderSection("otherPages")
}

This default layout will allow for each view to be wrapped in a jQuery mobile page.
Defines a separate section so you can use local pages you might need for local page transitions or dialogs.
Navigation was pushed down to a default jQuery footer navbar

Modify _LogOnPartial.cshtml

@if(Request.IsAuthenticated) {
    <text>Welcome <strong>@User.Identity.Name</strong>!
    @Html.ActionLink("Log Off", "LogOff", "Account", new {data_role="button" })</text>
}
else {
    @Html.ActionLink("Log On", "LogOn", "Account", new { data_role = "button" })
}

The only change here was to add a new data-role attribute so the logon link appears like a jQuery mobile button.

Example About Page with local jQuery page dialog

@{
    ViewBag.Title = "About Us";
}
<p>
    <a href="#dialog" data-rel="dialog" data-transition="pop">Open dialog</a>
</p>
@section otherPages{
    <div data-role="page" id="dialog">
        <div data-role="header">
            <h1>Page</h1>
        </div>
        <div data-role="content">
            Local Content
        </div>
    </div>
}

Simply define your local page in the otherPages @section

Guess what? You are done, just run the site in a html5 browser and you should see the default mvc3 template rendered via jQuery mobile.