Объект XMLHttpRequest в JavaScript (который на самом деле делает запросы "AJAX") - это то, что известно как "тонкий клиент".Ваш веб-браузер является «толстым клиентом», он делает больше, чем просто делает запросы и получает ответы: он на самом деле выполняет такие вещи автоматически, как возвращает HTML, CSS и JavaScript, которые возвращаются, и «запускает» их, создает DOM и отображает красивые картинкии текст на ваш экран.Тонкий клиент, наоборот, буквально просто делает запросы и получает ответы.Вот и все.Он ничего не делает сам по себе.Вы, как разработчик, несете ответственность за использование ответов, чтобы действительно что-то делать.
В данном случае это означает, что вы получаете ответ и манипулируете DOM, чтобы заменить список игровых сессий другой игрой.сеансы восстановлены.То, как вы это сделаете, зависит от того, что именно вы возвращаете в ответ на ваш вызов AJAX.Это может быть HTML, готовый для вставки, или какой-то объект, такой как JSON.В первом случае вы буквально просто выбрали какой-либо родительский элемент в DOM, а затем заменили его innerHTML полученным ответом.В последнем случае вам понадобится использовать данные JSON для фактического построения и вставки элементов в DOM.
Возвращать прямой HTML проще, но он также менее гибок.Возвращение JSON дает вам абсолютную свободу, но из коробки гораздо сложнее манипулировать DOM для отображения этих данных.Как правило, это тот момент, когда вы хотите использовать клиентскую среду, такую как Vue, Angular, React и т. Д. Все это может создавать шаблонные компоненты.При этом вам нужно всего лишь изменить базовый источник данных (т.е. установить данные для JSON, который был возвращен), и компонент будет реагировать соответствующим образом, манипулируя DOM по мере необходимости для создания представления.
Мне лично нравитсяиспользовать Vue, поскольку он имеет наименьшее трение, чтобы начать работу с ним, он почти тупо прост в использовании.Например:
<div id="App">
<input type="date" v-model="startDate" />
<button type="button" v-on:click="filterGameSessionsByDate">Find</button>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.GameName)
</th>
<th>
@Html.DisplayNameFor(model => model.PlayDuration)
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.GameName }}</td>
<td>{{ item.PlayDuration }}</td>
</tr>
</tbody>
</table>
</div>
Затем немного JS, чтобы подключить его:
(function (options) {
let vm = new Vue({
el: '#App",
data: {
items: options.items,
startDate: null
},
methods: {
filterGameSessionsByDate: function () {
let self = this;
$.ajax({
type: "POST",
url: options.filterByDateUrl,
data: "startdate=" + self.startDate,
success: function (data) {
self.items = data;
}
});
}
}
});
})(
@Html.Raw(Json.Encode(new {
items = Model,
filterByDateUrl = Url.Action("GamingSessionsByDate", "GameSession")
}))
)
Это может показаться немного странным, если вы не привыкли к JS.Я просто использую то, что здесь называется замыканием: определение и вызов функции на месте.Требуется параметр options, который заполняется круглыми скобками внизу.Внутри них я создаю анонимный объект, который содержит необходимую мне информацию, такую как начальные элементы для отображения и URL-адрес для получения отфильтрованных результатов.Затем этот объект кодируется в JSON и выводится на страницу.