CODEWITHSUNDEEP
jqueryasp.net-mvcajax
Niklas
Niklas

Reputation: 13135

Display partialview when clicking a link

I'm fairly new to JQuery and MVC 2 which makes this a bit harder, I've always used WebForms before.
I'm using the NerdDinner example as setup (I've switched Dinner for Person though).
What I want to do is pretty simple. In a table I want a small modal display with details when a "details" link is clicked in the table.
Right now when I click a link I open "Details.ascx" in a new window, it's not adding it to the details div

Search page (View)

Link in table: (foreach (var item in Model))

<%= Ajax.ActionLink("Details", "Details", new { id = item.id}, new AjaxOptions() { UpdateTargetId = "details" })%>

javascript: 

<script type="text/javascript">
    $('tr').click(function() {
        $("#details").load("Persons/Details/1")
    });
</script>

div to contain details: 

<div id="details" class="detailView">details here</div>

Partialview: 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Person>" %>
<%@ Import namespace="RegistryTest.Models" %>
<div id="detailsModal">
    <%= Html.Encode(Model.surname) %>
</div>

Controllers 

public PartialViewResult Details(int id)
    {
        Person person = repository.GetPerson(id);

        return PartialView("Details", person);
    }

Let me know if you need more info on the setup.

Upvotes: 0

Views: 1469

Answers (2)

Val
Val

Reputation: 17522

page1.asp

<div class="holder">
    <div>1</div>
    <div class="test">2</div>
</div>
$('.holder').load('page1.asp .test');// returns =>> 2 // .test grabs any element that has a .test and pushes it into the holder

so page would look like this...

<div class="holder">
    <div class="test">2</div>
</div>

Upvotes: 0

David Neale
David Neale

Reputation: 17018

Ignore the Ajax helpers, they're for ASP.NET AJAX scripting.

Change your link to:

<%= Html.ActionLink("Details", "Details", new { id = item.id})%>

And your jQuery to:

    $('tr').click(function() {
        var url = jQuery(this).find('a').attr('href');
        $("#details").load(url)
    });

Upvotes: 1

Related Questions