Modal pop up in ASP.NET MVC 4 is not working

Question

I have created a partial controller called post which is working fine. Now I want to call it from Home index via modal pop up. Here is my code Hierarchy (if that matters)

View
  Account 
  Home
      - Index
  Post
      - Index

Home/Index view

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


<script type="text/javascript">
    $(function () {
        $('.popupLink').click(function () {
            $('<div id="popupfooterdiv"/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: false,
                draggable: false,
                width: 500,
                height: 400,
                resizable: false,
            }).load(this.href, {});
            return false;
        });
    });
</script>

@Html.ActionLink("Open Pop Up", "Home", "actionName",  new {@class="popupLink"})

Home controller

       [HttpPost]
    public ActionResult actionName()
    {
        return PartialView("Post");
    }

When I am clicking it, it is redirecting to me to an error page with below error

  Server Error in '/' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /Home/Home

and also my URL changes to

http://localhost:2654/Home/Home?Length=10

Where I am wrong? and also, how can I close this pop up when user save the data from Post index view.

Answer 1

The issue seems to be this line:

@Html.ActionLink("Open Pop Up", "Home", "actionName", new {@class="popupLink"})

Try the following instead:

@Html.ActionLink("Open Pop Up", "actionName", "Home", null, new {@class="popupLink"})

Or this, using named parameters:

@Html.ActionLink(linkText: "Open Pop Up", actionName: "actionName", controllerName: "Home", routeValues: null, htmlAttributes: new { @class = "popupLink" })

---

The ActionLink helper has 10 overloads with mainly different combinations of String and object parameters. Therefore you have to be careful about how you called to get the one you actually want.

If you had a look at the HTML being produced by the line in question: than I think you would find the it's href would be http://localhost:2654/Home/Home?Length=10. I would say that it is calling this ActionLink method overload, and using the value "Home" for the actionName, and trying it's best to use "actionName" (a 10 character length) as a query parameter.