title: How to create to work Modal Popup register in index which has their own controllers in MVC?
body: <p>What I'm trying to do is when I am in Index page, if I click the Register button, then it will show modal popup dialog of register page form. </p>
  
  <p>'Index.cshtml' is in 'Home' view which has there own controller(HomeController.cs) and 'Register.cshtml' (which we need to bring this in to modal pop up when we click register button in 'Index') is in 'Account' view that has 'AccountController.cs' to controlling of register part. </p>
  
  <p>First we tried to make javascript in index to make when I click the register button then it will make dialog box with content which bring register view page url (by .load()). </p>
  
  <p>However, when we filled out the form and click submit button in the register form, then, if it succeed to register, it is ok (because in controller makes that redirect to index page) but if it failed, what controller do is add some validation summary which said why it is failed and return partial view which makes redirect to register page. This means that it will go to register pager instead dialog change. </p>
  
  <p>I knew why this happen because register form connects with register controller. </p>
  
  <p>So what I am doing here is that, I made Register view to partial view in the Shared folder. </p>
  
  <p>So I can bring this to the Index.cshtml more easier. (Also I changed making dialog box from custom javascript to using modal class in Bootstrap.) </p>
  
  <p>Here is my _Layout.cshtml</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET Application&lt;/title&gt;
      @Styles.Render("~/Content/css")
      &lt;link href="~/Content/jquery-ui.css" rel="stylesheet" /&gt;
      @Scripts.Render("~/bundles/jquery")
      &lt;script src="~/Scripts/jquery-ui.js"&gt;&lt;/script&gt;
      @Scripts.Render("~/bundles/modernizr")
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="navbar navbar-inverse"&gt;
          &lt;!--navbar-fixed-top not spanning rest of contents, change body margin in site.css to use--&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  @Html.ActionLink("GT BookSwap", "Index", "Home", null, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Sell Textbooks", "SellingPage", "SearchList")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Buy Textbooks", "BuyingPage", "SearchList")&lt;/li&gt;
                  &lt;/ul&gt;
                  @Html.Partial("_LoginPartial")
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          @RenderBody()
      &lt;/div&gt;
  
      &lt;div class="container body-content"&gt;
          &lt;hr/&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - GT Senior Design Group&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my _LoginPartial.cshtml</p>
  
  <pre><code>@using Microsoft.AspNet.Identity
  
  @if (Request.IsAuthenticated)
  {
      using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
  {
      @Html.AntiForgeryToken()
  
      &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;
              @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="javascript:document.getElementById('logoutForm').submit()"&gt;Log off&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      }
  }
  else
  {
      &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#" data-toggle="modal" data-target="#myModal"&gt;Register&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })&lt;/li&gt;
      &lt;/ul&gt;
  }
  </code></pre>
  
  <p>And Here is my Index.cshtml</p>
  
  <pre><code>@{
      Layout = "~/Views/Shared/_Layout.cshtml";
      ViewBag.Title = "Home Page";
  }
  &lt;div class="mainheader"&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;GT BookSwap Page&lt;/h1&gt;
          &lt;p&gt;Sign up for BongBong to sell your textbooks!&lt;/p&gt;
          &lt;p&gt;@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" , @class = "btn btn-primary", data_toggle="modal", data_target="basicModal"})&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="bluecontainer"&gt;
      &lt;div align="center"&gt;
          &lt;div class="container"&gt;
              &lt;h1&gt;Search by Keyword&lt;/h1&gt;
              &lt;form class="navbar-form" role="search"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" size=80 placeholder="Search by title, author or ISBN"&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-primary btn-large" style="width:100px; height:55px;"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="yellowcontainer"&gt;
      &lt;div align="center"&gt;
          &lt;div class="container"&gt;
              &lt;h1&gt;Search by Course&lt;/h1&gt;
              &lt;form class="navbar-form" role="search"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" size=80 placeholder ="Search by title, author or ISBN"&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-warning" style="width:100px; height:55px;"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @{Html.RenderPartial("_Register");}
  </code></pre>
  
  <p>Here is my _Register.cshtml (which is partial view in Shared folder)</p>
  
  <pre><code>@model GTBookSwap.Models.RegisterViewModel
  
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="registerLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h4 class="modal-title" id="registerLabel"&gt;Register&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body" id="Content"&gt;
                  &lt;div class="container" id="regi"&gt;
                      @Html.AntiForgeryToken()
                      &lt;h4&gt;Create a new account.&lt;/h4&gt;
                      &lt;hr /&gt;
                      @Html.ValidationSummary()
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(m =&gt; m.UserName, new { @class = "col-md-2 control-label" })
                          &lt;div class="col-md-10"&gt;
                              @Html.TextBoxFor(m =&gt; m.UserName, new { @class = "form-control" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(m =&gt; m.Password, new { @class = "col-md-2 control-label" })
                          &lt;div class="col-md-10"&gt;
                              @Html.PasswordFor(m =&gt; m.Password, new { @class = "form-control" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          @Html.LabelFor(m =&gt; m.ConfirmPassword, new { @class = "col-md-2 control-label" })
                          &lt;div class="col-md-10"&gt;
                              @Html.PasswordFor(m =&gt; m.ConfirmPassword, new { @class = "form-control" })
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-md-offset-2 col-md-10"&gt;
                          &lt;input type="submit" id="Register" class="btn btn-default" value="Register" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
  }
  
  &lt;script type="text/javascript"&gt;
      var RegisterURL = {
          RegisterUrl: '@Url.Action("Register", "Account")'
      };
  
      $("#Register").click(function (e) {
          var form = $(this);
          //var model = @Html.Raw(Json.Encode(Model));
          $.ajax({
              url: RegisterURL.RegisterUrl, (????????)
              type: 'POST',
              cache: 'false', (?????????)
              data: form.serialize(), (????????)
              //dataType: "html",
              sucess: function (result) {
                 (???????)
              },
              error: function (result) {
                   (?????????)
                  alert("Fail");
                  //$("#Content").text("qweqwe");
                  $("#Content").html(result);
                  //$('#Content').load('/Shared/_Register');
              }
          })
      })
      var repeatUrl = '@Url.Action("Register","Account")';
      var previewContainer = $('#myModel #Content');
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is My Register() in AccountController </p>
  
  <pre><code>// POST: /Account/Register
  [HttpPost]
  [AllowAnonymous]
  [ValidateAntiForgeryToken]
  public async Task&lt;ActionResult&gt; Register(RegisterViewModel model)
  {
  
      if (ModelState.IsValid)
      {
          var user = new ApplicationUser() { UserName = model.UserName };
          var result = await UserManager.CreateAsync(user, model.Password);
          if (result.Succeeded)
          {
              await SignInAsync(user, isPersistent: false);
              return RedirectToAction("Index", "Home");
          }
          else
          {
              //return RedirectToAction("Index", "Home");
              AddErrors(result);
          }
      }
  
      // If we got this far, something failed, redisplay form
      //return Redirect(Request.Url.ToString());
      //return Json(model);
      //return PartialView("_Register",model);
      return PartialView(model);
      //return View(model);
  }
  </code></pre>
  
  <p>From the javascript in _Register.cshtml, I don't know what to put in URL and stuff.(Especially in ?????? part)</p>
  
  <p>Also What I have to change for the controller that send errors to show in javascript code in _Register.cshtml?? so if js got the result then make whether send to index or stay with this model popup register form because it is failed.</p>
  
  <p>What I'm trying to do is open modal popup of register in index and even it failed or not, do not refresh to move site to register page, just stay on the popup and change only content.
  Please!! Thanks.</p>