Best way to open dialog in MVC 4 application

Question

I'm just starting to learn MVC so try to bear with me.

I have a table that has a few options to the side that you can edit, delete and show the details of.

If I click the Details button now It will take me to another page (Details.cshtml) which is located in the same Controller as the Index.cshtml which displays the table above.

This is the code for the table (Index.cshtml)

@model Collusus.Models.IndexModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<h2>Hello @Html.ActionLink(Model.userLoggedIN, "getProfile")</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Change ID</th> 
    <th>Owner</th> 
    <th>Priority</th> 
    <th>Disposition Date</th> 
    <th>Completion Date</th> 
    <th>Do what?</th>
</tr> 
</thead> 
<tbody> 
@for(int i=0; i<Model.changes.Count(); i++)
{
<tr> 
    <td>@Model.changes[i].ID</td> 
    <td>@Model.changes[i].Owner</td> 
    <td>@Model.changes[i].Priority</td> 
    <td>@Model.changes[i].DispositionDate.ToShortDateString()</td> 
    <td>@Model.changes[i].ActualCompletionDate.ToShortDateString()</td> 
    <td>@if (Model.changes[i].Owner == Model.userLoggedIN)
        {
            @Html.ActionLink("Delete", "Delete", new { id=Model.changes[i].ID })
            @Html.ActionLink("Edit", "Edit", new { id=Model.changes[i].ID })
        }
        @Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID })
    </td>
</tr> 
}
</tbody> 
</table> 

As you can see because of the code below, it will just take me to another page.

@Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID })

What I want to do:

• Open Delete,Edit or Details view in a dialog instead of another page.
• Be able to still have the same functionality as if they were just opening another page.

I don't know if that makes too much sense. I've tried to explain it the best I could and been frustrated searching Google / trying code from other solutions but can't get it to work.

If you suggest another way besides the JQUERY dialog I'm willing to go that option too. All help is appreciated since I've been so frustrated.

Answer 1

I'm assuming you want to open them into a modal dialog. To accomplish this you can return partial views from your controller.

You can add a class to your action links like this:

@Html.ActionLink("Details", "Details", new { id=Model.changes[i].ID }, new { @class = "details-modal" })

Your Details action method:

public ActionResult Details(int id)
{
    // Your code here
    return PartialView("_Details", myModel); // return the partial view with the model
}

jQuery (off the top of my head so it may not be 100% correct):

$('#my-dialog').dialog({
    autoOpen: false,
    width: 400,
    resizable: false,
    modal: true
});

$('.details-modal').click(function() {
    var theURL = $(this).attr('href');

    $('#my-dialog').load(theURL, function() {
        $(this).dialog('open');
    });

    return false; // ensures the browser is not redirected to the link's URL
});