Asp.net MVC with Ajax button to retrieve data from database

问题: I have an Ajax button that whenever I click it, it shows a single record from the database (in my Controller I used .Take(1) ) Here is my view : <script src="~/Scr...

问题:

I have an Ajax button that whenever I click it, it shows a single record from the database (in my Controller I used .Take(1) )
Here is my view :

   <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>

Here is my controller for the button :

    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);
    }

What I would like to do here is - whenever I click the next button it will display the first record from the database, then when I click it again it will show the second record and so on..
(as of now it only show the first data from database)

I wonder if that is even possible and what kind of stuff should I use to do that?


回答1:

You're going to want to track the current index client-side (JavaScript) or in the Model (Razor), then pass that into your controller method, incrementing the value with each call. From the server side you would do something like:

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

I'd recommend sending back a ViewModel. For the Razor implementation you could have a ViewModel that contains the displayed values, the Queue ID, and the index. I.e.

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);
}

Then in the view would be something like below: (Sorry, my Razor is pretty rusty)

    @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"})

This would need some verification for behaviour to ensure that the first call goes through with an index value of "0", but should hopefully give you some ideas to pursue.

  • 发表于 2019-03-21 04:02
  • 阅读 ( 177 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除