Question

我的服务器从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>

Answer 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端点；但是，您可以使用window.DOMParser

中的.then()从XML端点读取值

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

使用按钮从服务器加载更多数据，而无需刷新页面

1 个答案: