Tag Archives: Paging

Paging

[RESOLVED]fast paging for large numbers of data

which is the easy way to create fast paging for large amount of data more than 10 thousand

tried out ajax paging but taking too much time

nuget paged list fetch all the data which makes the site slow

now how to do the paging please suggest

plus it has a search form i want a paging which maintain search result for it

Hi,

For large amount of data, we need to make paging at the server side. You may see

http://www.asp.net/mvc/tutorials/getting-started-with-ef-5-using-mvc-4/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application.

It may help.

Have fun

How many records do you show in 1 page? You need to get only that many records from the DB. Refer below link for DB paging 

http://social.technet.microsoft.com/wiki/contents/articles/23811.paging-a-query-with-sql-server.aspx 

How many records retrieving from db

If you are getting all 10000 from db and handling front-end the here is my idea.

1. Define a store proc in the back to return only the specific page records and count variable

   search proc should have pagesize, pageindex, sort,sortdir, totalcount out and other search parameters

2. So you get only the particular page records from procedure with total_record_count as out

3. Map the page records (returned by store proc) to a model list

4. Send model list to web grid

5. Design asp.net mvc web grid with this result model list and use webgrid.bind method where you can total_record_count) to let the webgrid to render paging

Try DataTables JQuery control. This is free and has a option to fetch page by page using ajax. I used it earlier and worked well. Please see this blog for more information

jQuery
DataTables and ASP.NET
MVC
Integration – Part I

[RESOLVED]Problem in understanding an example on the pro Asp.net MVC 5 book

I am reading a book named Pro Asp.net MVC 5 , which is great , but I found the following code, which will show a lsit of products based on the selected category, and calculate the total number of items, as follow:-

public ViewResult List(string category, int page = 1) {
ProductsListViewModel viewModel = new ProductsListViewModel {
Products = repository.Products
.Where(p => category == null || p.Category == category)
.OrderBy(p => p.ProductID)
.Skip((page - 1) * PageSize)
.Take(PageSize),
PagingInfo = new PagingInfo {
CurrentPage = page,
ItemsPerPage = PageSize,
TotalItems = category == null ?
repository.Products.Count() :
repository.Products.Where(e => e.Category ==
category).Count()

But I got confused on why we need to do the following:-

TotalItems = category == null ? repository.Products.Count() : repository.Products.Where(e => e.Category == category).Count()

 and not just saying 

TotalItems = Products.count();

Because we already retrieve the Products based on the category, and there is no need to re-retrivng them to calculate their total !! Can anyone advice

The "Products" property of the ProductsListViewModel has all products where the category matches the category passed into the action if one is, but all products if it isn’t.  The line in question does the same thing.

x = a ? b : c

this means that if "a" is true then x will be "b" otherwise it will be "c".

So TotalItems will be just the number of products in the repository if no category has been passed in, but the number of products where the product has that category if a category has been passed in.

[RESOLVED]multiple search option with cascading dropdown and MVC.Paging

how can i use multiple search options to get number of paged records

multiple search option like country ,state ,city ,gender, and etc…

here i created a controller browseallmemmbers where search criteria is working 

private const int defaultPageSize = 10;
       
        private IList<Profile> getAllmembers = new List<Profile>();
        public ActionResult BrouseAllMem(int? page, long? stateid, long? countryid,long? cityid)
        {

            int currentPageIndex = page.HasValue ? page.Value : 1;

            ViewData["countryid"] = countryid;
            ViewData["Stateid"] = stateid ;
            ViewData["cityid"] = cityid ;
           
            IList<Profile> members = this.getAllmembers;

           
            IQueryable<Profile> mm = db.Profiles.OrderByDescending(c => c.pid);
            if (countryid > 0)
            {
                
                mm = mm.Where(p => p.countryid == countryid);
            }
            if (stateid > 0)
            {
                mm = mm.Where(p => p.stateid == stateid);
            }
            if (cityid > 0)
            {
                mm = mm.Where(p => p.cityid  == cityid);
            }

           
            members = mm.OrderByDescending(p => p.pid).ToPagedList(currentPageIndex, defaultPageSize);
 
            ViewBag.cityid = new SelectList(db.citytables, "cityid", "cityname", ViewData["cityid"]);
            ViewBag.countryid = new SelectList(db.Countries, "COUNTRYID", "countryname", ViewData["countryid"]);
            ViewBag.stateid = new SelectList(db.states, "stateid", "statename", ViewData["stateid"]);
                      
            return View(members);
        }

View where result is displaying

@*@model IEnumerable<LovNMarProj.Models.Profile>*@
@using MvcPaging
@model IPagedList<LovNMarProj.Models.Profile>
@{
    ViewBag.Title = "BrouseAllMem";
    Layout = "~/Views/Shared/_LayoutTEM.cshtml";
}
@using (Html.BeginForm("BrouseAllMem", "Home", FormMethod.Get))
{
<div class="page-header">
    <div class="panel panel-default">
        <div class="panel-heading">All Members</div>
        <div class="panel-body">
            <div class="col-sm-3 col-md-3 pull-left">
                <div class="input-group input-group-sm">
                    @*<input class="form-control" id="appendedInputButton" type="text" name="member_name" placeholder="Name" value="@ViewData["member_name"]" />*@
                   
                </div>
            </div>
            @Html.DropDownList("countryid", ViewBag.countryid as SelectList, "Select a Country", @ViewData["countryid"])

            @Html.DropDownList("stateid",null ,string.Empty , @ViewData["stateid"])

            @Html.DropDownList("cityid",null ,string.Empty , @ViewData["cityid"])

            <div class="col-sm-3 col-md-3 pull-right" >
                <button class="btn" type="submit">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </div>
        </div>
        <ul class="list-group">
            
            @foreach (var item in Model)
            {
                var gender = "Female"; if (@item.gender == "M") { gender = "Male"; } 
                var pimage = "no_avatar.gif"; 
                if (@item.photo != null && @item.photo  != "") { pimage = @item.photo ; }
                
                
                
                <li class="list-group-item ">
                    <div class="row">
                        <div class="col-sm-9">
                            <p> <strong>@item.headline</strong></p>
                        </div>
                        <div class="col-lg-3 text-muted text-right small">
                            Joined On: @item.profiledate
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-1">

                            <img src="~/profilepic/@pimage" class="img-thumbnail" />
                        </div>
                        <div class="col-sm-3">
                            <h5>
                                @item.fname
                                &nbsp;
                                @item.lname<small>(@gender)</small>
                            </h5>
                            <p>
                                @item.Country.countryname  -
                                @item.state.statename -
                                @item.citytable.cityname 
                            </p>
                        </div>
                        <div class="col-sm-5">
                            About:<p> @item.whoami</p>
                        </div>
                        <div class="col-sm-3">
                           Looking For:<p> @item.lookingfor</p>
                        </div>
                    </div>








                </li>
            }

        </ul>
        <div class="panel-footer">
            <div class="pager">
                @Html.Raw(Html.Pager(
            new Options
            {
                PageSize = Model.PageSize,
                TotalItemCount = Model.TotalItemCount,
                CurrentPage = Model.PageNumber,
                ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous" },
                ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
                TooltipTitles = new TooltipTitles() { Next = "Next page {0}", Previous = "Previous page {0}", Page = "Go to page {0}" },
                Size = Size.normal,
                Alignment = Alignment.centered,
                IsShowControls = true,
                IsShowFirstLast = true,
                IsShowPages = true
            }, new { countryid = ViewData["countryid"], stateid = ViewData["stateid"], cityid = ViewData["cityid"] }))
            </div>

        </div>
    </div>
</div>
}
<script type="text/jscript">
    $(function () {

        $('#countryid').ready(function () {


            //$('#stateid').empty();
            //$('#cityid').empty();

            $.getJSON('/Kas/StateList/' + $('#countryid').val(), function (data) {
                var items = "";
                $.each(data, function (i, stateid) {
                    items += "<option value='" + stateid.Value + "'>" + stateid.Text + "</option>";
                });

                $('#stateid').html(items);
                $('#stateid').trigger("change");

            });
        });



        $('#countryid').change(function () {

            $.getJSON('/Kas/StateList/' + $('#countryid').val(), function (data) {
                var items = '';
                $.each(data, function (i, stateid) {
                    items += "<option value='" + stateid.Value + "'>" + stateid.Text + "</option>";
                });
                $('#stateid').html(items);

            });
        });

        $('#stateid').change(function () {
            $.getJSON('/Kas/Citylist/' + $('#stateid').val(), function (data) {
                var items = '';
                $.each(data, function (i, cityid) {
                    items += "<option value='" + cityid.Value + "'>" + cityid.Text + "</option>";
                });
                $('#cityid').html(items);



            });
        });





    });

</script>

it shows the result properly but if i go to next page search criteria is gone

how to keep search result and paging both

 with one search option its works but with multiple search its not working

Hi pjpatil,

Base on your code, I found that you are using ViewData and ViewBag with same key, which are conflict, in other words, the
ViewData data will be override.

Please use the different key to store current search conditions.

To keep the conditions, you just need to store them as parameters in the URL (Html.PagedListPager), and in the action has the corresponding parameters to get that data.

Best Regards

Starain Chen

[RESOLVED]museum collection website

Hi,

I am looking to create a website that holds an online collection of artefacts that users can browse through or search. I’ve decided on asp.net mvc simply because I am from a C# background.

I am looking to achieve something like the following:

http://www.metmuseum.org/collection/the-collection-online

http://www.nam.ac.uk/online-collection/

http://www.asia.si.edu/collections/search.cfm

Does anyone know any online tutorials (or books) that will help me. I guess I am looking mostly for help with the search/browse functionality and the database schema.

Thanks!

_user

I guess I am looking mostly for help with the search/browse functionality and the database schema.

Depends on what you have as a domain for your application.

The search is your main design question. Microsoft no longer has a search solutions other than sharepoint. You first question will be what taxonomy info do you have for the collection. Does it have attributes or is just text?

Do you need fuzzy search? You will need to decide how to get the alias for keywords.

If you just have text then look at the Google search appliance, if you have a database of attributes than a database solution may be correct.

Thanks for your reply.

Yes, the search is one of the big questions. The other is how to structure the database.

Regarding the search – the collection can have attributes – it has not been created yet (that will be part of the site) so I can either do full text search or search via attributes. Fuzzy logic will be required.

I suppose what I really need at this point is a tutorial that goes through creating a CRUD site in asp.net mvc with some search functionality.

_user

I suppose what I really need at this point is a tutorial that goes through creating a CRUD site in asp.net mvc with some search functionality.

http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

That’s a great tutorial. Thanks!

[RESOLVED]Master Detail Inline Editing

User is presented with an index of orders in the system.

User will click into an Order to edit.

The Edit page will be presented with Order detail at the top in edit mode.

The bottom will have a grid (currently using Telerik Kendo), with all the orderline items.

I will need to allow the user to perform inline-editing. which includes Dropdown boxes, and a checkbox which allow SELECT ALL to update in bulk.

eg. Select All orderlines to set status to COMPLETED.

How is this achieved in MVC, along with ViewModel patterns.

alphabeatsco

The bottom will have a grid (currently using Telerik Kendo), with all the orderline items.

I will need to allow the user to perform inline-editing. which includes Dropdown boxes, and a checkbox which allow SELECT ALL to update in bulk.

Kendo have this example for inline editing.

http://demos.telerik.com/kendo-ui/grid/editing-inline

And , if you search, you will find one with dropdown too in the documentation

Hi alphabeatsco,

Thanks for your post.

You can refer to ignatandrei’s reply, and you can try to use webgrid to implement it.Please refer to the following tutorial:

#Web Grid with Razor Engine,Paging and Customized Edit and Delete facility

http://jainbipin.blogspot.com/2011/04/aspnet-mvc-3-razor-engine-web-grid.html

Hope this can be helpful.

Best Regards,

Eileen

Is WebGrid out of the box component from Visual Studio?

alphabeatsco

Is WebGrid out of the box component from Visual Studio?

No

[RESOLVED]How to set Pagination number as 1, 2, 3 …. from my controller ?

Hi

i try to make Pagination to get pages as 1, 2, 3, …. as Bootstarp:

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  ...
</ul>

but here i don’t know how to pass pages numbers to ( from 1 to end of pages depending on data found ? )

i can do it on;y with Next and Prv button as:

<ul class="pager">
    <li class="previous"><a href="/VisitDatas/Index?Page=@ViewBag.Prv">&larr; Prv</a></li>
    <li class="next"><a href="/VisitDatas/Index?Page=@ViewBag.Nex">Next &rarr;</a></li>
</ul>

and it work fine but i need to make it with Page Number Like (1, 2, 3, …)

C# Code:

        public ActionResult Index(int Page = 0)
        {
            ViewBag.Doctor_ID = new SelectList(db.Doctors, "Doctor_ID", "Doctor_Name");

            var visitDatas = db.VisitDatas.Include(v => v.ClinicCodes).Include(v => v.Doctors).Include(v => v.Kashfs);
            var model = visitDatas.Where(IsDone => IsDone.IsDone == false).ToList().Take(100).OrderByDescending(Visit_Date => Visit_Date.Visit_Date).ThenBy(VisitTime => VisitTime.VisitTime).Skip(25 * Page).Take(25);

            ViewBag.Prv = (Page - 1) < 0 ? 0 : Page - 1;
            ViewBag.Nex = Page + 1;
            return View(model);
        }

so i hope that any one can help me and tell me how can i do it with page number ?

Hi,

For that format, you could base on the current page number to format the pagination number. You may use some plugin to achieve that.

I suggest that you could refer to this link below achieve paging:

# Sorting, Filtering, and Paging with the Entity Framework in an ASP.NET MVC Application

http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

Best Regards

Starain

[RESOLVED]load more button on an MVC project

I have displayed the data from a database using MVC 5 in a table form.what I want to add is a button that says show more where I can set the number of records to be shown in each page load.can someone please guide me how to do that?

lolo512

hat I want to add is a button that says show more

<button

lolo512

can set the number of records to be shown in each page load.

<input 

Put into the user session and display into the view. When lost focus( blur in javascript) send Ajax and put again into User Session

lolo512

I have displayed the data from a database using MVC 5 in a table form

How are you loading this and how many records are you showing initially.

lolo512

.what I want to add is a button that says show more where I can set the number of records to be shown in each page load

As
ignatandrei
 suggested you can put a textbox and button. User inputs the records to be shown in the textbox and clicks on the button. You can follow your initially logic to reload the page with the number of records in the table

It looks like you are trying to implement infinite page scrolling. See the following article :

Infinte Scroll paging in asp.net mvc

I used custom search in jqgrid whenever i search a text by scrolling end of page,the data is not displayed in jqgrid

I scroll to the end of page using custom scrollbar then when i search for text data is not displayed its because of custom scrollbar if i remove the code then it works fine but i don’t know whats the problem

on grid completion event i added a code of jscrollpane as shown

  var table_header = $(‘#container’).find(‘.ui-jqgrid-hbox’).css("position", "relative");
                    $(‘#container’).find(‘.ui-jqgrid-bdiv’).bind(‘jsp-scroll-x’, function (event, scrollPositionX, isAtLeft, isAtRight) {
                        table_header.css(‘right’, scrollPositionX);
                    }).jScrollPane({
                        showArrows: true,
                        horizontalDragMaxWidth: 30,
                        verticalDragMaxHeight: 30,
                        autoReinitialise: true
                    });

If i scroll to quarter of page and  search for text assume in controller i have sent json 8 rows of data to display in jqgrid  it shows some 7 rows,again if i scroll downwards and search it reduces by 1 at end of page when i scroll it becomes empty
Cry.

But in controller code no problem in searching for text its the problem with jscrollpane,because if i remove the code in grid complete it shows the rows properly with default scrollbar

Example :I scrolled down my mouse wheel so 1 row went top of header then when i search for text it matches 8 rows need to display 8 rows but it is dispalying 8-1row went top i.e 7 rows it displays,same if i again scroll down so 2row went top of header then
when i search it displays 6 rows as same it applies for number of rows it doesnt dispaly finally when 8 rows went top it doesn’t display anything,how shall i solve this

$(document).ready(function () {
$("div").scroll(function () {
if ($(this)[0].scrollHeight – $(this).scrollTop() == $(this).outerHeight()) {
//Clear_Grid();
//Bind Jquery grid with Paging
}
});
});

Available web grids for my new asp.net mvc 5 web application which allow; paging, column level filter & sort, export to excel, multiple delete.

I want to start a new Asp.net mvc5 web application. On my previous projects I use to implement the following manually:-

-        Column level sort

-        Column level filter.

-        Export to excel.

While I use the PagedList.Mvc for doing the paging.

Now I am looking for a package that can do the following , with minimal code:-

  1. Paging (using ajax)
  2. Column level sorting(ajax).
  3. Column level filter (ajax).
  4. Basic search using certain column.
  5. Export to excel for selected rows.
  6. Multiple delete, based on user selection.

And I am going to use this in almost all my index views.

so can anyone advice on some tools and packages that have the above 6 main features?.

Thanks a lot for any help.

 

johnjohn123123

so can anyone advice on some tools and packages that have the above 6 main features?.

Kendo. Not free though

ignatandrei

johnjohn123123

so can anyone advice on some tools and packages that have the above 6 main features?.

Kendo. Not free though

is there free layouts that offer similar functionalists ?

almost all the javascript grids do this and work with MVC. google for a list. most common on this forum are: slickgrid, jqgrid, datatables and flexigrid. I have used jqGrid and slickgrid, but prefer slickgrid. 

bruce (sqlwork.com)

jqGrid

I read about jqGrid, but seems that it  does not provide Export To Excel capabilities and it does not provide column level filtering … can you advice if there is a way to have these features inside jqGrid?

bruce (sqlwork.com)

almost all the javascript grids do this and work with MVC. google for a list. most common on this forum are: slickgrid, jqgrid, datatables and flexigrid. I have used jqGrid and slickgrid, but prefer slickgrid. 

thanks for the reply, but which grid is better for asp.net mvc web applications; jqGrid or slickgrid,?

second question i have read an article on the web that using grids inside asp.net mvc web applications will not support data annotations such as [Datetype.Date] & [Required], and will make maintaining my views very hard, comparing to not using any grid ?

can you advice on the above please?

My advice is to use datatables www.datatables.net  .. This supports both client side paging, sorting, filtering and also server side. If your record count will be <= 10000, then go for client side else server side
(Using ajax). I think this tool is free, but not sure pls visit their site for details. Its a fantastic one with minimal code. its works upon your plain html table. its not a grid. it has wonderful look and feel (by using jQuery UI theme), very fast  and many
more features. Just visit their site and reply me your experience with datatable . I hope all your needs can be achieved using datatable. 

so you mean by client side paging is that the grid will load all the records from the database , then do the paging on the client, while server side paging will only retrive the required number of items as defined in the page size ? is this what you mean
?

second question do the other tools for example jqgrid support only one type of paging not client & server paging ?

bruce (sqlwork.com)

almost all the javascript grids do this and work with MVC. google for a list. most common on this forum are: slickgrid, jqgrid, datatables and flexigrid. I have used jqGrid and slickgrid, but prefer slickgrid. 

i read some articles about jqGrid, but i have the following concerns if anyone can advice :-

1. when building the grid i will be writing something such as :-

<script type="text/javascript">
    jQuery("#jQGridDemo").jqGrid({
        url: '',
        datatype: "json",
        colNames: ['Id','First Name', 'Last Name', 'Last 4 SSN', 'Department', 
                'Age', 'Salary',  "Address",'Marital Status'],
        colModel: [
        { name: '_id', index: '_id', width: 20, stype: 'text' },
        { name: 'FirstName', index: 'FirstName', width: 150 },
        { name: 'LastName', index: 'LastName', width: 150 },
           { name: 'LastSSN', index: 'LastSSN', width: 100 },
        { name: 'Department', index: 'Department', width: 80, align: "right" },
        { name: 'Age', index: 'Salary', width: 80, align: "right" },
        { name: 'Salary', index: 'Salary', width: 80, align: "right" },
        { name: 'Address', index: 'Address', width: 150, sortable: false },
        { name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
      ],
        rowNum: 10,
        sortname: 'id',
        viewrecords: true,
        sortorder: "desc",
        caption: "List Employee Details"
    });
</script> 

so in this case i will be manually writing the column names such as FirstName, LastName , etc . while using normal razor view i simply write Html.DisplayFor(modelitem=>modelitem.FirstName) and i can benefit from the strongly typed view, to reference the
field names. and the field name and value will be based on what has been defined inside the data annotation such as [DisplayName("First Name")] . so does this mean if i use jqGrid i will lose the effect of any data annotations such as DisplayName ?.

2. also all the examples which i read about jqGrid pass json to the Grid. so does jqGrid accept Model objects or it only work with json ?

3. also when creating new record using the dialog provided by the jqGrid, seems that the Data annotation such as [Required], [Length] will not have any effect , is this correct ? , because i will not be rendering normal views rather i will be entering fields
inside dialog boxes , which will not benefit from any data annotations used for validation (client and server side validations)?

[RESOLVED]bind data to a view in aspx page in asp.net mvc using C# and sql server stored prodcedure

Hi Experts,

I am totally new to ASP.NET MVC.

So Please try to help me out here?

I Created a ASP.NET MVC 4 Application with ASPX view.

I have a database and have a stored procedure in it named usp_getstudents which retrieve all the student information like Studentid, studentname , studentage and studentemail.

I want to display these details in  a view.

So how to do achieve this using Model, control and View.

How the design should be?

Can any one help me here with sample code snippets.

I am using ASP.NET MVC,C# and ASPX views and SQL Server Stored Procedure

Thanks a lot in advance.

 

 

Hi,

As you are using ASPX view, you can probably use GridView kind of controls as explained in this article:

http://www.binaryintellect.net/articles/59b91531-3fb2-4504-84a4-9f52e2d65c20.aspx

Note: Source code can also be downloaded at the end of the page.

Thanks for your valuable reply. But Sorry as this was not the concern i asked. It was just to display some text from database in html in MVC.

Hi,

In fact the example has asp:GridView control which is a bit advanced control.

You can even place asp:Label controls in the page and you can fill in Page_Load event (If you see in the example, gridView is being populated with it’s DataSource in Page_Load event).

In your case, you would want to just set the Text properties to the appropriate values from DB.

With in page_load you can invoke your DB layer to get the required objects and fill in the UI controls (setting Text properties for example) with the returned object from Data access layer.

The close sample I could find is of MVC2 (as most of the samples are on razor) but this article is a good starter to understand how MVC works (especially for aspx engine) across layers in single article:
http://weblogs.asp.net/scottgu/asp-net-mvc-framework-part-1

There are quite a few things changed though later, for example, ControllerAction attribute is not required now, RenderView method is replaced with View() method etc.

If you would like to see the current syntax for aspx engine, you can try Scaffolding feature and generate the code and look at the generated code for View and you can get an idea of the syntax and samples more.

Also note, in the example, Entity Framework is used, but you can write ADO.NET code or use any other convenient data access frameworks to accomplish the task according to your requirement.

Hi vickeynet,

For this requirement, you could use WebGird.

# WebGrid with custom paging and sorting in MVC4

http://www.dotnet-tricks.com/Tutorial/mvc/GK2W110113-WebGrid-with-custom-paging-and-sorting-in-MVC4.html

Best Regards

Starain

Hello Vickey,

There are plenty of ways to achieve this requirement , a common implementation is shown below:try to understand:

1) Create a model that will help communicate values between view and the controller.

public class Student
{
    public string StudentID {get;set;}
    public string StudentName {get;set;}    
    ....
}

2) Get the values from database in a specific controller:

public ActionResult Students()
{
    String connectionString = "<THE CONNECTION STRING HERE>";
    String sql = "SELECT * FROM students";
    SqlCommand cmd = new SqlCommand(sql, conn);

    using(SqlConnection conn = new SqlConnection(connectionString))
    {
        conn.Open();
        SqlDataReader rdr = cmd.ExecuteReader();
        var model = new List<Student>();
        while(rdr.Read())
        {
            var student = new Student();
            student.StudentID= rdr["StudentID"];
            student.StudentName= rdr["StudentName"];           
            ....
            model.Add(student);
        }
    }
    return View(model);
}

3) Lastly take the records and display it in respective view:

@model List<Student>

<h1>Student</h1>

<table>
    <tr>
        <th>StudentID</th>
        <th>StudentName</th>
        ...
    </tr>
    @foreach(var student in Model)
    {
    <tr>
        <td>@student.StudentID</td>  
        <td>@student.StudentName</td>  
        ...
    </tr>
    }
</table>

Hope This Helps.

Feel free to ask any question regarding the same.

Have a great day. :)