use @Ajax.ActionLink to popup a form

Question

i want to use @Ajax.ActionLink to popup a form so i did this in my cshtml page :

   @Ajax.ActionLink("click ", "AddToMembers", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" })
   <div id="result" style="display:none;"></div>

and add this script :

      <script type="text/javascript">
          $(document).ready(function () {
              $("#result").dialog({
                  autoOpen: false,
                  title: 'Title',
                  width: 500,
                  height: 'auto',
                  modal: true
              });
          });
          function openPopup() {
              $("#result").dialog("open");
          }
</script>

in my controller added this function :

 [HttpGet]
    public PartialViewResult AddToMembers()
    {
        return PartialView();
    }

but when i click on the "click" in my form the new page open in the browser . not in the my popup form what's the problem ???

Answer 1

I suspect that you forgot to include the following script to your page:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

This script is used to AJAXify the anchor generated by the Ajax.ActionLink helper. Also sinde you are using jQuery dialog make sure you have referenced jQuery UI:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>