c# - 创建一个使用 javascript 函数的 ActionLink

Question

我有一个数据表，我在该数据表上设置了一个 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>

Action Controller :

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

或者我需要一个 ActionResult 吗？

public Actionresult Details(int id)
{

}

我意识到我现在还差得很远，但我不确定要采取什么步骤来做到这一点。最后我会做一个 Accordion ，然后把 table 放在 Accordion 里。

Answer 1

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

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

然后编写一些 jQuery(看起来您已经依赖于 jQuery。如果没有，我可以修改答案以使用 vanilla JavaScript)以将事件处理程序绑定(bind)到类 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>

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

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);
    });
});

在哪里element_to_populate将是一个指向您要注入(inject) HTML 的位置的选择器。