[Solved] My gridView doesn't do Ajax call for edit/add/delete

[Julien]

Hi,

I'm trying to use the GridView component, but I've some problem. I'm basing myself on your example located on http://demos.telerik.com/aspnet-mvc/grid/editingajax

The problem is that when I click on any button, I don't get an ajax call but the page reloads to an inexistant page.

The model of my view contains a List<Product>() on which is bound the grid. Here is how is defined the product class

namespace DataModel
{
    [KnownType(typeof(Product))]
    public class Product
    {

        [ScaffoldColumn(false)]
        public int Id { get; set; }

        [DisplayName("Référence")]
        public String Reference { get; set; }

        [DisplayName("Description")]
        public String Description { get; set; }

        [DisplayName("Prix unitaire")]
        [DataType(DataType.Currency)]
        public Double UnitarPrice { get; set; }

        [Required]
        [DisplayName("Units in stock")]
        [DataType("Integer")]
        public int ProductCount { get; set; }
    }
}

Here is how I'm defining the grid, we can see that I've ajax data binding:

<div>
    @(Html.Telerik().Grid(Model.Products).Name("uxUnitsGrid")
    .DataKeys(keys =>
    {
        keys.Add(p => p.Id);
    })
    .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new {style="margin-left:0"}))
    .DataBinding(dataBinding =>
    {
        dataBinding.Ajax()
        .Select("_SelectAjaxEditing", "Request")
        .Insert("_InsertAjaxEditing", "Request")
        .Update("_SaveAjaxEditing", "Request")
        .Delete("_DeleteAjaxEditing", "Request");
    })
    .Columns(
        columns =>
        {
            columns.Bound(p => p.Id).Hidden(true);
            columns.Bound(p => p.Reference).Title("Référence");
            columns.Bound(p => p.Description).Title("Description");
            columns.Bound(p => p.UnitarPrice).Title("Prix unitaire");
            columns.Bound(p => p.ProductCount).Title("Nombre de produits");
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.ImageAndText);
                commands.Delete().ButtonType(GridButtonType.ImageAndText);
            }).Width(180).Title("Commandes");

        }
    )
    .Pageable()
    .Sortable()
    .Scrollable()
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    )
</div>

Here is methods of my controller(named "Request" in "RequestController.cs")

[HttpPost]
[Authorize]
public ActionResult ManageRequest(RequestModel model)
{
    System.Web.HttpContext.Current.Session["RequestModel"] = model;
    return View(model);
}

[Authorize]
public ActionResult Index()
{
    return View();
}

[GridAction]
public ActionResult _SelectAjaxEditing()
{
    return View(System.Web.HttpContext.Current.Session["RequestModel"]);
}
[AcceptVerbs(HttpVerbs.Post)]
[GridAction]
public ActionResult _SaveAjaxEditing(int id)
{
    Product product = ((RequestModel) System.Web.HttpContext.Current.Session["RequestModel"]).Products.Where(p => p.Id == id).First();
    TryUpdateModel(product);
    return View(System.Web.HttpContext.Current.Session["RequestModel"]);
}

[AcceptVerbs(HttpVerbs.Post)]
[GridAction]
public ActionResult _InsertAjaxEditing()
{
    //Create a new instance of the EditableProduct class.
    Product product = new Product();
    //Perform model binding (fill the product properties and validate it).
    if (TryUpdateModel(product))
    {
        //The model is valid - insert the product.
        List<Product> products = ((RequestModel) System.Web.HttpContext.Current.Session["RequestModel"]).Products;
        product.Id = ((RequestModel) System.Web.HttpContext.Current.Session["RequestModel"]).GetNewIndex();
        products.Add(product);
    }
    //Rebind the grid
    return View(System.Web.HttpContext.Current.Session["RequestModel"]);
}
[AcceptVerbs(HttpVerbs.Post)]
[GridAction]
public ActionResult _DeleteAjaxEditing(int id)
{
    //Find a customer with ProductID equal to the id action parameter
    Product product = ((RequestModel)System.Web.HttpContext.Current.Session["RequestModel"]).Products.Where(p => p.Id == id).FirstOrDefault();
    if (product != null)
    {
        //Delete the record
       ((RequestModel) System.Web.HttpContext.Current.Session["RequestModel"]).Products.Remove(product);
    }

    //Rebind the grid
    return View(System.Web.HttpContext.Current.Session["RequestModel"]);
}

But I'm getting html code generated, where you get javascript CData code.

What I've done wrong??

Thank you!

[Julien]

In fact, I found that I should not register our js files with <script ... ></script>, but with your 
@(Html.Telerik().ScriptRegistrar()).

[Julien]

Edit bis: I now have another problem, when I click on the button, I've a popup which display me that an error 500 has be thrown. I checked with the chrome debuger, and I see that data seems to be sent correctly:

1. Request URL:
   http://localhost:50589/Request/_SaveAjaxEditing
2. Request Method:
   POST
3. Status Code:
   500 Internal Server Error
4. Request Headers
   1. Accept:
      text/plain, */*; q=0.01
   2. Accept-Charset:
      ISO-8859-1,utf-8;q=0.7,*;q=0.3
   3. Accept-Encoding:
      gzip,deflate,sdch
   4. Accept-Language:
      fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
   5. Connection:
      keep-alive
   6. Content-Length:
      135
   7. Content-Type:
      application/x-www-form-urlencoded
   8. Cookie:
      .ASPXAUTH=FBB3B1ED8DA454D742C50CFE90A0B2D5D76ED93DH023C7D1336D18C9A748D43F7818508EC5FE1A0DC58693ED85878605E4858207789FF49388BA271F814DCFE7E33FCCC294345284349816D04A90203E1FDAF6F4C53D5DFB9EA54A71C3B9E92A7C2C084F40851098998E1447BA71064AFB06202A27F5C3543F359C5101829830A333C34ECFF20C3103A51058681FD5FF; ASP.NET_SessionId=3kablp05qax4e25esjcpiegf
   9. Host:
      localhost:50589
   10. Origin:
       http://localhost:50589
   11. Referer:
       http://localhost:50589/Request/ManageRequest
   12. User-Agent:
       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.205 Safari/534.16
   13. X-Requested-With:
       XMLHttpRequest
5. Form Data
   1. Id:
      3
   2. Reference:
      08-11134
   3. Description:
      Serveurs
   4. UnitarPrice:
      145.5
   5. ProductCount:
      3
   6. id:
      3
   7. page:
      1
   8. size:
      10
   9. orderBy:
   10. groupBy:
   11. filter:
   12. aggregates:
6. Response Headers
   1. Cache-Control:
      private
   2. Connection:
      Close
   3. Content-Length:
      9046
   4. Content-Type:
      text/html; charset=utf-8
   5. Date:
      Thu, 21 Apr 2011 09:28:27 GMT
   6. Server:
      ASP.NET Development Server/10.0.0.0

I see that every data of the current line are sent, and I don't really understand how you manage them?

[Rosen]

Hi Julien,

In order to use ajax binding the action method result should be wrapped inside a GridModel instance. As shown in the example you have pointed. Additional information can be found in our help documentation under Ajax Editing and Ajax Binding.

All the best,
Rosen
the Telerik team