4 Replies - 26959 Views - Last Post: 23 November 2013 - 10:41 AM

#1 Chario0z   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 23-April 12

ASP MVC - Show details on popup-dialog using JSON/Ajax/JS

Posted 22 November 2013 - 03:27 PM

So I have this table with some Person. I want to display a selected users details by clicking on a "Details" link. I could redirect to the Detail View site, but I'd like a windows to popup when I click on this hyperlink. As a partialView I believe. You see the table, click on details, a window popup, you click OK and that's it. My code howeever won't work


This is my model.
public class Person {
    public int ID {get;set;}
    public string Name {get;set;}
    public int Age {get;set;}
}


This is my controller.
public ActionResult Index() {
    var model = (from p in db.Persons
                 select new Person {
                     ID = p.ID,
                     Name = p.Name,
                     Age = p.Age
                 }).ToList();
    return View(model)
}

public ActionResult Details(int id) {
    var person = db.Persons.Find(id); //Returns single user
    return PartialView(person);
}


This is my View for Index:
@model IEnumerable<Project.Model.Person>
<script type="text/javascript">
        $(function () {
            $('.detailsLink').click(function () {
                $('#details').load(this.href);
                return false;
            });
        });
    </script>

<table>
    <tr> 
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>

    @foreach(var item in Model) {
         <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Age)
                </td>
                <td>
                    @Html.ActionLink("Details", "Details", new { id = item.ID}, new { @class = "detailsLink" })
                </td>
          </tr>
    }
    </table>

    <div id="details"></div>
    }


This is my Details View:
@model Project.Model.Person

<fieldset>
        <legend>Your details</legend>

        <div class="display-label">
             @Html.DisplayNameFor(model => model.ID)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.ID)
        </div>
    
        <div class="display-label">
             @Html.DisplayNameFor(model => model.Name)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.Name)
        </div>
    
        <div class="display-label">
             @Html.DisplayNameFor(model => model.Age)
        </div>
        <div class="display-field">
            @Html.DisplayFor(model => model.Age)
        </div>
</fieldset>


Why won't this work?

Is This A Good Question/Topic? 0
  • +

Replies To: ASP MVC - Show details on popup-dialog using JSON/Ajax/JS

#2 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6259
  • View blog
  • Posts: 24,028
  • Joined: 23-August 08

Re: ASP MVC - Show details on popup-dialog using JSON/Ajax/JS

Posted 22 November 2013 - 05:52 PM

Think I'll move this to ASP.NET.
Was This Post Helpful? 0
  • +
  • -

#3 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: ASP MVC - Show details on popup-dialog using JSON/Ajax/JS

Posted 22 November 2013 - 10:18 PM

First move your script to the bottom of the page so it gets fired after the elements are loaded.

Then if that doesn't fix it, try:

.load($(this).attr('href')); instead of .load(this.href) on line
Was This Post Helpful? 0
  • +
  • -

#4 Chario0z   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 38
  • Joined: 23-April 12

Re: ASP MVC - Show details on popup-dialog using JSON/Ajax/JS

Posted 23 November 2013 - 04:00 AM

I'm able to redirect to the next page "/Item/Details/2", but I'd like to get this popup-dialog.

This demo demonstrates what I want. You click on edit, you get a popup-dialog.
http://demo.ricardoc...dFormRazor/Cars
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: ASP MVC - Show details on popup-dialog using JSON/Ajax/JS

Posted 23 November 2013 - 10:41 AM

If you take a look at the example you gave me, they are using the jquery-ui dialog widget.

This means that you also need to include the jQuery-ui library, at least the dialog widget and a theme. Here is the dialog API refrence.

This post has been edited by laytonsdad: 23 November 2013 - 10:43 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1