Paginate a large list of objects in ASP.NET Razor view

I have a view in my project that allows the user to enter data for multiple records at once. The controller passes a list of objects to the view and I have jquery-steps.js library to paginate it. However, that library is dead and not being developed on. It's also very slow at rendering the view. Here is what the view looks like now.

Each page is a new model that's passed to the controller. It is submitted as a list that is iterated over.

The model for the view

public class AddDrinkingWaterModel 
    {
        public AlertModel Alert { get; set; }
        public int SID { get; set; }
        public int? LocationId { get; set; }
        public int? Replicate { get; set; }
        public bool TransferPumpRunning { get; set; }
        public DateTime? CollectionDate { get; set; }
        public TimeSpan? CollectionTime { get; set; }
        public string Collectors { get; set; }
        public string Chlorinated { get; set; }
    //other properties
    }

The controller GET method to populate the view(simplified):

public async Task<ActionResult> AddMultiDrinkingWaterLog(AlertModel alert)
        {
            var sampleList = (from s in await Context.SampleLog
                              where s.FPProgram.Program == ("Drinking Water") 
                              && !s.FPDrinkingWater.Any(m => (m.SID == s.SID))
                              select s.SID).ToList();

            var locations = from a in await Context.FPDrinkingWaterLocations
                            orderby a.Location
                            select new SelectListItem
                            {
                                Text = a.Location,
                                Value = a.Id.ToString()
                            };

            var modelCollection = sampleList.Select(s => new AddDrinkingWaterModel
            {
                Data = new List<int> { s },
                Locations = new SelectList(locations, "Value", "Text")
            }).ToList();               

            return PartialView("_AddDrinkingWaterModal", modelCollection);
        }

And the view

@model List<MyApplication.Areas.FP.Models.AddDrinkingWaterModel>

@{
    Layout = null;
}
<div class="modal-body">
     @using (Ajax.BeginForm(actionName: action, routeValues: null, htmlAttributes: new { id = "steps-form", @class = "form-horizontal" }, ajaxOptions: new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "DrinkingWatersContent",
        OnSuccess = "closeModal",
        LoadingElementId = ajax
    }))
    {
        if (Model.Count() > 0)
       {
        @Html.AntiForgeryToken()
           for (int i = 0; i < Model.Count; i++)
           {
            <h3>@Html.DisplayFor(m => m[i].Data) </h3>
            <div style="display: none;">@Html.EditorFor(m => m[i].Data)</div>

            <section>
            <div class="form-group">
                    @Html.LabelFor(m => m[i].LocationId, "Location", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                   @Html.DropDownListFor(m => m[i].LocationId, new SelectList(Model[i].Locations, "Value", "Text"), "Select location", new { @class = "form-control select-chosen" })
                    </div>
                </div>
    //other properties left out for brevity
    }
 }
</div>
 <script>
    $('#steps-form').steps({
        headerTag: "h3",
        bodyTag: "section",
        enableAllSteps: true,
        showFinishButtonAlways: true,
        enableKeyNavigation: true,
        enableCancelButton: true,
        stepsOrientation: "vertical",
        transitionEffect: "slide",
        titleTemplate: '#title#',
        labels: {
            finish: "Submit"
        },
        onCanceled: function (event) {
            var modal = $(this).closest('.modal');
            modal.modal('hide');
            clearModal(modal);
        },
        onFinished: () => $("form#steps-form").submit()
    });
</script>   

In the _Layout.cshtml file I have the references to the jquery-steps css and js files.

What would be a more efficient alternative to the jquery-steps library that would accomplish how I want to design this view? Is there maybe another design pattern that's simpler and more efficient that I'm overlooking maybe? Or is it something simple as creating an html helper in javascript that handles it all?