c# - Creating a ActionLink that works with a javascript function - Stack Overflow

admin管理员组

文章数量:1420907

I have a datatable, on that datatable i set a Html.ActionLink. When I click that action link, I want to send an id of the item to a javascript function and have a new datatable appear below with all of its content that belongs to the selected item in the datatable above. So for example if I click a students name in a table, I want all the students Grades and Test to appear below in a separate datatable. I've never worked with javascript much so I'm not sure how I can do this. If someone can please point me in the right direction or give some tips I'd appreciate it.

original first datatable:

@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 to call:

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

Or do I need an ActionResult?

public Actionresult Details(int id)
{

}

I realize that I'm not even close right now, but its just b/c I'm not sure what steps to take to do this. Eventually I would make a accordion and put the table in the accordion.

I have a datatable, on that datatable i set a Html.ActionLink. When I click that action link, I want to send an id of the item to a javascript function and have a new datatable appear below with all of its content that belongs to the selected item in the datatable above. So for example if I click a students name in a table, I want all the students Grades and Test to appear below in a separate datatable. I've never worked with javascript much so I'm not sure how I can do this. If someone can please point me in the right direction or give some tips I'd appreciate it.

original first datatable:

@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 to call:

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

Or do I need an ActionResult?

public Actionresult Details(int id)
{

}

I realize that I'm not even close right now, but its just b/c I'm not sure what steps to take to do this. Eventually I would make a accordion and put the table in the accordion.

• c#
• javascript
• asp-mvc

Share Improve this question Follow edited Apr 4, 2012 at 15:43 Dismissile 33.1k4040 gold badges178178 silver badges269269 bronze badges asked Apr 4, 2012 at 15:17 TManTMan 4,1001818 gold badges6666 silver badges118118 bronze badges 1

• Hey if one of us helped you on your way you should give out upvotes and mark an answer. – scaryman Commented Apr 7, 2012 at 19:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

In situations like this I like to actually keep the <a> the ActionLink generates, and just add JavaScript to enhance the behavior of the link. So your view wouldn't really change (I did add a class so that we can bind an event handler to it later):

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

Then write some jQuery (it looks like you already have a dependency on jQuery. If not, I can revise the answer to use vanilla JavaScript) to bind an event handler to links with 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>

And, yes, your action method in the controller should return an ActionResult. It's hard for me to say what type of ActionResult you should return without actually knowing what type of data you want to consume on the client, but if you wanted to inject HTML onto the page, you could write something like this:

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

Then in your JavaScript you would write:

$("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);
    });
});

Where element_to_populate would be a selector that points to where you want to inject the HTML.

I would highly remend using javascript templating (I prefer handlebars.js) on the client side and returning your student data as a JsonResult. This will keep your bandwidth usage to a minimum.

But, because you seem more fortable with razor, you could use that for all your templates, return plain html from your controller/view, and then use this javascript instead

<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>

In your main page, below the student list, you would just need to add

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

Your other controller would look like this

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

If you were returning JSON for client-side javascript templating it would look like

public ActionResult TestGrades(int id) {
    var model = getTestGradesModel(id);
    return new JsonResult() {Data = model}; //no view here!
}

本文标签： cCreating a ActionLink that works with a javascript functionStack Overflow