Подгрузить дополнительные данные при нажатии на кнопку - C# ASP.NET Core - Ответ 7666648

@Casper-SC · Регистрация: 27.03.2010

Author24 — интернет-сервис помощи студентам

Страница, которая выводит первичные данные.

Кликните здесь для просмотра всего текста

HTML5

@using ZooWorld.Core.Zoo
@model Animal[]
 
@{
    ViewBag.Title = "Главная";
 
    // UpdateTargetId - элемент на странице, который будет обновляется после получения новых данных со стороны сервера.
    // Url - адрес ресурса на сервере, который возвращает данные для обновления страницы
    var loadAdditionalOpt = new AjaxOptions
    {
        UpdateTargetId = "animal-table-body",
        HttpMethod = "Post",
        InsertionMode = InsertionMode.InsertAfter
    };
}
 
<h3>Главная</h3>
<p>Вы можете нажать по названию животного в списке, чтобы увидеть подробности</p>
<br />
<div class="row">
    <div class="row col-md-7">
 
        <table class="table table-hover table-condensed">
            <caption>Список животных в зоопарке</caption>
            <thead>
                <tr>
                    <th>Имя</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="animal-table-body">
                @{ Html.RenderPartial("AdditionalAnimals", Model); }
            </tbody>
        </table>
 
        @using (Ajax.BeginForm("LoadAdditionalAnimals", "Home", new { quantity = (int)ViewBag.Quantity }, loadAdditionalOpt))
        {
            <input id="get-additional-animls" class="btn btn-sm btn-default" type="submit" value="Ещё животные" />
        }
    </div>
 
    <div id="details-block" class="row col-md-4 col-md-offset-1"></div>
</div>
 
<div id="footer-block" class="row"></div>
@section scripts
{
    @*Ненавязивый JavaScript для выполнения запроса на сервер без полного обновления страницы*@
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/User/movable-block.js"></script>
}

Частичное представление AdditionalAnimals

Кликните здесь для просмотра всего текста

HTML5

@using ZooWorld.Core.Zoo
@model Animal[]
 
@{
    // UpdateTargetId - элемент на странице, который будет обновляется после получения новых данных со стороны сервера.
    // Url - адрес ресурса на сервере, который возвращает данные для обновления страницы
    var detailsOpt = new AjaxOptions
    {
        UpdateTargetId = "details-block",
        HttpMethod = "Post"
    };
}
 
@foreach (Animal animal in Model)
{
    <tr>
        <td>
            @Ajax.ActionLink(@animal.Name, "AnimalDetails", "Home", new { animalId = @animal.Id }, detailsOpt)
        </td>
        <td>
            @using (Ajax.BeginForm("AnimalDetails", "Home", new { animalId = @animal.Id }, detailsOpt))
            {
                <input class="btn btn-sm btn-default" type="submit" value="Подробности" />
            }
        </td>
        <td>
            @using (Ajax.BeginForm("AnimalDetails", "Home", new { animalId = @animal.Id }, detailsOpt))
            {
                <input class="btn btn-sm btn-default" type="submit" value="Покормить" />
            }
        </td>
    </tr>
}

Контроллер:

Кликните здесь для просмотра всего текста

C#

    public class HomeController : Controller
    {
        //Сделан для того, чтобы каждый запрос в текущей сессии не создавался новый 
        //экземпляр класса ZoologicalGarden. (см. NinjectDependencyResolver.cs).
        //Каждый запрос, а следовательно создание экземпляров контроллеров
        //передаётся один единственный экземпляр класса на поток, реализующий интерфейс IZooSessionResolver,
        //который уже определяет нужно создать новый ZoologicalGarden или взять экземпляр, 
        //сохранённый в сессии.
        private readonly IZooSessionResolver _zooResolver;
 
        public HomeController(IZooSessionResolver zooResolver)
        {
            Debug.Assert(zooResolver != null);
            _zooResolver = zooResolver;
        }
 
        public ZoologicalGarden ZooGarden
        {
            get { return _zooResolver.GetZoologicalGarden(this); }
        }
 
        // GET: Main
        public ActionResult Index()
        {
            //Animal[] animals = ZooGarden.Animals.GetAll();
            Animal[] animals = ZooGarden.Animals.GetRange(0, 3);
            ViewBag.Quantity = animals.Length;
            return View("Index", animals);
        }
 
        [HttpPost]
        public ActionResult AnimalDetails(int animalId)
        {
            Animal animal = ZooGarden.Animals.GetById(animalId);
            return PartialView("AnimalDetails", animal);
        }
 
        //[ChildActionOnly]
        [HttpPost]
        public PartialViewResult LoadAdditionalAnimals(int quantity)
        {
            Animal[] animals = ZooGarden.Animals.GetRange(quantity, 1);
            ViewBag.Quantity = animals.Length + quantity;
            return PartialView("AdditionalAnimals", animals);
        }
    }

Суть в том, что сейчас, когда я нажимаю на

HTML5

        @using (Ajax.BeginForm("LoadAdditionalAnimals", "Home", new { quantity = (int)ViewBag.Quantity }, loadAdditionalOpt))
        {
            <input id="get-additional-animls" class="btn btn-sm btn-default" type="submit" value="Ещё животные" />
        }

то есть на кнопку "Ещё животные", то подгружается всегда со старого индекса, то есть ViewBag.Quantity не инкрементируется. Как сделать так, чтобы по нажатии на кнопке у меня подгружались новые данные?

Вернуться к обсуждению:
Подгрузить дополнительные данные при нажатии на кнопку C# ASP.NET Core

Следующий ответ