How to bind asp.net mvc grid data inside object model without posting to server

2 posts, 0 answers
  1. Sree
    Sree avatar
    1 posts
    Member since:
    Mar 2016

    Posted 14 Mar Link to this post

    I am new to mvc, new telerik. I have page with several sections: section A to G, and a button to register.
    Section A contains an Asp.Net MVC Grid.
    I would like to save this data to db only after filling all the sections. However I should be able to save the section A data in grid to the associated viewmodel each time a row is added, updated, deleted. I have tried below code as per samples provided on the telerik website, but I am unsuccessful. Please could you help me on how will be be able to achieve this?

    My object model for the page looks like below:

    namespace SampleProject.Models
    {
    public class Base {
    public Guid Id {get; set;}
    public string Name{get; set;}
    }
    public class Person : Base {
    public string TelephoneNumber {get; set;}
    public string FaxNumber {get; set;}
    public string EmailAddress {get; set;}
    }
    public class Order {
    public Order()
    {
    Persons = new List<Person> ();
    }
    public List<Person> Persons {get; set;}
    }

    }

    namespace SampleProject.ViewModels
    {
    public class RegisterViewModel
    {
    public RegisterViewModel()
    {
    Order = new Order();
    }
        Order Order {get; set;}
    }
    }

    VIEw:
    @model SampleProject.ViewModels.RegisterViewModel
     @(Html.Kendo().Grid<SampleProject.Models.Person>()
                                        .Name("PersonGrid")
                                        .Columns(columns =>
                                        {
                                            columns.Bound(c => c.Name);
                                            columns.Bound(c => c.TelephoneNumber).Title("Telephone Number");
                                            columns.Bound(c => c.FaxNumber).Title("Fax Number");
                                            columns.Bound(c => c.EmailAddress).Title("Email Address");
                                            columns.Command(command =>
                                            {
                                                command.Edit();
                                                command.Destroy();
                                            }).Title("Actions").Width(250);
                                        })
                                        .ToolBar(toolbar => toolbar.Create())
                                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                                        .HtmlAttributes(new { style = "height: 150px;" })
                                        .Scrollable()
                                        .Sortable()
                                        .DataSource(dataSource => dataSource
                                                    .Ajax()
                                                    .Model(model => model.Id(c => c.Id))
                                                    .Create(create => create.Action("CreatePerson", "Register"))
                                                    .Update(update => update.Action("UpdatePerson", "Register"))
                                                    .Destroy(delete => delete.Action("DeletePerson", "Register"))
                                                    .Read(read => read.Action("ReadPersons", "Register"))
                                                    )
                                    )

    Controller:
    public class RegisterController
    {
    private RegisterViewModel registerViewModel;
    public ActionResult RegisterNewOrder()
            {           
                return View(registerViewModel);
            }

    public ActionResult ReadPersons([DataSourceRequest] DataSourceRequest request)
            {
                return Json(registerViewModel.Order.Persons.ToDataSourceResult(request),
                            JsonRequestBehavior.AllowGet);
            }

    [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult CreatePerson([DataSourceRequest] DataSourceRequest request, Person person)
            {
                if (person != null)
                {
                    person.Id = Guid.NewGuid();
                    if (ModelState.IsValid)
                    {
                        var xPerson = new Person
                        {
                            Id = person.Id,
                            Name = person.Name,
                            TelephoneNumber = person.TelephoneNumber,
                            EmailAddress = person.EmailAddress,
                            FaxNumber = person.FaxNumber
                        };
                        registerViewModel?.Order?.Persons.Add(xPerson);
    person.Id = xPerson.Id;
                    }
                }
                return Json(new[] { person }.ToDataSourceResult(request, ModelState));
            }

    [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult UpdatePerson([DataSourceRequest] DataSourceRequest request, Person person)
            {
                if (ModelState.IsValid)
                {
                    var xPerson = registerViewModel.Order.Persons
                                           .FirstOrDefault(x => x.Id == person.Id);
                    //TODO: Need to find out exact
                    if (xPerson  != null)
                    {
                        xPerson .Name = person.Name;
                        xPerson .TelephoneNumber = person.TelephoneNumber;
                        xPerson .FaxNumber = person.FaxNumber;
                        xPerson .EmailAddress = person.EmailAddress;
                    }
                }
                return Json(new[] { person }.ToDataSourceResult(request, ModelState));
            }
    [AcceptVerbs(HttpVerbs.Post)]
            public ActionResult DeletePerson([DataSourceRequest] DataSourceRequest request, Person person)
            {
                if (person != null && ModelState.IsValid)
                {
                    registerViewModel?.Order?.Persons.Remove(person);
                }
                return Json(new[] { person }.ToDataSourceResult(request, ModelState));
            }
    }

    Thanks,
    Sreeni

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 16 Mar Link to this post

    Hello Sree,

     

    I am afraid that I am not completely sure that I understand what you are trying to achieve. 

     

    With regards to the title of the thread I believe you are trying initially to populate the Kendo UI Grid for ASP.NET MVC from the model object, but not to send a request to the read action method. This is actually possible using the following syntax: 

    @model KendoUIMVC5.Models.Category
     
    @(Html.Kendo().Grid(Model.Products)
                  .Name("Products")
    ....

    The @model SampleProject.ViewModels.RegisterViewModel object exists only on the server side. When the update/create/delete operation is performed on the client-side there is no @model SampleProject.ViewModels.RegisterViewModel object on the client-side. This is why Kendo UI DataSource should post to update/create/delete action methods in order to sync changes made on the client-side with the server. 

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top