title: mvc3 jquery mobile how to use Html.BeginForm
body: <p>I have already written an entire site in MVC3.  I am trying to build the mobile version with Jquery Mobile. I haven't changed my controller code, except to add a check for whether or not it should return a mobile page.  I have the following in the document head of my mobile logon page:</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Mobile Logon&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
  $(document).bind("mobileinit", function(){
    $.extend(  $.mobile , {
      ajaxEnabled: false
    });
  });
  
      &lt;script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  </code></pre>
  
  <p>I have a page with a header and content.  In the content, I want to let the user redirect to the register form.  the following seems to work:</p>
  
  <pre><code>&lt;form action="Register" method="get" data-ajax="false"&gt;           
      &lt;button type="submit" value="Register for an account"&gt;&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This does not work: (the url seems correct in the browser, but all that loads is a blank, white page)</p>
  
  <pre><code>@using(Html.BeginForm("Register", "Account", FormMethod.Get, null ))
  {
      &lt;button type="submit" value="Register for an account"&gt;&lt;/button&gt;  
  }
  </code></pre>
  
  <p>When I look in the page source, I notice two differences: The first one gives a form tag with</p>
  
  <pre><code>action="Register"
  </code></pre>
  
  <p>while the second gives a form tag with</p>
  
  <pre><code>action="Account/Register"
  </code></pre>
  
  <p>The other difference is the "data-ajax=false" in the form tag.</p>
  
  <p>Questions: 
  Am I able to use @Html.BeginForm() with Jquery Mobile?  If not, how do I redirect to a different controller?</p>
  
  <p>How come my code in the head section doesn't turn off the default ajax behavior of Jquery Mobile?  (I tried using the form tag above without data-ajax=false, and I got the same blank, white screen as the @Html.BeginForm gave me).</p>
  
  <p>EDIT:  here is my logon controller code (Account controller)</p>
  
  <pre><code>public ActionResult LogOn()
      {
          //return View();
          return SelectView("Logon", null);
      }
  
      private ActionResult SelectView(string viewName, object model, string outputType = "html")
      {
          if (outputType.ToLower() == "json")
          {
              return Json(model, JsonRequestBehavior.AllowGet);
          }
          else
          {
  #if MOBILE
    return View(viewName + ".Mobile", model);
  #else
              if (Request.Browser.IsMobileDevice)
              {
                  return View(viewName + ".Mobile", model);
              }
              else
              {
                  return View(viewName, model);
              }
  #endif
          }
      }
  </code></pre>
  
  <p>here is my Register controller code:  (Account controller)</p>
  
  <pre><code>    public ActionResult Register(string returnUrl = "")
      {
          //if no return url supplied, use referrer url.
          //Protect against endless loop by checking for empty referrer.
          if (String.IsNullOrEmpty(returnUrl) &amp;&amp; Request.UrlReferrer != null &amp;&amp; Request.UrlReferrer.ToString().Length &gt; 0)
          {
              return RedirectToAction("Register", new { returnUrl = Request.UrlReferrer.ToString() });
          }                       
  
          return View();
      }
  </code></pre>