Asp.net MVC & AJAX

Question

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

    public PartialViewResult BtnNext()
    {
        List<Queue> model = db.Queues.OrderBy(x => x.QueueNumber).Take(1).ToList();
        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..

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

You can store last data record id in variable for short time and replace it with next button click event. So you will get last data record id as well as next data record id also. You can use cache for that also. — Hardik Dhankecha, Mar 19 '19 at 04:40

Davide Vitali · Answer 1 · 2019-03-19T17:25:49.577

A good practice when you realize your Views need to handle and manipulate your data, is to create a ViewModel class that wraps all the objects that you need to send to that view. In your case, you can start with a simple

public class QueueViewModel
{
    public Queue Queue { get; set ; }
    public int CurrentRecord { get; set ; }
}

Now, all you have to do is changing the action method the controller so that you initialize and pass the ViewModel to the View. It will also be better to have an optional argument acting as the default record, and then using the linq instruction Skip to go to and take a specific record:

Public PartialViewResult NextRecord(int current = 0)
{
    QueueViewModel model = new QueueViewModel();
    model.CurrentRecord = current;
    model.Queue = db.OrderBy(x => yourClause).Skip(current).Take(1);
    return PartialView(“yourview”, model);
}

I changed the List<Queue> within your model as I think you don’t need a list if you’re only showing one record at a time, but you can easily go back to the generics if you feel you really need to.

As for the view part where you handle the index on the model, there are many ways to achieve the same result. What I personally like to do is using the model to fill a data attribute of a DOM element and use that in the Ajax call. Since you now have

@model yourModelNamespace.QueueViewModel

it is possible for you to set an element (let’s say a button) to host the current value:

<button data-current-record=“@Model.CurrentRecord”>...</button>

You can now very easily retrieve that value within your Ajax call to the action method:

var currentRecord = parseInt($(‘button’).data()[currentRecord]);
$.ajax({
    url: yourPathToTheAction,
    type: ‘GET’,
    data: {
        current: currentRecord + 1
    }
});

This way you can go further and add other functions calling the same controller to move to previous record or jump to the last or the first and so on...

model.CurrentRecord = current; this is not in the current context — Carlo Toribio, Mar 20 '19 at 01:01
@CarloToribio at what point? Have you changed your model? Have you changed the action method? Have you changed the reference in the view? Looks like there’s still something you’re missing — Davide Vitali, Mar 20 '19 at 06:43
where should I put var currentRecord = parseInt($(‘button’).data()[currentRecord]); $.ajax({ url: yourPathToTheAction, type: ‘GET’, data: { current: currentRecord + 1 } }); — Carlo Toribio, Mar 20 '19 at 07:13
What do you mean "where do I put it"? Who wrote the code for your application?? You have to substitute your current ajax call and action method with those suggested. You can see my email on my [GitHub profile](https://github.com/DavideVitali), but I don't see how it can be helpful — Davide Vitali, Mar 20 '19 at 07:35

score 2 · Answer 2 · answered Mar 19 '19 at 05:43

2

Yes. Its possible. Just set Application["counter"] = 0 in Application_Start function then make value increments by 1 in result view and use it to get next record.

    public PartialViewResult BtnNext()
    {
        List<Queue> model = db.Queues.OrderBy(x => x.QueueNumber).Skip(Application["counter"]).Take(1).ToList();
        Application["counter"] = Application["counter"] + 1;
        return PartialView("_queuenumber", model);
    }

answered Mar 19 '19 at 05:43

murtaza sanjeliwala

205
1
2
12

how can i set the Application["counter"] = 0? – Carlo Toribio Mar 19 '19 at 05:50
inside Global.asax file in Application_Start function. – murtaza sanjeliwala Mar 19 '19 at 08:13
public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); Application["counter"] = 0; } } there? – Carlo Toribio Mar 19 '19 at 08:28
please tell me it wont reference – Carlo Toribio Mar 20 '19 at 02:54

score 2 · Answer 3 · answered Mar 19 '19 at 09:11

Reference Use FormCollection try following code.

public PartialViewResult BtnNext(FormCollection Form)
{
    Int32? Count = Convert.ToInt32(Form["Count"]??0);
    List<Queue> model = db.Queues.OrderBy(x => x.QueueNumber).ToList();
    model.ElementAt(count); //   [NotMapped]  public Int32? count { get; set; } add in model class
    model.count=count+1;
    return PartialView("_queuenumber", model);
}

on view

<input type="submit" class="btn btn-primary" value="Save" id="BtnNext">
<input type="hidden" id="Count" name="Count" value="@Model.Count" />

This will result in a POST request, which is not best for this kind of actions — Davide Vitali, Mar 19 '19 at 17:24

Asp.net MVC & AJAX

3 Answers3