2

我有一个数据表，在该数据表上我设置了一个 Html.ActionLink。当我单击该操作链接时，我想将项目的 id 发送到 javascript 函数，并在下面显示一个新的数据表，其所有内容都属于上面数据表中的选定项目。因此，例如，如果我单击表中的学生姓名，我希望所有学生的成绩和测试都显示在下面的单独数据表中。我从来没有使用过javascript，所以我不确定我该怎么做。如果有人可以指出我正确的方向或提供一些提示，我将不胜感激。

原始第一个数据表：

@foreach (var item in ((List<Epic>) ViewData["selectedestimate"]))
{
    <tr>
        <td>
            @*   @Html.ActionLink(@item.Name, "action", "controller", new {id = item})*@

            <a href="#" onclick="StoryClick(@item.Id);">@item.Name</a>
        </td>

Javascript 调用：

<script type="text/javascript">
function StoryClick(story) {
    $.get("@Url.Action("action", "controller")", function (response) {
        $('#stories').accordion({ collapsible: true });
    });
}
</script>

动作控制器：

public List<EpicDetails> getEpicDetails(int id)
{
    return eRepository.getItemsById(id).tolist();
}

还是我需要一个 ActionResult？

public Actionresult Details(int id)
{

}

我意识到我现在还没有接近，但它只是 b/c 我不确定要采取什么步骤来做到这一点。最终我会制作一架手风琴并将桌子放在手风琴中。

4

2 回答 2

4

<a>在这种情况下，我喜欢实际保留ActionLink生成，只需添加 JavaScript 以增强链接的行为。所以您的视图不会真正改变（我确实添加了一个类，以便我们稍后可以将事件处理程序绑定到它）：

@Html.ActionLink(@item.Name, "action", "controller", new {id = item, @class = "item-link" })

然后编写一些 jQuery（看起来你已经依赖于 jQuery。如果没有，我可以修改答案以使用 vanilla JavaScript）将事件处理程序绑定到与 class 的链接item-link：

<script type="text/javascript">
    $(document).ready(function () {
        $("a.item-link").click(function (event) {
            event.preventDefault(); // Stop the browser from redirecting as it normally would
            $.get(this.href, function (response) {
                // Do whatever you want with the data.
            });
        });
    });
</script>

而且，是的，您在控制器中的操作方法应该返回一个ActionResult. 在不知道你想在客户端使用什么类型的数据的情况下，我很难说ActionResult你应该返回什么类型，但是如果你想将 HTML 注入页面，你可以这样写：

public ActionResult Details(int id)
{
    var itemDetails = /* Get details about the item */;
    return PartialView("Details", itemDetails);
}

然后在你的 JavaScript 中你会写：

$("a.item-link").click(function (event) {
    event.preventDefault(); // Stop the browser from redirecting as it normally would
    $.get(this.href, function (response) {
        $("element_to_populate").html(response);
    });
});

Whereelement_to_populate将是一个选择器，它指向您要注入 HTML 的位置。

于 2012-04-04T15:42:42.420 回答
1

我强烈建议在客户端使用 javascript 模板（我更喜欢handlebars.js）并将您的学生数据作为 JsonResult 返回。这将使您的带宽使用量降至最低。

但是，因为您似乎更喜欢剃须刀，所以您可以将它用于所有模板，从控制器/视图返回纯 html，然后改用这个 javascript

<script type="text/javascript">
$(function() {
    $("a.item-link").click(function (event) {
        event.preventDefault(); // Stop the browser from redirecting as it normally would
        $("#gradesContainer").load(this.href, function (response) {
            //Do whatever you want, but load will already have filled up 
            //#gradesContainer with the html returned from your grades view
        });
    });
});
</script>

在您的主页中，在学生列表下方，您只需添加

<div id="gradesContainer"></div>

你的另一个控制器看起来像这样

public ActionResult TestGrades(int id) {
    var model = getTestGradesModel(id);
    return View(model);
}

如果您为客户端 javascript 模板返回 JSON，它看起来像

public ActionResult TestGrades(int id) {
    var model = getTestGradesModel(id);
    return new JsonResult() {Data = model}; //no view here!
}
于 2012-04-04T16:00:11.177 回答