title: Asp.net MVC 5 Ajax call modal dialog
body: <p>I am new to asp.net MVC 5, I wonder how to use Ajax to call the modal with partial view? i had tried some code but the modal doesn't show up. Any body help?
  Here is my code:</p>
  
  <p>View</p>
  
  <pre><code>    &lt;script&gt;
          @Scripts.Render("~/bundles/jqueryval")
  
                  // Create
                  $(".modalCreate").click(function (e) {
              e.preventDefault();
              $.ajax({
                  cache: false,
                  type: "GET",
                  url: '@Url.Action("Create","Category")',
                  success: function () {
                          $(this).attr('data-target', '#createCat');
                          $(this).attr('data-toggle', 'modal');
                      // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
                      $('body').on('click', '.modal-close-btn', function () {
                          $('#createCat').modal('hide');
                      });
                      //clear modal cache, so that new content can be loaded
                      $('#createCat').on('hidden.bs.modal', function () {
                          $(this).removeData('bs.modal');
                      });
                      $('#CancelModal').on('click', function () {
                          return false;
                      });
  
                      // Init JQuery Validation for view
                      $("form").removeData("validator");
                      $("form").removeData("unobtrusiveValidation");
                      $.validator.unobtrusive.parse("form");
                  },
                  error: function (xhr, ajaxOptions, thrownError) {
                      displayAjaxError(thrownError);
                  }
              });
          });
          &lt;/script&gt;
  
  
  &lt;p&gt;
  
      @Html.ActionLink("Create Category ", "Create", "Category",
          null, new { @class = "modalCreate btn btn-success" })
  &lt;/p&gt;
  
  &lt;div id="createCat" class="modal fade"
       tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-content"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my controller:</p>
  
  <pre><code>  public ActionResult Create()
      {
          return PartialView("_Create");
      }
  
      // POST: /Category/Create
      // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
      // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
      [HttpPost]
      [ValidateAntiForgeryToken]
      public ActionResult Create(CategoryCreateVM productcategory)
      {
          if (ModelState.IsValid)
          {
              ProductCategory cat = Mapper.Map&lt;CategoryCreateVM, ProductCategory&gt;(productcategory);
  
              db.ProductCategories.Add(cat);
              db.SaveChanges();
              TempData["Message"] = "New Category added sucessfully.";
              ViewBag.Message = "New Category added sucessfully.";
              return RedirectToAction("Index");
          }
  
          return PartialView(productcategory);
      }
  </code></pre>
  
  <p>and partial view:</p>
  
  <pre><code>&lt;div class="modal-dialog"&gt;
      &lt;div class="modal-body"&gt;
          &lt;div class="modal-content"&gt;
              @using (Html.BeginForm("Create", "Category", FormMethod.Post))
              {
  }
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I using the boostrap default theme to do. I try to debug in browser inspection it doesnt show any error. But I can sure is it able to find my partial view but the modal never show up. I hope that anyone can help me check my code.</p>