如何使用剑道MVVM和c#从服务器端API调用剑道数据源请求

本文关键字:API 调用 数据源 服务器端 请求 何使用 MVVM | 更新日期: 2023-09-27 17:50:41

我使用HTML页面作为前端,我必须将一行json数据传输到数据库,我应该如何将一行完整的值作为参数传输到服务器端功能或请求数据源从服务器端填充实体?

下面是我的html代码:

   <div id="example">
    <div id="kendoGrid"
         data-role="grid"
         data-pageable=" true"
         data-sortable=" true"
         data-filterable="true"
         data-toolbar="['create','save', 'cancel']"
         data-editable="inline"
         data-columns="[
      { 'field': 'Id', 'width': 100 },
              { 'field': 'ShortName', 'width': 100 },
          { 'field': 'FullName', 'width': 100 },
       { 'field': 'ContactPerson', 'width': 100 },
            { 'field': 'CurrentCurrencyCode', 'width': 100 },
       { 'field': 'Adress1', 'width': 100 },
       { 'field': 'CompanyCity', 'width': 100 },
         { 'field': 'CompanyState', 'width': 100 },
          { 'field': 'CompanyCountry', 'width': 100 },
          { 'field': 'ZipPostCode', 'width': 100 },
      { 'field': 'TelArea', 'width': 100 },
      { command: ['edit', 'update'], title: 'Actions', width: '250px' },
     ]"
         data-bind="source: products"
         style=" height :500px"></div>
</div>

这是我的代码视图模型,成功地填充网格

   document.onreadystatechange = function () {

var viewModel = kendo.observable({
    products: new kendo.data.DataSource({
        schema: {
            //data:"Data",
            total: "Count",
            model: {
                Id: "Id",
                fields: {
                    Id: { type: "int" },
                    ShortName: { editable:true, type: "string" },
                    FullName: { editable: true, type: "string" },
                    ContactPerson: { editable: true, type: "string" },
                    CurrentCurrencyCode: { editable: true, type: "int" },
                    Adress1: { editable: true, type: "string" },
                    CompanyState: { editable: true, type: "string" },
                    CompanyCity: { editable: true, type: "string" },
                    CompanyCountry: { editable: true, type: "string" },
                    ZipPostCode: { editable: true, type: "string" },
                    TelArea: { editable: true, type: "string" }
                }
            }
        },
        batch: true,
        transport: {
            read: {
                url: "/api/Companies/GetAllCompanies",
                dataType: "json"
            },
            create: {
                type: 'POST',
                // data: { request: {defcompny} , type: "create" },
                url: "/api/Companies/SaveDefCompny", // here you need correct api url
                dataType: 'json'
                //contentType:"json"
            },
            //update: {
            //    url: "/api/Companies/SaveDefCompny", // here you need correct api url
            //    dataType: "json"
            //},
            destroy: {
                url: "/api/Companies/Delete", // here you need correct api url
                dataType: "json"
            },
            parameterMap: function (data, operation) {
                if (operation !== "read" && data) {
                    debugger;
                    //return kendo.stringify({ defcompny: data.models[0] });
                    return JSON.stringify({ product: data.models[0] });
                    //return {"defcompny": "mydata" };
                }
            }
        }
    }) 

});
    // var gridData = viewModel.product;
    kendo.bind(document.getElementById("example"), viewModel);
    }

这是我的服务器端代码,我使用它的实体必须填写值,当我做一个调用请求或如何使数据源请求填充实体?

  [HttpPost]
    //product must have the values on view model operation create call and sending product data but it is null 
    public string SaveDefCompny( DefCompanyDTO product)
    {

        //return defcompny.save();
        RPDBEntities data = new RPDBEntities();
        var def = new DefCompany();
        {
            def.Id = product.Id;
            def.CurrentCurrencyCode = product.CurrentCurrencyCode;
            def.ShortName = product.ShortName;
            def.FullName = product.FullName;
            def.ContactPerson = product.ContactPerson;
            def.Address1 = product.Address1;
            def.CompanyCity = product.CompanyCity;
            def.CompanyState = product.CompanyState;
            def.CompanyCountry = product.CompanyCountry;
            def.ZipPostCode = product.ZipPostCode;
            def.TelArea = product.TelArea;
        }
        data.DefCompanies.Add(def);
        data.SaveChanges();
        return def.ShortName;
        //return Json(new[] { product }.ToDataSourceResult(request, ModelState));

    } 

参数产品有空值我已经测试使用参数字符串产品,但然后API不做调用我试图传递字符串值,但仍然API调用失败?

如何使用剑道MVVM和c#从服务器端API调用剑道数据源请求

我将它作为JSON字符串从HTML使用JQuery或AJAX调用到服务器。

然后,在我的控制器中,我将使用post方法:

[HttpPost]
public string SaveDefCompny(string serializeddata)
{
   DefCompanyDTO product = NewtonSoft.JsonConvert.DeSerializeObject(serializeddata);
}

我对Telerik在他们的演示中指定的场景使用AJAX绑定:

public ActionResult Products_Create([DataSourceRequest]DataSourceRequest request, ProductViewModel product)
{
    if (ModelState.IsValid)
    {
        using (var northwind = new NorthwindEntities())
        {
            // Create a new Product entity and set its properties from the posted ProductViewModel
            var entity = new Product
            {
                ProductName = product.ProductName,
                UnitsInStock = product.UnitsInStock
            };
            // Add the entity
            northwind.Products.Add(entity);
            // Insert the entity in the database
            northwind.SaveChanges();
            // Get the ProductID generated by the database
            product.ProductID = entity.ProductID;
        }
    }
    // Return the inserted product. The grid needs the generated ProductID. Also return any validation errors.
    return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}

您可以在Telerik演示中了解更多信息。

既然你在评论中提到你的数据来自WebAPI,这个例子也可能对你有所帮助。

UPDATE (source):

如果你使用的是MVC包装器的剑道网格,这将不会发生。在这里,由于这个ASP,网格被配置为发出POST请求。. NET MVC行为。不过要确保包含了kendo.aspnetmvc.min.js。更多信息可以在文档中找到。

默认的Kendo Grid for ASP。. NET MVC应该在为ajax绑定配置。这是由自定义实现的数据源传输和模式。定义在kendo.aspnetmvc.min.js。控件之后包含该文件其他剑道JavaScript文件。更多信息可以在介绍帮助主题

解决方案:正确的JavaScript文件顺序

<script src="/Scripts/kendo.web.min.js"></script> <-- or kendo.all.min.js -->
<script src="/Scripts/kendo.aspnetmvc.min.js"></script>

请参见Telerik的故障排除指南。