MVC Music Store JQuery Dialog Popups?

I need to add the JQuery dialog popups to the ASP.NET MVC 3 Music Store.

1. So far all I get is an error anytime I click the new 'Details Popup' link on the StoreManager view:

"The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ViewResult Details(Int32)' in 'MvcMusicStore.Controllers.StoreManagerController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters"

2. The dialog never opens when I click the 'Create Popup' link. Just open the usual Create.cshtml view.

Here's the code so far.
@model IEnumerable<MvcMusicStore.Models.Album>

@helper Truncate(string input, int length)
{
    if (input.Length <= length) {
        @input
    } else {
        @input.Substring(0, length)<text>...</text>
    }
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Genre.Name)
        </td>
        <td>
            @Truncate(item.Artist.Name, 25)
        </td>
        <td>
            @Truncate(item.Title, 25)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id = item.AlbumId }) |
            @Html.ActionLink("Create Popup", "Create", null, new { @class = "openDialog"}) |
            @Html.ActionLink("Details Popup", "Details", null, new {id = item.AlbumId, @class = "openDialog"}) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })
        </td>
    </tr>
}

</table>


<script type="text/javascript">
   $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'hi there',
            modal: true,           
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#openDialog').click(function () {
            $('#dialog').load('@Url.Action("Edit")', 
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                    });   
        });
    });
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;"></div>

Open in new window

WorknHardrAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Can we see a link to the page

OR

Can you post the html that is rendered in the browser.

There are several things that could be wrong - including the link that is supposed to be launching the dialog linking back to the server instead of being intercepted in the client and used to launch the dialog.

It may be executing the dialog code but because the link click is allowed to propogate the default handler is firing and sending the request back to the server.

To understand why this is happening and how to fix / prevent it we need to see the rendered page.
0
WorknHardrAuthor Commented:
Update:
  I changed the 'Details Popup' link by removing the 'null' and now it the error is gone and it opens the Details.cshtml but not with the Jquery .dialog.

Before:
   @Html.ActionLink("Details Popup", "Details", null, new {id = item.AlbumId, @class = "openDialog"})

After:
  @Html.ActionLink("Details Popup", "Details", new {id = item.AlbumId, @class = "openDialog"})

Here's the 'view source' for one item in the grid on StoreManager.cshtml. I'm clicking on 'Details Popup' hyperlink.

[StoreManager.cshtml (view source)
<h2>Index</h2>

<p>
    <a href="/StoreManager/Create">Create New</a>
</p>
<table>
    <tr>
        <th>
            Genre
        </th>
        <th>
            Artist
        </th>
        <th>
            Title
        </th>
        <th>
            Price
        </th>
        <th></th>
    </tr>
    <tr>
        <td>
            Rock
        </td>
        <td>
            Men At Work
        </td>
        <td>
            The Best Of Men At Work
        </td>
        <td>
            8.99
        </td>
        <td>
            <a href="/StoreManager/Edit/1">Edit</a> |
            <a href="/StoreManager/Details/1">Details</a> |
            <a class="openDialog" href="/StoreManager/Details" id="1">Details Popup</a> |
            <a class="openDialog" href="/StoreManager/Create">Create Popup</a> |
            <a href="/StoreManager/Delete/1">Delete</a>
        </td>
    </tr>
    <tr>
        <td>
            Rock
        </td>

Open in new window

0
Julian HansenCommented:
Ok I think I see your problem. Here is how you are trying to open the dialog

        $('#openDialog').click(function () {
            $('#dialog').load('@Url.Action("Edit")', 
                    function (response, status, xhr) {
                        $('#dialog').dialog('open');
                    });   
        });

Open in new window

You are binding the event to an id - when your code is actually generating a class. What you need to do is this
    // Change the selector from id to class 
    // and add the event parameter to the function
    $('.openDialog').click(function (e) {
        // stop the default <a> click from firing
        e.preventDefault();     
        $('#dialog').load('@Url.Action("Edit")', 
            function (response, status, xhr) {
                $('#dialog').dialog('open');
            });   
     });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

WorknHardrAuthor Commented:
Still not working, doing the same, just opens entire page and not popup. Here's a link which makes the Jquery Dialog UI look simple to do, however it doesn't work for me:

How to create a modal popup in ASP.NET MVC 3 using Jquery
http://yassershaikh.com/how-to-create-a-modal-popup-in-asp-net-mvc-3-using-jquery/

Note: This code example applied to the MVC Music Store project seems to open a popup, but the only thing showing is the 'close' button. It doesn't really look like a popup, more of a ghost.
0
Julian HansenCommented:
Then post a link so we can see the code.

JQueryUI code is simple to implement - if it is not working then it is because of something we can't see.

A link will enable us to see the problem very quickly.
0
WorknHardrAuthor Commented:
Okay, it's working now. I had two versions of JqueryUI running. So...

1. the final code below works with the StoreManager/Index.cshtml
2. the final code below is slow to open the .dialog
    - looks like a two-stage opening
       - 1st stage opens a smaller empty gray color box
       - 2nd stage loads the textboxes and dropdowns in the empty gray box

[Final Working Code]
<table>
...
<tr>
<td>
            @* COMMENT-OUT ORIGINAL LINKS
            @Html.ActionLink("Edit", "Edit", new { id=item.AlbumId }) |
            @Html.ActionLink("Details", "Details", new { id = item.AlbumId }) |            
            @Html.ActionLink("Create Popup", "Create", new { @class = "openDialog"}) |
            @Html.ActionLink("Delete", "Delete", new { id=item.AlbumId })*@

            @*NEW DIALOG POPUP-STYLE LINKS*@
            @Html.ActionLink("Edit Popup", "Edit", null, new { id = item.AlbumId, @class = "openDialog", data_dialog_id = "editDialog", data_dialog_title = "", actionId = item.AlbumId })
|
            @Html.ActionLink("Details Popup", "Details", null, new { id = item.AlbumId, @class = "openDialog", data_dialog_id = "detailsDialog", data_dialog_title = "", actionId = item.AlbumId })
|
            @Html.ActionLink("Create Popup", "Create", null, new { @class = "openDialog", data_dialog_id = "createDialog", data_dialog_title = ""})
|
            @Html.ActionLink("Delete Popup", "Delete", null, new { @class = "openDialog", data_dialog_id = "deleteDialog", data_dialog_title = "", actionId = item.AlbumId })
        </td>
</tr>
}
</table>

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

<script type="text/javascript">

    $.ajaxSetup({ cache: false });

    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();

            var actionId = $(this).attr("actionId");

            $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .css("background-color", "gainsboro")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove(); },
                        modal: true,
                        width: 400,
                        left: 10
                    })
                    //.load(this.href + "?id=21")
                    .load(this.href + "?id=" + actionId)

        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });
    </script>

Open in new window

0
WorknHardrAuthor Commented:
The 'preventDefault' helped, thx
0
Julian HansenCommented:
You are welcome - thanks for the points
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.