Используйте кнопку для загрузки дополнительных данных с сервера без обновления страницы

Мой сервер загружает статьи из xml и отправляет их на мой взгляд. Вместо этого я хотел бы отправить только некоторые статьи, а не все, и предоставить пользователю кнопку для загрузки дополнительных статей. Но как я могу отправить эти новые данные в свое представление, не обновляя страницу, возможно ли обновить только модель?

public IActionResult Index()
        {
            List<Article> articles = new List<Article>();

            XmlSerializer serializer = new XmlSerializer(typeof(List<Article>), new XmlRootAttribute("Articles"));
            using (StreamReader reader = new StreamReader(HostingEnvironment.WebRootPath + @"/articles/articles.xml"))
            {
                articles = (List<Article>)serializer.Deserialize(reader);
            }

            return View(articles);
        }


<div id = "articles">
    @foreach (Article art in Model)
    {
        var articleImage = "/images/articles/" + art.Image + ".jpg";
        <article>
            <div class = "article_title_and_date">
                <h2 class = "article_title">@art.Title</h2>
                <p class = "article_date">@art.Date</p>
            </div>
            <img src = "@Url.Content(articleImage)" alt = "image">
            <p>
                @art.Text
            </p>
        </article>
    }
</div> 
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
113
1

Ответы 1

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

var postNumber = 1;

document.getElementById('getNextPost').addEventListener('click', function() {
  var currentPost = document.getElementById('currentPost');
  var url = `https://jsonplaceholder.typicode.com/posts/${postNumber++}`;

  fetch(url)
    .then(response => response.json())
    .then(json => currentPost.innerHTML = json.body)
})
<div id = "currentPost">Some static content from the server</div>
<button id = "getNextPost">Get Next Post</button>

В этом примере используется конечная точка JSON; однако вы можете читать значения из конечной точки XML, используя window.DOMParser внутри .then()

new window.DOMParser()).parseFromString(str, "text/xml")

Большое спасибо за вашу помощь! Я использовал jquerry и вызвал там функцию своего контроллера, которая возвращает строку. Затем я добавляю его как html в свои статьи. code <script> var articleLoaded = 5; $ (document) .on ('click', '#getNextArticles', function () {$ .get ("/ Home / GetMoreArticles", {articleLoaded: articleLoaded}, function (data) {var currentPost = document.getElementById (' article '); currentPost.innerHTML + = data; articleLoaded + = 5;});}); </script> code

BaptisteOuille 24.12.2018 14:17

@BaptisteOuille, честно говоря, ваш код на 99% состоит из ванильного JavaScript, я бы просто отказался от jQuery.

AnonymousSB 24.12.2018 14:20

Другие вопросы по теме