Launch a Grid view from another view with id

3 posts, 0 answers
  1. Jeff
    Jeff avatar
    2 posts
    Member since:
    Aug 2015

    Posted 08 Feb 2017 Link to this post

    I'm trying to launch a view which just has a grid in it, but I want to pass in an id to filter the read from the db

    Maybe someone can point out what I'm doing wrong.

    Here is my call, although I think I really want the read transport

                        @Html.ActionLink("Good Sample List", "Index", "Grid", null, null) @*This works but reads all the rows*@
                        @Html.ActionLink("Sample List", "Index", "Grid", new { id = Model.id }, null) @*This Doesn't*@

    What happens is with both calls the Index constructor gets called.  When I don't send in an id it calls the AttributeOptions_Read next.

    If I call it with an id the Index constructor get called  with the correct id, then it calls it without an id.  The AttributeOptions_Read is never called.

    Here is the controller with some code commented out and using test data instead of my real data.  Hopefully this works the same as on my system.

    Code was generated with the Kendo UI Scaffolder

    using System;
     using System.Collections.Generic;
     using System.Data.Entity;
     using System.Linq;
     using System.Web.Mvc;
     using Kendo.Mvc.Extensions;
     using Kendo.Mvc.UI;
     //using riteTIME_WebApi.Data;
     
    namespace riteTIME_WebApi.Controllers.MVC
    {
        public class TestData
        {
            public Guid id { get; set; }
            public Guid attribute_id { get; set; }
            public string value { get; set; }
        }
        public class GridController : Controller
        {
     
            // Generated
            public ActionResult Index()
            {
                return View();
            }
     
            // My version, doesn't do what I expect.
            //public ActionResult Index(Guid? id)
            //{
            //    return View();
            //}
     
            public ActionResult AttributeOptions_Read([DataSourceRequest]DataSourceRequest request)
            {
     
                // I would like to be able to query the db using the attribute_id
     
                var options = new List<TestData>();
     
                options.Add(
                    new TestData
                    {
                        id = new Guid("1B7EC29F-E2D8-E611-8114-00155DDF5703"),
                        attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),
                        value = "Test1 A"
                    });
                options.Add(new TestData
                {
                    id = new Guid("1C7EC29F-E2D8-E611-8114-00155DDF5703"),
                    attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),
                    value = "Test2"
                });
                options.Add(new TestData
                {
                    id = new Guid("1D7EC29F-E2D8-E611-8114-00155DDF5703"),
                    attribute_id = new Guid("F5352D7F-E2D8-E611-8114-00155DDF5703"),
                    value = "Test3"
                });
                IQueryable<TestData> attributeoptions = options.AsQueryable();
     
                DataSourceResult result = attributeoptions.ToDataSourceResult(request, attributeOption => new
                {
                    attributeOption.id,
                    attributeOption.value,
                    attributeOption.attribute_id
                });
     
                return Json(result);
            }
     
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult AttributeOptions_Create([DataSourceRequest]DataSourceRequest request, TestData attributeOption)
            {
                if (ModelState.IsValid)
                {
                    //var entity = new AttributeOption
                    //{
                    //    value = attributeOption.value
                    //};
     
                    //db.AttributeOptions.Add(entity);
                    //db.SaveChanges();
                    attributeOption.id = Guid.NewGuid();
                }
     
                return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));
            }
     
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult AttributeOptions_Update([DataSourceRequest]DataSourceRequest request, TestData attributeOption)
            {
                if (ModelState.IsValid)
                {
                    //var entity = new AttributeOption
                    //{
                    //    id = attributeOption.id,
                    //    value = attributeOption.value
                    //};
     
                    //db.AttributeOptions.Attach(entity);
                    //db.Entry(entity).State = EntityState.Modified;
                    //db.SaveChanges();
                }
     
                return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));
            }
     
            [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult AttributeOptions_Destroy([DataSourceRequest]DataSourceRequest request, TestData attributeOption)
            {
                if (ModelState.IsValid)
                {
                    //var entity = new AttributeOption
                    //{
                    //    id = attributeOption.id,
                    //    value = attributeOption.value
                    //};
     
                    //db.AttributeOptions.Attach(entity);
                    //db.AttributeOptions.Remove(entity);
                    //db.SaveChanges();
                }
     
                return Json(new[] { attributeOption }.ToDataSourceResult(request, ModelState));
            }
     
            protected override void Dispose(bool disposing)
            {
                //db.Dispose();
                base.Dispose(disposing);
            }
        }
    }

     

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            height: 400,
            columns: [
                { field: "value" },
                { hidden: true, field: "id" },
                { hidden: true, field: "attribute_id" },
                {command: [ "edit" , "destroy"], width: 180 }
            ],
            toolbar: ["create"],
            dataSource: {
                type: "aspnetmvc-ajax",
                transport: {
                    read: {
                         url: "AttributeOptions_Read"
                    },
                    create: {
                        url: "AttributeOptions_Create"
                    },
                    update: {
                        url: "AttributeOptions_Update"
                    },
                    destroy: {
                        url: "AttributeOptions_Destroy"
                    }
                },
                schema: {
                    data: "Data",
                    model: {
                        id: "id",
                        fields: {
                            //id: { type: "number"},
                            value: { type: "string" }
                            // attribute_id:{ type: "number"}
                        }
                    }
                },
                serverPaging: true,
                serverSorting: true,
                serverSorting: true,
            },
            editable: "inline",
            scrollable: true
        })
     
    </script>
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 10 Feb 2017 Link to this post

    Hello,

    Is there any specific reason why your action method has same name as the default index action metho generated by the ASP.NET MVC. It should throw an error for using ambiguous requests since there are more than one action methods with same name. 

    Also I would like to mention that the Kendo UI Grid for ASP.NET MVC does by default POST requests when configured for Ajax binding. This is implemented by a custom DataSource transport and schema. Those are defined in the kendo.aspnetmvc.min.js. On the other hand the Html.ActionLink generates an anchor element and sent "GET" request. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jeff
    Jeff avatar
    2 posts
    Member since:
    Aug 2015

    Posted 10 Feb 2017 in reply to Boyan Dimitrov Link to this post

    Boyan Dimitrov said:

    Hello,

    Is there any specific reason why your action method has same name as the default index action metho generated by the ASP.NET MVC. It should throw an error for using ambiguous requests since there are more than one action methods with same name. 

    My example code wasn't clear what I was doing I actually had the default commented out and using the modified one.  Was going to save the Id to pass to the read.

    Also I would like to mention that the Kendo UI Grid for ASP.NET MVC does by default POST requests when configured for Ajax binding. This is implemented by a custom DataSource transport and schema. Those are defined in the kendo.aspnetmvc.min.js. On the other hand the Html.ActionLink generates an anchor element and sent "GET" request. 

    Regards,
    Boyan Dimitrov
    Telerik by Progress

    Let me dig around some more and come up with an alternative.

Back to Top