Javascript 如何将更新的数据从网格传递到控制器

在我的剑道网格中，在我通过弹出式编辑器编辑之后，更新按钮不起作用，“结果”是一个Ajax调用响应，因为我不使用服务，我不需要“读取”部分，这就是为什么我对其进行了评论

数据源初始化：

dataSource = new kendo.data.DataSource({
    transport: {
        //read: {
            //    url: result,
            //    dataType: "json"
        //},
        update: {
            url: "/AdminTool/update_grid",
            dataType: "json"
        },                             
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    },
    batch: true,
    pageSize: 20,
    schema: {
        model: {
            id: "DeviceIP",
            fields: {
                DeviceIP: { editable: false, nullable: true },
                Producer: { type: "string" },
                Model: { type: "string" },
                DeviceType: { type: "string" },
                Description: { type: "string" },
                Username: { type: "string" },
                Password: { type: "string" },
                PublicIP: { type: "string" },
            }
        }
    }
});

$("#turbingrid").kendoGrid({
    dataSource: result,
    scrollable: false,
    columns: [
       { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
       { field: 'Producer', title: 'Producer', width: '80px', editor: ProductNameDropDownEditor, },
       { field: 'Model', title: 'Model', width: '120px' },
       { field: 'DeviceType', title: 'DeviceType', width: '100px', editor:deviceTypesList },
       { field: 'Description', title: 'Description', width: '100px' },
       { field: 'Username', title: 'Username',width:'120px' },
       { field: 'Password', title: 'Password', width: '100px' },                                          
       { field: 'PublicIP', title: 'PublicIP', width: '120px' },
       { command: ["edit"], title: " ", width: "100px" }],
       editable: "popup",
       edit: function() {
               document.getElementsByName("DeviceIP")[0].disabled = true;
       },                          
       editable: "popup"
});

function ProductNameDropDownEditor(container, options) {             
    $('<input  name="Producer" data-type="string"\">')
       .appendTo(container)
       .kendoDropDownList({
           valuePrimitive: true,
           dataSource: mydata,
           dataTextField: "Text",
           dataValueField: "Text",
    });                                           
}              

function deviceTypesList(container, options) {
    $('<input  name="DeviceType" data-type="string" \">')
        .appendTo(container)
        .kendoDropDownList({
            dataSource: mydata_deviceType,
            dataTextField: "Text",
            dataValueField: "Text",
            //dataValueField: "ProductName",
    });
}

 [HttpPost]
    public ActionResult update_grid(TurbineDvce frm)
    {
        try
        {
            // TODO: Add update logic here

            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }

剑道网格初始化：

dataSource = new kendo.data.DataSource({
    transport: {
        //read: {
            //    url: result,
            //    dataType: "json"
        //},
        update: {
            url: "/AdminTool/update_grid",
            dataType: "json"
        },                             
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    },
    batch: true,
    pageSize: 20,
    schema: {
        model: {
            id: "DeviceIP",
            fields: {
                DeviceIP: { editable: false, nullable: true },
                Producer: { type: "string" },
                Model: { type: "string" },
                DeviceType: { type: "string" },
                Description: { type: "string" },
                Username: { type: "string" },
                Password: { type: "string" },
                PublicIP: { type: "string" },
            }
        }
    }
});

$("#turbingrid").kendoGrid({
    dataSource: result,
    scrollable: false,
    columns: [
       { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
       { field: 'Producer', title: 'Producer', width: '80px', editor: ProductNameDropDownEditor, },
       { field: 'Model', title: 'Model', width: '120px' },
       { field: 'DeviceType', title: 'DeviceType', width: '100px', editor:deviceTypesList },
       { field: 'Description', title: 'Description', width: '100px' },
       { field: 'Username', title: 'Username',width:'120px' },
       { field: 'Password', title: 'Password', width: '100px' },                                          
       { field: 'PublicIP', title: 'PublicIP', width: '120px' },
       { command: ["edit"], title: " ", width: "100px" }],
       editable: "popup",
       edit: function() {
               document.getElementsByName("DeviceIP")[0].disabled = true;
       },                          
       editable: "popup"
});

function ProductNameDropDownEditor(container, options) {             
    $('<input  name="Producer" data-type="string"\">')
       .appendTo(container)
       .kendoDropDownList({
           valuePrimitive: true,
           dataSource: mydata,
           dataTextField: "Text",
           dataValueField: "Text",
    });                                           
}              

function deviceTypesList(container, options) {
    $('<input  name="DeviceType" data-type="string" \">')
        .appendTo(container)
        .kendoDropDownList({
            dataSource: mydata_deviceType,
            dataTextField: "Text",
            dataValueField: "Text",
            //dataValueField: "ProductName",
    });
}

 [HttpPost]
    public ActionResult update_grid(TurbineDvce frm)
    {
        try
        {
            // TODO: Add update logic here

            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }

列编辑器：

dataSource = new kendo.data.DataSource({
    transport: {
        //read: {
            //    url: result,
            //    dataType: "json"
        //},
        update: {
            url: "/AdminTool/update_grid",
            dataType: "json"
        },                             
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    },
    batch: true,
    pageSize: 20,
    schema: {
        model: {
            id: "DeviceIP",
            fields: {
                DeviceIP: { editable: false, nullable: true },
                Producer: { type: "string" },
                Model: { type: "string" },
                DeviceType: { type: "string" },
                Description: { type: "string" },
                Username: { type: "string" },
                Password: { type: "string" },
                PublicIP: { type: "string" },
            }
        }
    }
});

$("#turbingrid").kendoGrid({
    dataSource: result,
    scrollable: false,
    columns: [
       { field: 'DeviceIP', title: 'DeviceIP', width: '100px', id: 'DeviceIP' },
       { field: 'Producer', title: 'Producer', width: '80px', editor: ProductNameDropDownEditor, },
       { field: 'Model', title: 'Model', width: '120px' },
       { field: 'DeviceType', title: 'DeviceType', width: '100px', editor:deviceTypesList },
       { field: 'Description', title: 'Description', width: '100px' },
       { field: 'Username', title: 'Username',width:'120px' },
       { field: 'Password', title: 'Password', width: '100px' },                                          
       { field: 'PublicIP', title: 'PublicIP', width: '120px' },
       { command: ["edit"], title: " ", width: "100px" }],
       editable: "popup",
       edit: function() {
               document.getElementsByName("DeviceIP")[0].disabled = true;
       },                          
       editable: "popup"
});

function ProductNameDropDownEditor(container, options) {             
    $('<input  name="Producer" data-type="string"\">')
       .appendTo(container)
       .kendoDropDownList({
           valuePrimitive: true,
           dataSource: mydata,
           dataTextField: "Text",
           dataValueField: "Text",
    });                                           
}              

function deviceTypesList(container, options) {
    $('<input  name="DeviceType" data-type="string" \">')
        .appendTo(container)
        .kendoDropDownList({
            dataSource: mydata_deviceType,
            dataTextField: "Text",
            dataValueField: "Text",
            //dataValueField: "ProductName",
    });
}

 [HttpPost]
    public ActionResult update_grid(TurbineDvce frm)
    {
        try
        {
            // TODO: Add update logic here

            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }

我想通过的模型

 public class TurbineDvce
{
    public string TurbineId { get; set; }
    public string DeviceIP { get; set; }
    public string Producer { get; set; }
    public string Model { get; set; }
    public string DeviceType { get; set; }
    public string Comments { get; set; }
    public string Description { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }

    public string PublicIP { get; set; }

}

---

使用

parameterMap

功能指定编辑每个剑道网格行时希望发送给控制器功能的数据

您还可以在函数中根据操作类型指定返回数据的不同方法

在您的情况下，示例如下：

transport: {
    update: {
        url:"/AdminTool/update_grid",
        dataType: "json"
    },
    parameterMap: function (data, operation) {
        if(operation !== "read" && data) {
            return kendo.stringify(data);
        }
    }
}

---

需要注意的是，如果希望在应用更改时自动调用服务器，您可能需要查看一下。或者，您可以手动调用

sync

。您可以选择使用提供的

transport.update

方法，也可以选择使用。您可以指定要随请求一起发送的。或者可以选择使用@Sandman thanks，但老实说，我不知道应该如何实现第二个，我不知道是应该单独编写还是放在剑道网格代码之间，您选择的解决方案可能取决于更新功能的预期行为。逐行更新，即在每次行编辑后调用

update\u grid

，或在保存所有更新的行时调用单个更新？使用您的首选项、控制器方法（

Update\u grid

）以及您认为提供更多上下文所必需的任何其他代码更新您的问题。@Sandman mine是每行的一个更新，但是我应该如何让“更新”按钮工作？我应该为“编辑”编写代码：？在剑道示例中有一个部分url:crudServiceBaseUrl+“/Products”，我知道crudServiceBaseUrl（我控制器的url），但第二部分（/Product）是什么，我的第二个问题是读什么：{……？为什么“读”？我已替换了上面示例中的URL属性，以使用OP中的URL。是用于从控制器获取剑道网格控件数据的函数。

传输

配置的完整文档。当您说它“不工作”时，你的意思是什么？你更新了问题，但没有提供关于当前/预期行为的详细信息。执行是否达到

parameterMap

功能，表明控制器功能可能存在问题？此外，

parameterMap

功能中的

数据包含什么？你的控制是什么oller函数期望？使用控制器函数（
Update_grid
）及其期望的参数结构更新您的问题。控制器期望从我的视图中获得一个模型，即“TurbineDvce”。这是我用来绑定网格的模型，我还在控制器中放置了一个断点（更新网格）但在我点击“更新”按钮并在参数映射中显示“数据”后，从未达到该点是网格的编辑数据，因此我们可以确定问题在于控制器功能或传递给控制器功能的数据结构。使用
Update\u grid
控制器功能更新您的问题，更新
turbindevce
模型的结构，以及
data
正在处理的示例通过
parameterMap
功能进行评估。