如何从数据库中获取数据,以便可以通过JavaScript创建动态元素?

时间:2019-01-19 14:05:35

标签: javascript c# razor asp.net-core asp.net-core-mvc

所以我这里有一个看起来像这样的模型

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);

如您所见,这将为文档中ID为theContainer的元素生成一个空的段落元素。

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

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

1 个答案:

答案 0 :(得分:2)

您有一些选择。您可以将值嵌入到视图中,以便在标记中呈现它。或者,您可以将JavaScript调出到服务器以进行检索。


让我们先将其嵌入视图中。我们假设用户名是您模型的属性。

在剃刀中,

@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无法使用它)。假设您在服务器上有一个端点,该端点返回一个User模型,其Username属性为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);
}