Asp.net MVC с кнопкой Ajax для извлечения данных из базы данных - PullRequest
Новая
       19

Asp.net MVC с кнопкой Ajax для извлечения данных из базы данных

1 голос
/ 20 марта 2019

У меня есть кнопка Ajax, которая всякий раз, когда я нажимаю на нее, показывает одну запись из базы данных (в моем контроллере я использовал .Take (1))
Вот мой взгляд: 

   <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script type="text/javascript" language="javascript">
        function ClearResults() {
            $("#current").empty();
        }
    </script>
    <div class="row">
        <div class="column">
            <h2 class="header-text">CURRENT</h2>
            <div class="current" id="current">
               X000
            </div>
        </div>
    </div>

<div class="row">
    @Ajax.ActionLink(" ", "BtnNext", null, new AjaxOptions
                                {
                                HttpMethod = "GET",
                                InsertionMode = InsertionMode.Replace,
                                UpdateTargetId = "current",
                                LoadingElementId = "loading",
                                OnBegin = "ClearResults",
                                }, new { @class = "Middle-next dim btn btn-large-dim", @id = "Link1"})
</div>

Вот мой контроллер для кнопки: 

    public PartialViewResult BtnNext(int count = 0)
    {
        System.Threading.Thread.Sleep(1000);
        var model = db.Queues.OrderBy(x => x.QueueNumber).Take(1);
        return PartialView("_queuenumber", model);
    }

Что я хотел бы сделать здесь - всякий раз, когда я нажимаю следующую кнопку, она отображает первую запись из базы данных, затем, когда я нажимаю ее снова, онапокажет вторую запись и т. д.
(на данный момент она показывает только первые данные из базы данных)

Интересно, возможно ли это вообще, и какие вещи я должен использовать для этого?

1 Ответ

1 голос
/ 20 марта 2019

Вы захотите отследить текущий индекс на стороне клиента (JavaScript) или в модели (Razor), а затем передать его в метод контроллера, увеличивая значение при каждом вызове. Со стороны сервера вы бы сделали что-то вроде: 

var model = db.Queues.OrderBy(x => x.QueueNumber).Skip(index).Take(1);

Я бы рекомендовал отправить обратно ViewModel. Для реализации Razor у вас может быть ViewModel, который содержит отображаемые значения, идентификатор очереди и индекс. * Т.е. 1004 * 

public class QueueViewModel
{
    public int QueueId { get; set; }
    public int QueueNumber { get; set; }
    public string Name { get; set; } 
    // ..
    public int NextIndex { get; set; }
}

public PartialViewResult BtnNext(int index = 0)
{
    var model = db.Queues.OrderBy(x => x.QueueNumber)
        .Select(x => new QueueViewModel
        {
            QueueId = x.QueueId,
            QueueNumber = x.QueueNumber,
            Name = x.Name,
            NextIndex = index + 1
        })
        .Skip(index).Take(1);
    return PartialView("_queuenumber", model);
}

Тогда в представлении будет что-то вроде ниже: (Извините, моя бритва довольно ржавая) 

    @Ajax.ActionLink(" ", "BtnNext", "QueueController", 
        new { index = Model.nextIndex },
        new AjaxOptions
        {
            HttpMethod = "GET",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "current",
            LoadingElementId = "loading",
            OnBegin = "ClearResults",
        }, new { @class = "Middle-next dim btn btn-large-dim", @id = "Link1"})

Это потребует некоторой проверки поведения, чтобы убедиться, что первый вызов прошел со значением индекса "0", но, надеюсь, даст вам некоторые идеи для продолжения.

...