单击链接时显示局部视图 [英] Display partialview when clicking a link

问题描述

我对JQuery和MVC 2还是很陌生，这使得这有点难，我以前一直使用WebForms.
我使用 NerdDinner 示例作为设置(我将 Dinner 切换为 Person ).
我想做的很简单.在表中，当单击表中的详细信息"链接时，我希望显示一个带有详细信息的小模式.
现在，当我单击链接时，我会在新窗口中打开"Details.ascx"，它没有将其添加到详细信息div

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

搜索页面(查看)

表中的链接:(foreach(模型中的变量项)

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

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

javascript:

javascript:

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

div包含详细信息:

div to contain details:

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

部分视图:

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

控制器

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.

推荐答案

忽略Ajax帮助器，它们是用于ASP.NET AJAX脚本的.

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

将链接更改为:

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

您的jQuery可以:

And your jQuery to:

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

这篇关于单击链接时显示局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！