4

Im trying to make a table row work as a link to another view in my mvc website. Instead of using the standard "Details" link provided by the auto generated table list, I would like to use the table row as a link to the "Details" view instead. So somehow I need to make the row work as a link. Each rom has a unique id that I need to pass on to the controller method. I have tried different solutions but noting happens when I press on the table row...

So far this is what I have:

<script type="text/javascript">
$(document).ready(function(){
    $('#customers tr').click(function () {
        var id = $(this).attr('id');
        $.ajax({
            url: "Customer/Details" + id,
            succes: function () { }
        });
    })
})
</script>

My controller method:

public ActionResult Details(int id)
{
    Customer model = new Customer();
    model = this.dbEntities.Customers.Where(c => c.Customer_ID == id).Single();
    return View(model);
}

Global.asax:

public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
    filters.Add(new HandleErrorAttribute());
}

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        "Default", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "Home", action = "Index", id = UrlParameter.Optional }     
    );

    routes.MapRoute(
        "CustomerDetails",
        "Customer/Details/{id}",
        new { controller = "Customer", action = "Details", id = "" }
    );
}

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();

    // Use LocalDB for Entity Framework by default
    Database.DefaultConnectionFactory = new SqlConnectionFactory(@"Data Source=(localdb)\v11.0; Integrated Security=True; MultipleActiveResultSets=True");

    RegisterGlobalFilters(GlobalFilters.Filters);
    RegisterRoutes(RouteTable.Routes);
}
1

5 Answers 5

5

Here is what I would do:

<tr data-id='@SomeRazorDataId' class="MyAction">foo</tr>

And then:

$(document).ready(function(){
    $('.MyAction').live("click",function () {
        var id = $(this).attr('data-id');
        window.location = "Customer/Details/" + id;
    })
});

If you are using jQuery 1.7+, you should use the on() method rather than the live() method.

Good luck!

2
  • Thanks :) Got it working by simply using window.location = "Details/" + id;
    – Christian
    Sep 1, 2012 at 22:37
  • Great! Now don't forget to set your style for the row with a pointer: .MyAction{cursor:pointer;}. Let me know if you need further help. Sep 1, 2012 at 22:39
3

There is a typo in your code;

success:
//----^
0
2

A couple of things:

  1. Add a slash (/) between the action and the parameter: url: "Customer/Details/" + id, otherwise, you'll invoke an Action called Details123, for example, which doesn't exist;
  2. Make sure you have a configured route in your Global.asax to support the id, i.e., Customer/Details/{id}:
  3. Like @undefined said, the name of the callback is success, not succes.

Your Global.asax should have something along these lines:

routes.MapRoute(
  "CustomerDetails",
  "Customer/Details/{id}",
  new { controller = "Customer", action = "Details", id = ""}
);
6
  • Thanks! 1. Done! 2. Done! 3. What?? How to?
    – Christian
    Sep 1, 2012 at 21:43
  • @ChristianThoressonDahl: What does your Global.asax look like? Sep 1, 2012 at 21:44
  • @ChristianThoressonDahl: Please check my update and add the new route. Sep 1, 2012 at 21:58
  • Updated my post with the new route in global.asax. Still not working. I must have done something else wrong... After spending hours in front of the computer I would not be surprised if its just a little stupid thing... :)
    – Christian
    Sep 1, 2012 at 22:16
  • @ChristianThoressonDahl: Your route is wrong, it's not {controller}/{action}/{id}, it's Customer/Details/{id}. Sep 1, 2012 at 22:17
1

I had this type of situation lately and opted to use the Ajax helper class:

        @Ajax.ActionLink("Details", "Details", 
        new
        {
            id = Model.Id
        }, null)

In this example it would assume that you want a link saying 'details' and you're already in the Customer controller.

Either way, look at the helper classes if all you want to do is fire a controller action from a link, gives you a bit more strong typing in terms of how to pass/handle the id value etc

0

The url that you have tried to call is invalid:

"Customer/Details" + id,

instead it should be "Customer/Details&id=" + id

(OR)

use 'data'

$.ajax({ url: "Customer/Details", data:{id:id}, succes: function () { } });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.