Как мне извлечь данные из базы данных, чтобы я мог создавать динамические элементы с помощью JavaScript? - PullRequest
Новая
       21

Как мне извлечь данные из базы данных, чтобы я мог создавать динамические элементы с помощью JavaScript?

0 голосов
/ 19 января 2019

Итак, у меня есть эта модель, которая выглядит примерно так 

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 внутри документа.

И именно здесь возникает проблема. У меня есть настройка базы данных для моего проекта ASP.NET, и у меня есть несколько записей там. Я хотел бы получить свойство Username этих записей, а затем динамически генерировать элементы <p/>. Проблема в том, что я понятия не имею, как извлечь данные из базы данных и использовать их с моим JavaScript.

Итак, мой вопрос: как мне извлечь данные из моей базы данных и использовать их для генерации элементов?

1 Ответ

0 голосов
/ 19 января 2019

У вас есть несколько вариантов.Вы можете встроить значение в ваше представление, чтобы оно отображалось в разметке.Или вы можете сделать так, чтобы ваш JavaScript вызывал ваш сервер, чтобы получить его.

Давайте начнем с встраивания его в представление.Мы предполагаем, что имя пользователя является свойством вашей модели.

В вашем Razor, 

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

Затем в вашем JavaScript вы можете извлечь значение из скрытого ввода. 

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

У этой техники есть к сожалению преимущество, заключающееся в загрязнении вашего вида большим количеством скрытых полей.Вы можете просто вставить всю модель в строку JSON и добавить ее в скрытое поле, но это тоже грязно.

Как и в случае использования скрытого поля, вы можете вставить значение непосредственно в скриптпомещен в вид бритвы.

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

Затем вы можете использовать эту переменную из других ваших скриптов.

Или вы можете получить значение с вашего сервера.Вы можете использовать Fetch API (имейте в виду, что он не доступен в Internet Explorer без pollyfill).Предположим, у вас есть конечная точка на сервере, которая возвращает модель User со свойством Username в виде JSON. 

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

(возможно, я неправильно понял синтаксис, я сам не слишком много работал с API Fetch))

Если вы не хотите использовать 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);
}
...