时间戳

首页 > 解决方案 > 如何从数据库中获取数据，以便通过 javascript 创建动态元素？

javascript - 如何从数据库中获取数据，以便通过 javascript 创建动态元素？

问题描述

所以我在这里有这个模型，看起来有点像这样

public class UserAccount : IdentityUser
    {
        public string Username{ get; set; }
    }

我也有一个看起来像这样的视图

    @model Myproject.ViewModel.TheViewModel
    @{
        ViewData["Title"] = "Welcome";
    }

<div id="theContainer"> <div/>

在该视图中，我想使用 JavaScript 生成一个段落（不是内联，我想使用单独的文件）所以我创建了一个 js 文件，然后创建了一个像这样工作的函数。

var container = document.getElementById("theContainer");
var newParagraph= document.createElement("p");

//I could add attributes by doing newParagraph.addAttribute(..)
// but you will read why that is an issue soon

container.appendChild(newParagraph);

如您所见，这将为theContainer文档中具有 id 的元素生成一个空段落元素。

这就是问题发生的地方。我为我的 ASP.NET 项目设置了一个数据库，其中有几个条目。我想获取Username这些条目的属性，然后<p/>动态生成元素。问题是我不知道如何从数据库中获取数据并将其与我的 JavaScript 一起使用。

所以我的问题是，如何从我的数据库中获取数据并使用它来生成元素？

标签： javascriptc#razorasp.net-coreasp.net-core-mvc

解决方案

你有几个选择。您可以将值嵌入到您的视图中，以便它在标记中呈现。或者你可以让你的 JavaScript 调用你的服务器来检索它。

让我们从将它嵌入到视图中开始。我们假设 Username 是模型的属性。

在你的剃须刀里，

@Html.Hidden(m => m.Username)

然后在您的 JavaScript 中，您可以从隐藏的输入中检索值。

var username = document.getElementById("Username").value;

这种技术有一个不幸的优势，就是用很多隐藏的字段污染你的视图。您可以将整个模型推入 JSON 字符串并将其添加到隐藏字段，但这也很麻烦。

与使用隐藏字段类似，您可以将值直接粘贴到放置在 Razor 视图中的脚本中。

<script>
    var username = '@Model.Username';
</script>

然后，您可以从其他脚本中使用该变量。

或者您可以从您的服务器获取值。您可以使用Fetch API（请注意，如果没有 pollyfill，它在 Internet Explorer 中不可用）。假设您在服务器上有一个端点，该端点返回一个用户模型，其用户名属性为 JSON。

fetch('/user/1')
  .then(function(response) {
    return response.json();
  })
  .then(function(user) {
    var username = user.Username;
  });

（我可能弄错了语法，我自己并没有使用 Fetch API）

如果您不想使用 Fetch API，可以使用旧的XMLHttpRequest API 与服务器端进行通信。直接使用 API 很糟糕（它不是超级友好），所以我们经常在它上面使用抽象层，例如jQuery AJAX。假设与上一个示例相同的服务器端：

$.ajax({
  method: "GET",
  url: "/user/1",
  dataType: "json"
})
.done(function(user) {
  var username = user.Username;
 });

对于您的服务器端，MVC 控制器可以返回 JSON：

public ActionResult User(int id)
{
    var user = userRepository.GetUserById(id);
    return Json(user, JsonRequestBehavior.AllowGet);
}

或者您可以将Web API安装到您现有的 ASP.NET 项目中（它可以与 MVC 一起使用）：

public IHttpActionResult User(int id)
{
    var user = userRepository.GetUserById(id);
    return Ok(username);
}

推荐阅读