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>

的ActionController：

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

或者我需要ActionResult吗？

public Actionresult Details(int id)
{

}

我意识到我现在甚至都没有关闭，但它只是b / c我不知道采取什么措施来做到这一点。最后我会制作一个手风琴并把桌子放在手风琴中。

Answer 1

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

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

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

element_to_populate将成为指向您要注入HTML的位置的选择器。

Answer 2

我强烈建议在客户端使用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!
}

创建一个使用javascript函数的ActionLink

2 个答案: