如何使用 JavaScript 从数据库/模型中获取数据答案

【问题标题】：How to get data from Database/Model with JavaScript如何使用 JavaScript 从数据库/模型中获取数据
【发布时间】：2017-06-14 15:16:49
【问题描述】：

我是 ASP .NET、MVC 和 AngularJS 的新手，所以我还在努力解决这一切。

我有一个名为 Words.cs 的模型，其中包含：

namespace liveSearch.Models
{
    public class Words
    {
        public int ID { get; set; }
        public string Word{ get; set; }
    }
}

数据库已经填充了数据，我想使用 JavaScript/JQuery 从数据库中获取每个 Word，以便我可以在 JavaScript 等中操作该数据。

我目前的 index.cshtml 中有 Razor：

@{
     foreach (var item in Model)
     {
         <li>
             @Html.DisplayFor(modelItem => item.Word)
         </li>
     }
 }

这适用于获取和显示模型中的所有单词，但我想摆脱 Razor 并使用 JavaScript/Jquery 来获取数据。

理想情况下，我想从数据库中获取所有单词（我不关心 ID）并将其添加到 .js 文件范围内的数组中。

问题是我不知道如何使用 JavaScript 或 AJAX 访问数据库

我想我可以使用$.get() 或$.ajax()，但我真的不知道如何将它与数据库/模型一起使用。

我还阅读了 Stackoverflow 上的其他几篇文章，说这是可以做到的，但由于某种原因，我无法将这些示例中的任何一个应用到我的案例中。

【问题讨论】：

所以你需要从@ajax调用WbApi/Controller方法并使用返回数据并在ui中显示
你为什么要这样做。您可以使用 var words = @Html.Raw(Json.Encode(Model)); 将视图中的模型简单地分配给 javascript 数组（然后 words[0].Word 将返回集合中第一个 Word 属性的值。

标签： javascript jquery angularjs asp.net-mvc razor

【解决方案1】：

首先，您需要在控制器中创建一个返回Json 的操作方法。像这样的：

public JsonResult SomeAction()
{
   var list = context.Words.ToArray();
   return Json(list);
}

然后在您看来，您只需使用 ajax 来获取数据：

$.ajax({
type: 'GET',
url: '@Url.Action("SomeAction", "ControllerName")',
dataType: 'json',
success: function (data) {
  //the data parameter will be an array of objects. The objects will be of type Words
  //so data[0].Word(javascript) would be equal to list[0].Word in your SomeAction method(C#)
}
});

【讨论】：

contentType: 'application/json; charset=utf-8', 毫无意义（它是 GET 且 GET 没有正文）
你说得对，我马上修改。谢谢指正。
我在@Url.Action()上收到此错误：“加载资源失败：服务器响应状态为 404（未找到）”
我只是希望你没有写“ControllerName”而不是你的控制器的名字。 @Url.Action 是一个辅助方法，（在这种情况下）有两个参数：第一个是控制器的名称，第二个是动作的名称。因此，如果您的控制器的名称（其中定义了“SomeAction”操作）是 HomeController，那么 @Url.Action 将如下所示：@Url.Action("Home", "SomeAction")
代替这个，你可以写下你的action的链接：url: '/Home/SomeAction'，但是在asp.net mvc中这是一种更方便的方式（因为路由）。

【解决方案2】：

您可以在页面加载或按钮单击时调用此方法以获取结果。

   $.ajax({
    url: "yourControllerMethod",


    dataType: "json",
    success: function(data){
    alert(data)
      // here you will get the json data.
      // now uisng jQuery you can run a loop and show the data where you want to do 
      }
 });

【讨论】：

contentType: 'application/json; charset=utf-8', 毫无意义（它是 GET 且 GET 没有正文）