locked
performance in rendering a view RRS feed

  • Question

  • User-309523270 posted

    Hi,

    I have a search screen, wherein upon searching, displays 30 records.  It takes a while for the screen to come up in the view page(14 seconds). 

    Thanks for your input!

    tinac99

    Index.cshtml

    @model ToolsOracle.Data.ViewModel.ToolSearchInventoryScreen

    <table id="InvTable" width="100%">
    <thead>
    <tr>
    <th>ToolRoom</th>
    <th>Bin</th>
    <th>Material Code</th>
    <th>Property Id</th>
    <th>Material Description</th>
    <th>Quantity Inventory</th>
    <th>Unit Price</th>
    </tr>
    </thead>
    <tbody>
    @if ((Model != null) && (Model.result != null))
    {
       @foreach (var item in Model.result)
      
    {
                  <tr>
          
    <td> @item.ToolRoom.ToolRoomNumber </td>
           
    <td> @item.Bin</td>
          
    <td> @item.MaterialCode </td>
          
    <td> @item.PropertyId </td>
          
    <td> @item.MaterialCodeNavigation.MaterialDescription </td>
          
    <td align="right">@String.Format("{0:#,###0}", item.Quantity)</td>
          
    <td align="right">@String.Format("{0:C}", item.MaterialCodeNavigation.Price)</td>
          
    </tr>

        }
    }

    </tbody>
    </table>

    @section Scripts {

         <script>
         $(document).ready(function() {
                   $("#InvTable").DataTable({
                         "iDisplayLength": @AppConstants.DATATABLE_PAGE_SIZE
                                               });
                                     });
    </script>
    }

    Models

    namespace ToolsOracle.Data.ViewModel
    {
         public class ToolSearchInventoryScreen
      
    {
          public ToolSearchInventoryCriteria criteria { get; set; }    
          public IEnumerable<Inventory> result { get; set; }
      
    }

      public class ToolSearchInventoryCriteria 
       {
            [DisplayName("Tool Room")]
        
    public int? ToolRoomId { get; set; }

         [DisplayName("Material Code")] 
        public string MaterialCode { get; set; }

         [DisplayName("Material Description")]  
        public string MaterialDescription { get; set; }

         [DisplayName("Property Id")]  
        public string PropertyId { get; set; }

        [DisplayName("Tool Type")] 
        public ToolType? ToolType { get; set; }

        [DisplayName("Check Quantity if Below")]   
        public int? QuantityBelow { get; set; }

        [DisplayName("Bin Number")] 
        public string Bin { get; set; }

        public MaterialEntryViewModel MaterialCriteria { get; set; }

        }

        public class MaterialEntryViewModel  
            {
                    [Display(Name = "Material Code")]
           
    public string MaterialCode { get; set; }

                 [StringLength(150)]
                   [Display(Name = "Material Description")]

           public string MaterialDescription { get; set; }

           public string ToolType { get; set; }

           public string urlSearch { get; set; }

          }

    }


    namespace
    ToolsOracle.Data.Models
    {

        public partial class Inventory
            {
            public Inventory()
           
    {
                         IssueTransaction = new HashSet<IssueTransaction>();
               
    Repair = new HashSet<Repair>();
               
    ReturnTransaction = new HashSet<ReturnTransaction>();
                     }

            public long InventoryId { get; set; }          
            public string MaterialCode { get; set; }
           
    public string PropertyId { get; set; }
            public string SerialNumber { get; set; }
           
    public string Description { get; set; }
           
    public int Quantity { get; set; }
           
    public string Bin { get; set; }
           
    public int? ToolRoomId { get; set; }
           
    public virtual Material MaterialCodeNavigation { get; set; }
            
    public virtual ToolRoom ToolRoom { get; set; }
           
    public virtual ICollection<IssueTransaction> IssueTransaction { get; set; }
            
    public virtual ICollection<Repair> Repair { get; set; }
            
    public virtual ICollection<ReturnTransaction> ReturnTransaction { get; set; }

            }

    }

    Wednesday, October 30, 2019 6:02 PM

All replies

  • User475983607 posted

    You're rendering the UI twice.  Once using a View and again in the browser with the DataTable library.  Use DataTable or Razor not both to render a table.

    Limit the number of records returned on the first load.  Perhaps return one page at a time, use infinite scroll, or roll your own paging.  

    Wednesday, October 30, 2019 6:20 PM
  • User-719153870 posted

    Hi tinac99,

    I built a demo to test it your code will cause this performance issue but it couldn't reproduce your problem.

    The table shows immediately in the page load and in the searching operation too.

    Maybe it has something to do with the huge amount of data you want to show in this table or slow machine related.

    You can try press F12, use the devtool - " Performance " to see which part took you so long to load the table.

    Also please refer below demo which is built based on your code to see if i missed somewhere important that can be related to this issue:

    cshtml:

    @model MVCDemo02_No_Authentication_.Models.ToolSearchInventoryScreen
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>BindTableDemo</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
        <script>
            $(document).ready(function () {
                $("#InvTable").DataTable({
                    "iDisplayLength": 10
                });
            });
        </script>
    </head>
    <body>
        <div>
            <table id="InvTable" width="100%">
                <thead>
                    <tr>
                        <th>ToolRoom</th>
                        <th>Bin</th>
                        <th>Material Code</th>
                        <th>Property Id</th>
                        <th>Material Description</th>
                        <th>Quantity Inventory</th>
                        <th>Unit Price</th>
                    </tr>
                </thead>
                <tbody>
                    @if ((Model != null) && (Model.result != null))
                    {
                        foreach (var item in Model.result)
                        {
                            <tr>
                                <td> @item.ToolRoomNumber </td>
                                <td> @item.Bin</td>
                                <td> @item.MaterialCode </td>
                                <td> @item.PropertyId </td>
                                <td> @item.MaterialDescription </td>
                                <td align="right">@String.Format("{0:#,###0}", item.Quantity)</td>
                                <td align="right">@String.Format("{0:C}", item.Price)</td>
                            </tr>
    
                        }
                    }
    
                </tbody>
            </table>
        </div>
    </body>
    </html>

    Models:

    public class ToolSearchInventoryScreen
        {
            public IEnumerable<Inventory> result { get; set; }
        }
    
        public class Inventory
        {
            public int? ToolRoomNumber { get; set; }
            public string Bin { get; set; }
            public string MaterialCode { get; set; }
            public string PropertyId { get; set; }
            public int Quantity { get; set; }
            public int Price { get; set; }
            public string MaterialDescription { get; set; }
        }

    Controller:

    public ActionResult BindTableDemo()
            {
                Inventory i1 = new Inventory() { ToolRoomNumber=1, Bin ="1", MaterialCode ="1", PropertyId ="1", Quantity =1, Price =1, MaterialDescription ="1"};
                Inventory i2 = new Inventory() { ToolRoomNumber = 2, Bin = "2", MaterialCode = "2", PropertyId = "2", Quantity = 2, Price = 2, MaterialDescription = "2" };
                Inventory i3 = new Inventory() { ToolRoomNumber = 3, Bin = "3", MaterialCode = "3", PropertyId = "3", Quantity = 3, Price = 3, MaterialDescription = "3" };
                Inventory i4 = new Inventory() { ToolRoomNumber = 4, Bin = "4", MaterialCode = "4", PropertyId = "4", Quantity = 4, Price = 4, MaterialDescription = "4" };
                Inventory i5 = new Inventory() { ToolRoomNumber = 5, Bin = "5", MaterialCode = "5", PropertyId = "5", Quantity = 5, Price = 5, MaterialDescription = "5" };
                Inventory i6 = new Inventory() { ToolRoomNumber = 6, Bin = "6", MaterialCode = "6", PropertyId = "6", Quantity = 6, Price = 6, MaterialDescription = "6" };
    
                ToolSearchInventoryScreen ts = new ToolSearchInventoryScreen();
                List<Inventory> list = new List<Inventory>();
                list.Add(i1);
                list.Add(i2);
                list.Add(i3);
                list.Add(i4);
                list.Add(i5);
                list.Add(i6);
                ts.result = list.AsEnumerable();
                return View(ts);
            }

    Best Regard,

    Yang Shen

    Thursday, October 31, 2019 3:24 AM