带有 Angular 和 Kendo UI 的 ASP.Net MVC答案

【问题标题】：ASP.Net MVC with Angular and Kendo UI带有 Angular 和 Kendo UI 的 ASP.Net MVC
【发布时间】：2017-04-14 23:15:36
【问题描述】：

我是 ASP、剑道和一般编程的新手。我正在尝试使用 Kendo Grid 对数据库进行 CRUD；但我有点迷路了。

我有一个简单的类：Person，有姓名和姓氏。生成的控制器和视图工作正常，我可以对数据库进行 CRUD。

然后，我使用 Angular 创建了这个模块：

`angular.module("KendoDemos2", ["kendo.directives"])
    .controller("MyCtrl2", function ($scope) {
        $scope.mainGridOptions = {
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: { url: "/Person/Read", dataType: "json" },
                    create: { url: "/Person/Create", dataType: "json", type: "POST" },
                    update: { url: "/Person/Update", dataType: "json", type: "PUT" },
                    destroy: { url: "/Person/Delete", dataType: "json", type: "DELETE" },
                    parameterMap: function (options, operation) {
                        if (operation !== "read") {
                            console.log(options)
                            return kendo.stringify(options);
                        }
                    }
                },
                batch: false,
                pageSize: 10,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Name: { type: "string },
                            Surname: { type: "string" }                            }
                    }
                }
            })`

问题是：

首先，当我在 Grid 上创建一个新人时，当我按下“创建”时，我不知道数据是否正在传递给控制器。

其次，在控制器中，我不知道如何接收此信息（我相信是 json）。

对不起，我是个初学者。

编辑

我在Controller上有这个方法：

[HttpPost]
        public ActionResult Create(Person model)
        {
            if (model != null)
            {
                return Json("Success");
            }
            else
            {
                return Json("An Error Has Occurred");
            }
        }

所以，这将被发送到 Person/Create 方法： { 姓名：“John”，姓氏：“Doe”}

返回成功；

但是如何从 Json 中获取这些属性并填充模型？

【问题讨论】：

what editor are you using? 欢迎来到 SO :)
嘿，谢谢！ :) 我在 Visual Studio 2015 上。
您想使用断点来查看数据如何移动到不同的调用中。在屏幕左侧的编辑器中靠近您正在处理的代码块的边缘附近左边缘你可以切换不同的东西，比如书签，但有时重要的是断点允许代码执行到pause它的红色并允许“调试”@那个位置，你可以看到与该代码相关的所有内容.
感谢 mvermef，现在第二个问题要了我的命。

标签： angularjs asp.net-mvc kendo-grid

【解决方案1】：

好的。

POST = 创建
GET = 好 Get 在上下文中的请求类型来自浏览器到服务器
PUT = 更新
DELETE = 完全删除

所以这些是与 RESTFUL APIS 所在的 HTTP 相关联的动词，在大多数情况下，还有更多内容需要查看，在此答案的范围内。

由于调用的性质，它已经了解某些内容，例如您发送的数据类型在 Content-Type: application/json 中。

该方法缺少的一件事令我惊讶的是它不存在 [FromBody]，除非您自己手动编写方法而不是搭建脚手架。对于刚开始的人来说可以理解。 :)

要查看将其中一个break points 放在 if 语句旁边，您可以查看 model 是否确实填充了 post 调用的内容。

[HttpPost] //because we want to create (new Person(){}) right?
public ActionResult Create([FromBody] Person model){
  if(model != null && model.IsValid){

       //EntityFramework  or what ever DB you are using 
       _context.Person.Add(model);
       _context.SaveChanges();

      //doing this returns to the client that it was created as well as the
      //Id of the newly inserted record. model.Id was automagically updated with the Id.
      return Created("api/person/create", model);
  }
  else{
     //something was horribly wrong with the model sent
     return BadRequest("Invalid Model");
 }
}

我认为这将涵盖问题的主要内容。我认为您使用的是旧版本的 asp.net，因此 JsonResult 可能也可用，BadRequest and Created 假设正在使用 ApiController 或 Controller 中的 Asp.net Core

【讨论】：

【解决方案2】：

mvermef，非常感谢您的所有解释。我正在使用带有 EF 的 ASP.Net MVC 5。我按照你说的做了，效果很好。

一开始我没有包含 Web API，但需要它来使 [FromBody] 工作。

另一个小而重要的事情是在 kendo 配置中包含 contentType： create: { url: "/Person/Create", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" },

【讨论】：