创建一个使用javascript函数的ActionLink

本文关键字：javascript 函数 ActionLink 一个 创建 | 更新日期: 2023-09-27 18:30:04

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

我意识到我现在甚至还没有接近，但我不确定该采取什么措施来做到这一点。最后我做了一个手风琴，把桌子放在手风琴里。

创建一个使用javascript函数的ActionLink

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

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

然后写一些jQuery（看起来你已经对jQuery有了依赖。如果没有，我可以修改答案，使用普通的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的位置。

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