Using javascript to call controller method in MVC

Question

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

Matt Cashatt · Accepted Answer · 2012-09-01 22:41:16Z

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!

edited Sep 1, 2012 at 22:41

answered Sep 1, 2012 at 22:28

Matt Cashatt

24.3k29 gold badges83 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Christian Over a year ago

Thanks :) Got it working by simply using window.location = "Details/" + id;

Matt Cashatt Over a year ago

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.

Ram · Accepted Answer · 2012-09-01 21:35:21Z

3

There is a typo in your code;

success:
//----^

answered Sep 1, 2012 at 21:35

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

João Silva · Accepted Answer · 2012-09-01 21:57:42Z

2

A couple of things:

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;
Make sure you have a configured route in your Global.asax to support the id, i.e., Customer/Details/{id}:
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 = ""}
);

edited Sep 1, 2012 at 21:57

answered Sep 1, 2012 at 21:39

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

6 Comments

Christian Over a year ago

Thanks! 1. Done! 2. Done! 3. What?? How to?

João Silva Over a year ago

@ChristianThoressonDahl: What does your Global.asax look like?

João Silva Over a year ago

@ChristianThoressonDahl: Please check my update and add the new route.

Christian Over a year ago

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... :)

João Silva Over a year ago

@ChristianThoressonDahl: Your route is wrong, it's not {controller}/{action}/{id}, it's Customer/Details/{id}.

|

dougajmcdonald · Accepted Answer · 2012-09-01 22:01:06Z

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

Dhanasekar Murugesan · Accepted Answer · 2012-09-20 08:06:40Z

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

answered Sep 20, 2012 at 8:06

Dhanasekar Murugesan

3,2591 gold badge21 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using javascript to call controller method in MVC

5 Answers 5

2 Comments

Comments

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

6 Comments

Comments

Comments

Related