title: MVC 5 - jQueryUI Dialog View not displaying
body: <p>I am working on a MVC website and for my delete function I decided to use jQuery UI Dialog to display a popup style dialog box for the user to confirm that they wish to delete the object. My problem is that it is not displaying as intended, when I select to delete I can see my partial view dialog popup for a split second before I am redirected to another page that displays my confirmation message and the button to delete.</p>
  
  <p>This is my delete controller:</p>
  
  <pre><code>//Deletes a selected club
      [HttpGet]
      public ActionResult DeletePartialView(int? id) //Original: public ActionResult Delete(int? id)
      {
          if (id == null)
          {
              return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
          }
          Club club = db.Clubs.Find(id);
          if (club == null)
          {
              return HttpNotFound();
          }
          return PartialView(club);
      }
      [HttpPost, ActionName("DeletePartialView")]
      public ActionResult DeleteConfirmed(int id) //Original: public ActionResult DeleteConfirmed(int id)
      {
          Club club = db.Clubs.Find(id);
          var MembersToDelete = club.ClubMembers.ToList();
          foreach (var item in MembersToDelete)
          {
              db.ClubMembers.Remove(item);
          }
  
          db.Clubs.Remove(club);
          db.SaveChanges();
          return RedirectToAction("Index");
      }
  </code></pre>
  
  <p>This is the Delete button and the partial view in its div:</p>
  
  <pre><code>  @Html.ActionLink("Delete", "Delete", new { id = item.ClubID }, new { @class = "btn btn-danger btn-xs" }) |
                              @*@Html.ActionLink("Delete Partial", "DeletePartialView", new { id = item.ClubID }, new { @class = "btn btn-danger btn-xs" })*@
  
                              @Html.ActionLink(
                              "Delete Partial",
                              "DeletePartialView",
                              new { id = item.ClubID },
                              new
                              {
                              @class = "btn btn-danger btn-xs",
                              id = "deleteClub-opener" //Button ID
                                                             })
  
     @* Delete Club Popup*@
      &lt;div id="DelteClub-dialog" title="Delete Club"&gt;
          @Html.Partial("DeletePartialView", new ultimateorganiser.Models.Club())
      &lt;/div&gt;
  </code></pre>
  
  <p>This is the jQuery code:</p>
  
  <pre><code>//Delete Club Dialog Window with effects
          $(function () {
              $("#DelteClub-dialog").dialog({
                  autoOpen: false,
                  height: 500,
                  width: 600,
                  show: {
                      effect: "clip",
                      duration: 500
                  },
                  hide: {
                      effect: "highlight",
                      duration: 1000
                  }
              });
  
              //Open Delete Club Dialog Window
              $("#deleteClub-opener").click(function () {
                  $("#DelteClub-dialog").dialog("open");
              });
          })
  </code></pre>
  
  <p>;</p>
  
  <p>This is how it is currently displaying:
  <a href="https://i.stack.imgur.com/WfXvq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WfXvq.jpg" alt="enter image description here"></a></p>
  
  <p>This is what my DeletePartialView looks like:</p>
  
  <pre><code>@model ultimateorganiser.Models.Club
  @{
      ViewBag.Title = "Delete";
  }
  &lt;h3 class="text-warning"&gt;Are you sure you want to delete this club?&lt;/h3&gt;
  
  @using (Html.BeginForm())
  {
      @Html.AntiForgeryToken()
  
      &lt;div class="form-actions no-color"&gt;
          &lt;input type="submit" value="Delete" class="btn btn-danger" /&gt;
          @Html.ActionLink("Back to List", "Index")
      &lt;/div&gt;
  }
  </code></pre>