Telerik Grid for ASP.NET MVC2 Ajax Binding doesn't work / routes to wrong actions

Question

The gird loads b/c of server bindings. All the other actions are either posting to the wrong route, or to the default action: Insert posts to /EditOrder action Edit posts to this address: http://localhost:20588/Orders/EditOrder/sdsddd?OrderID=2&CustomerID=1&ItemsInOrderGrid-mode=edit which is meaningless (sdsddd is the ItemID) non of the breakpoints inside the AJAX sections in the controller are reached. Any idea what am I doing wrong ?

Thanks, Dani

here is the view code:

 <%=
                Html.Telerik().Grid(Model.ItemsInOrderList)
                    .Name("ItemsInOrderGrid")
                                    .DataKeys(dataKeys =>
                                    {
                                        dataKeys.Add(e => e.OrderID);
                                        dataKeys.Add(e => e.ItemID);
                                    })
                    .ToolBar(commands => commands.Insert())
                    .DataBinding(dataBinding =>
                        dataBinding.Ajax()    //Ajax binding
                .Select("ItemsGridAjax", "Orders", new {OrderID = Model.order.OrderID})
                .Insert("InsertItemsGridAjax", "Orders", new {OrderID = Model.order.OrderID})
                .Update("UpdateItemsGridAjax", "Orders")
                .Delete("DeleteItemsGridAjax", "Orders"))
                    //.BindTo(Model.ItemsInOrderList)
                    .Columns(c =>
                        {
                            c.Bound(o => o.ItemID);
                            c.Bound(o => o.OrderID).Column.Visible = false;
                            c.Bound(o => o.ItemDescription);
                            c.Bound(o => o.NumOfItems);
                            c.Bound(o => o.CostOfItem);
                            c.Bound(o => o.TotalCost);
                            c.Bound(o => o.SupplyDate);
                            c.Command(commands =>
                                {
                                    commands.Edit();
                                    commands.Delete();
                                }).Width(200);
                        })

            %>

Here is the code in the controller:

[GridAction]    
public ActionResult ItemsGridAjax(int OrderID)       
{          
return View(ordersRepository.GetOrderItemsTK(OrderID));     
}

[HttpPost]
        [GridAction]
        public ActionResult InsertItemdGridAjax(int OrderID)
        {
            //Create a new instance of the EditableCustomer class.
            ItemsInOrder newItem = ItemsInOrder.CreateItemsInOrder(OrderID, "");
            newItem.OrderID = OrderID;

            //Perform model binding (fill the customer properties and validate it).
            if (TryUpdateModel(newItem))
            {
                //The model is valid - insert the customer.
                bool res = ordersRepository.InsertItemToOrder(OrderID, newItem);
            }

            //Rebind the grid
            return View(ordersRepository.GetOrderItemsTK(OrderID));
        }



[HttpPost]
  [GridAction]
  public ActionResult UpdateItemsGridAjax(int OrderID, string ItemID)
  {
      //Find a customer whose CustomerID is equal to the id action parameter
      ItemsInOrder item = ordersRepository.FindItemByID(OrderID,ItemID);

      if (item != null)
      {
          //Perform model binding (fill the customer properties and validate it).
          if (TryUpdateModel(item))
          {
              //The model is valid - update the customer and redisplay the grid.
              ordersRepository.UpdateItem(item);
          }
      }
      // TODO: Add try-catch with error reporting.
      //Rebind the grid
      return View(ordersRepository.GetOrderItemsTK(OrderID));
  }

[HttpPost]
        [GridAction]
        public ActionResult DeleteItemsGridAjax(int OrderID, string ItemID)
        {
            //Find the customer with the specified id
            ItemsInOrder item = ordersRepository.FindItemByID(OrderID, ItemID);

            if (item != null)
            {
                //Delete the customer
                ordersRepository.DeleteItem(item);
            }

            //Rebind the grid
            return View(ordersRepository.GetOrderItemsTK(OrderID));
        }

Rion Williams · Accepted Answer · 2011-04-08T17:18:38.927

1

I'm not sure if you need the [HttpPost] attribute (I think just [GridAction] will be sufficient) on those Ajax Actions, perhaps try removing those and see if that fixes the problem.

If that didn't work, try returning a GridModel in your actions like so:

        [GridAction]
        public ActionResult InsertItemdGridAjax(int OrderID)
        {
            //Omitted Code

           return View(new GridModel(ordersRepository.GetOrderItemsTK(OrderID)));
        }

You could also use syntax similar to the following (as I think the GridModel likes having a total):

        [GridAction]
        public ActionResult InsertItemdGridAjax(int OrderID)
        {
            //Omitted Code

            //Get List of Order Items
            List<OrderItem> list = ordersRepository.GetOrderItemsTK(OrderID));

            return View(new GridModel
            {
                Data = list,
                Total = list.Count
            });
        }

edited Apr 08 '11 at 17:18

answered Jan 12 '11 at 14:34

Rion Williams

74,820
37
200
327

nope, didn't help. It's like "AJAX" is disabled and it goes to full page post. the first AJAX call - the ItemsGridAjax doesn't get called so I get an empty grid. if I pupolate it through server bindings (giving the grid the list of ItemsInOrder in the ctor as in the example - this is the only thing that works, and then I can see that edit and delete doesn't work as well....) – Dani Jan 12 '11 at 14:46
I doubt this would work - but it's worth a shot. Perhaps replace [HttpPost] with [AcceptVerbs(HttpVerbs.Post)] ? No idea if that will make any difference at all :) – Rion Williams Jan 12 '11 at 14:56
Ah I think I figured it out - you are returning a View rather than a GridModel - I'll add the code it, but I think that might fix it. – Rion Williams Jan 12 '11 at 14:57
Thanks, But it didn't help. I've added it though, as I see in telerik's example that it should be like this (but not in the documentation) I set breakpoints on all AJAX function, they are not even reached, the edit/insert post the entire page with another parameter which is unhandled: http://localhost:20588/Orders/EditOrder?OrderID=2&CustomerID=1&ItemsInOrderGrid-mode=insert – Dani Jan 12 '11 at 15:27
I'm wondering if some of the necessary Ajax / Telerik files are not being referenced. I've run into several issues with some of their components before, almost all of which required me to reference specific files. Thankfully - their documentation is great and forums are very quick / active. – Rion Williams Jan 12 '11 at 15:30
I've followed the docs... I've also posted it on their forum. referencing their dll, and the js are in my script folder. – Dani Jan 12 '11 at 16:28
Well, I did find something (hence the +1) - I've opened a new project and copied just the controller code and the view and ajax start working (now I have to deal with the 500 error) but I guess you are right, it was something in the environment... who knows what. – Dani Jan 12 '11 at 19:41
If I recall correctly - the 500 error typically occurs because you are missing a GridAction on one of your controller actions. :) – Rion Williams Jan 12 '11 at 19:53
Not in this case :-) but I'll accept the answer as 3rd comment led me to the solution (recreate the project...) I'll open a new question on the 500 error, as it is a different issue. – Dani Jan 13 '11 at 08:18

score 1 · Answer 2 · answered Dec 18 '11 at 22:14

1

A had same problem but in MVC 3

The solution was just to add appropriate *.js scripts into project, see this and add @(Html.Telerik().ScriptRegistrar().jQuery(false)) into end of the _Layout.cshtml file

A then routing goes fine!

answered Dec 18 '11 at 22:14

Tomas

675
8
17

Telerik Grid for ASP.NET MVC2 Ajax Binding doesn't work / routes to wrong actions

2 Answers2