如何在Telerik UI for ASP.NET MVC中将数据添加到网格中而不保存到数据库?

时间:2015-01-07 07:35:09

标签: c# asp.net asp.net-mvc telerik

你们知道如何在没有将数据插入数据库的情况下在telerik中插入数据吗?因为我需要先保存数据,然后创建一个按钮将所有数据提交到数据库。

这是我的网格

@(Html.Kendo().Grid<COGS.Models.Invoice>()
        .Name("invoice-grid")
            .Events(e => {
                e.Edit("onEdit");
            }   
        )
        .DataSource(DataSource => DataSource
            .Ajax() 
            .Model(model => model.Id(data => data.InvoiceNumber))
            .Read(read => read
                    .Action("ReadInvoiceData", "Home"))
                    .Create(create => create.Action("CreateInvoiceData", "Home"))
                    .Update(update => update.Action("UpdateInvoiceData", "Home"))
                    .Destroy(destroy => destroy.Action("DeleteInvoiceData", "Home"))
        )
        .Columns(columns =>
                {
                    columns.Bound(data => data.InvoiceNumber);
                    columns.Bound(data => data.Date).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                    columns.Bound(data => data.RecievedDate).EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
                    columns.Command(command =>
                    {
                        command.Edit();
                        command.Destroy();
                    }).Title("Command").Width("250px");
                }
        )
        .ToolBar(toolbar =>
        {
            toolbar.Create().Text("Add New Invoice");
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
    )

这是我的控制器

public ActionResult ReadInvoiceData([DataSourceRequest] DataSourceRequest request)
    {
        IQueryable<Invoice> data = connection.Invoices.Where(x => x.Status == 1 && x.WaybillNumber == null);
        DataSourceResult result = data.ToDataSourceResult(request);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

public ActionResult CreateInvoiceData([DataSourceRequest] DataSourceRequest request, Invoice invoice)
    {
        if (ModelState.IsValid)
        {
            var entity = new Invoice
            {
                InvoiceNumber = invoice.InvoiceNumber,
                Date = invoice.Date,
                RecievedDate = invoice.RecievedDate,
                WaybillNumber = invoice.WaybillNumber,
                Status = invoice.Status
            };

            connection.Invoices.Add(entity);
            connection.SaveChanges();
        }
        return Json(new[] { invoice }.ToDataSourceResult(request, ModelState));
    }

public ActionResult UpdateInvoiceData([DataSourceRequest] DataSourceRequest request, Invoice invoice)
    {
        if (ModelState.IsValid)
        {
            var entity = new Invoice
            {
                InvoiceNumber = invoice.InvoiceNumber,
                Date = invoice.Date,
                RecievedDate = invoice.RecievedDate,
                WaybillNumber = invoice.WaybillNumber,
                Status = invoice.Status
            };

            connection.Invoices.Attach(entity);
            connection.Entry(entity).State = EntityState.Modified;
            connection.SaveChanges();
        }
        return Json(new[] { invoice }.ToDataSourceResult(request, ModelState));
    }

public ActionResult DeletePOData([DataSourceRequest] DataSourceRequest request, PurchaseOrder purchaseOrder)
    {
        if (ModelState.IsValid)
        {
            var entity = new PurchaseOrder
            {
                PONumber = purchaseOrder.PONumber,
                Date = purchaseOrder.Date,
                Origin = purchaseOrder.Origin,
                Vendor = purchaseOrder.Vendor,
                Status = purchaseOrder.Status
            };

            connection.PurchaseOrders.Attach(entity);
            connection.PurchaseOrders.Remove(entity);
            connection.SaveChanges();

        }
        return Json(new[] { purchaseOrder }.ToDataSourceResult(request, ModelState));
    }

编辑: 我已设法添加数据而不插入数据库并删除此行

connection.SaveChanges();

来自控制器中的create function,但是现在我如何创建一个按钮来将网格中的所有数据保存到数据库?我假设它将使用javascript来做到这一点

1 个答案:

答案 0 :(得分:0)

以下是KendoUI文档网站的示例: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-sync

<script>
var dataSource = new kendo.data.DataSource({
  batch: true,
  transport: {
    read:  {
      url: "http://demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    update: {
      url: "http://demos.telerik.com/kendo-ui/service/products/update",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    },
    destroy: {
      url: "http://demos.telerik.com/kendo-ui/service/products/destroy",
      dataType: "jsonp" //"jsonp" is required for cross-domain requests; use "json" for same-domain requests
    }
  },
  schema: {
    model: { id: "ProductID" }
  }
});
dataSource.fetch(function() {
  var product = dataSource.at(0);
  product.set("UnitPrice", 20);
  var anotherProduct = dataSource.at(1);
  anotherProduct.set("UnitPrice", 20);
  var yetAnotherProduct = dataSource.at(2);
  dataSource.remove(yetAnotherProduct);
  dataSource.sync(); // makes a request to http://demos.telerik.com/kendo-ui/service/products/update" and http://demos.telerik.com/kendo-ui/service/products/destroy
});
</script>

所以在javascript中,你必须找到网格小部件,获取它的dataSource并在其上调用sync方法。

var grid = $("#mygrid.k-grid").data('kendoGrid');
var ds = grid.dataSource;
ds.sync();