所以我这里有这个模型,看起来有点像这样
public class UserAccount : IdentityUser
{
public string Username{ get; set; }
}
我也有一个看起来像这样的 View
@model Myproject.ViewModel.TheViewModel
@{
ViewData["Title"] = "Welcome";
}
<div id="theContainer"> <div/>
在该 View 中,我想使用 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 一起使用。
所以我的问题是,如何从数据库中获取数据并使用它来生成元素?
最佳答案
您有几个选择。您可以将该值嵌入到 View 中,以便它在标记中呈现。或者您可以让 JavaScript 调用您的服务器来检索它。
<小时/>让我们从将其嵌入 View 开始。我们假设用户名是您模型的属性。
在你的 Razor 中,
@Html.Hidden(m => m.Username)
然后在 JavaScript 中,您可以从隐藏输入中检索值。
var username = document.getElementById("Username").value;
这种技术有一个不幸的优点,即大量隐藏字段会污染您的 View 。您可以将整个模型放入 JSON 字符串中,然后将其添加到隐藏字段中,但这也很困惑。
<小时/>与使用隐藏字段类似,您可以将值直接粘贴到 Razor View 中的脚本中。
<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很糟糕(不是 super 友好)所以我们经常在它上面使用一个抽象层,比如jQuery AJAX 。假设与前面的示例相同的服务器端:
$.ajax({
method: "GET",
url: "/user/1",
dataType: "json"
})
.done(function(user) {
var username = user.Username;
});
<小时/>
对于服务器端,MVC Controller 可以返回 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);
}
关于javascript - 如何从数据库获取数据以便通过 JavaScript 创建动态元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54267900/