title: Asp .net MVC Razor + JQuery UI delaog (Login popup)
body: <p>This is my use case. When a user clicks a button "Login", it pops up a jquery ui dialog and asks for username/password. when i click on submit, my home should be logged in.</p>
  
  <p>Trying to achieve this, i created a form inside the dialog and used a submit button. But i never reach the controller (AccountController.cs)</p>
  
  <pre><code>public ActionResult Login(LoginModel model, string returnUrl)
  </code></pre>
  
  <p>instead it always calls (AccountController.cs)</p>
  
  <pre><code>public ActionResult Login(string returnUrl)
  </code></pre>
  
  <p>My form inside the jquery dialog looks like below (Index.cshtml)</p>
  
  <pre><code>@model MyProject.Models.LoginModel
  .
  .
  .
  &lt;section id="loginForm"&gt;
          @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
              @Html.AntiForgeryToken()
              @Html.ValidationSummary(true)
  
              &lt;fieldset&gt;
                  @Html.LabelFor(m =&gt; m.UserName)
                  @Html.TextBoxFor(m =&gt; m.UserName, new { @Value = "jane@smith.com", @class = "text ui-widget-content ui-corner-all" })
                  &lt;input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all"--&gt;
                  @Html.LabelFor(m =&gt; m.Password)
                  @Html.PasswordFor(m =&gt; m.Password, new { @Value = "xxxxxxx", @class = "text ui-widget-content ui-corner-all" })
                  &lt;input type="submit" value="Log in" /&gt;
                  &lt;p&gt;@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })&lt;/p&gt;
              &lt;/fieldset&gt;
      }
  &lt;/section&gt;
  </code></pre>
  
  <p>and the dialog will be popped up as below</p>
  
  <pre><code>dialog = $("#dialog-form").dialog({
              autoOpen: false,
              height: 220,
              width: 350,
              modal: true,
              close: function () {
                  form[0].reset();
                  allFields.removeClass("ui-state-error");
              }
          });
  </code></pre>
  
  <p>I am sure i am making some configuration mistake somewhere, but not able to determine where. i was assuming that the "Submit" would have called the account controller (but i wonder where do i configure that). Also i tried the @Html.ActionLink. But not sure where to pass the model object.</p>