I want to use Loading Image on laoding partial view MVC 4?

Question

my issue is my partial view has a grid which has large data which takes time...now i want to use loading image like beforesend only to load my partial view... my master data loaded quickly but my detail data in partial view takes time

here its my ajax ...

            $.ajax({
                url: '@Url.Action("get_Laptop_Detail_By_PO", "ChangeLaptopStage")',
                data: { PO_Number: PO_Number },
               
                beforeSend: function () {

                    $('.loader').show();
                    $('.main_area').addClass("disable_main_area");


                },
              
                success: function (data) {

              var Qty = data.ItemQuantity
              var Po_ID = data.PO_ID


              $("#Total_laptop_Qty").val(Qty)
              $("#PO_ID").val(Po_ID)

              




///This statement fetch my detail data in partial view ...i want to load this statement on loading image 

$("#LaptopDetail").load('@(Url.Action("Laptop_detail_By_PO", "ChangeLaptopStage", null, Request.Url.Scheme))?PO_Number=' + PO_Number);

                },
            });


<div id="LaptopDetail">
  
</div>

This is my controller where partial view calls

        [HttpGet]
        public ActionResult Laptop_detail_By_PO(string PO_Number, ChangeLaptop_Stage REC)
        {

            Cls_Lot Lot_cls = new Cls_Lot();
            List<LapTopDetail> LaptopDetail = new List<LapTopDetail>();

            ds = new DataSet();
            dt = new DataTable();
            dt2 = new DataTable();

            if (PO_Number != null)
            {
                ds = Lot_cls.getLaptopDetail_By_PO(22, PO_Number);

                dt = ds.Tables[1];


                foreach (DataRow drData in dt.Rows)
                {
                    LaptopDetail.Add(new LapTopDetail
                    {
                        //RowNumber = Convert.ToInt32(drData["RowNumber"]),
                        PO_Dtl_ID = Convert.ToInt32(drData["ID"]),
                        PO_mstr_ID = Convert.ToInt32(drData["LapTop_Master_ID"]),
                        WareHouseStatus = drData["WareHouseStatus"].ToString(),
                        GulfITBarcode = drData["GulfITBarcode"].ToString(),
                        Item_Orgainal_srNO = drData["Item_Orgainal_srNO"].ToString(),
                        Category = drData["Category"].ToString(),
                        Make_Brand = drData["Make_Brand"].ToString(),
                        Series = drData["Series"].ToString(),
                        ModelNO = drData["ModelNO"].ToString(),
                        Color = drData["Color"].ToString(),
                        Processor_Brand = drData["Processor_Brand"].ToString(),
                        Processor_Type = drData["Processor_Type"].ToString(),
                        Processor = drData["Processor"].ToString(),
                        Speed_GHZ = drData["Speed_GHZ"].ToString(),
                        Memmory_MB = drData["Memmory_MB"].ToString(),
                        Memmory_Type = drData["Memmory_Type"].ToString(),
                        LCD_Screen_Size_inchs = drData["LCD_Screen_Size_inchs"].ToString(),
                        Touch_Screen = drData["Touch_Screen"].ToString(),
                        LCD_Teatures = drData["LCD_Teatures"].ToString(),
                        HDD_1_GB = drData["HDD_1_GB"].ToString(),
                        HDD_1_Type = drData["HDD_1_Type"].ToString(),
                        HDD_2_GB = drData["HDD_2_GB"].ToString(),
                        HDD_2_Type = drData["HDD_2_Type"].ToString(),
                        Graphic_Card_Name = drData["Graphic_Card_Name"].ToString(),
                        Graphic_Card_Memory_MB = drData["Graphic_Card_Memory_MB"].ToString(),
                        Camera = drData["Camera"].ToString(),
                        Camera_MegaPixel = drData["Camera_MegaPixel"].ToString(),
                        Lan = drData["Lan"].ToString(),
                        Wifi = drData["Wifi"].ToString(),
                        Bluetooth = drData["Bluetooth"].ToString(),
                        NFC = drData["NFC"].ToString(),
                        OpticalDriver = drData["OpticalDriver"].ToString(),
                        OpticalDriver_Type = drData["OpticalDriver_Type"].ToString(),
                        USB_Ports_Qty = drData["USB_Ports_Qty"].ToString(),
                        SD_Card_Reader = drData["SD_Card_Reader"].ToString(),
                        Stylus_Pen = drData["Stylus_Pen"].ToString(),
                        Finger_Printer_Reader = drData["Finger_Printer_Reader"].ToString(),
                        HDMI = drData["HDMI"].ToString(),
                        VGA = drData["VGA"].ToString(),
                        Display_Port = drData["Display_Port"].ToString(),
                        Thunderbolt = drData["Thunderbolt"].ToString(),
                        Audio_Port_Mic = drData["Audio_Port_Mic"].ToString(),
                        Audio_Port_Sound = drData["Audio_Port_Sound"].ToString(),
                        Speakers = drData["Speakers"].ToString(),
                        Battery = drData["Battery"].ToString(),
                        Ext_Adapter = drData["Ext_Adapter"].ToString(),
                        Other_1 = drData["Other_1"].ToString(),
                        Other_2 = drData["Other_2"].ToString(),
                        Other_3 = drData["Other_3"].ToString(),
                        Other_4 = drData["Other_4"].ToString(),

                    });
                }


                REC.Laptop_Detail = LaptopDetail;

                return PartialView("Laptop_detail", REC);
            }


            else
            {
                return PartialView("P_Error");

            }

        }

Please help me

my question is simple..i want to load my partial view on loading image image.gif ..so that user wait untill its load completly — naveed ahmed
– naveed ahmed, Commented Aug 21, 2015 at 6:55
So what problems are you having and what is not working with your code? — user3559349
– user3559349, Commented Aug 21, 2015 at 6:57

Guruprasad J Rao · Accepted Answer · 2015-08-21 07:00:52Z

Use it on global $(document).ajaxStart and $(document).ajaxComplete events to attach it globally for all the request. There is an option called global in $.ajax which when set to false will not take global events into consideration.

$(document).ajaxStart(function(){
      $('.loader').toggle();
      $('.main_area').toggleClass("disable_main_area");
}).ajaxComplete(function(){
      $('.loader').toggle();
      $('.main_area').toggleClass("disable_main_area");
});

As I said this will attach it to all ajax request and if you want it not appear for all the ajax requests then add that global:false in each ajax request like on below:

$.ajax({
   ...
   global:false,
   ...
});

For more global events visit - Global Events

Now if you want to attach it to only particular .load you can try as below:

$('.loader').show(); //show it before calling load
$("#LaptopDetail").load('@(Url.Action("Laptop_detail_By_PO", "ChangeLaptopStage", null, Request.Url.Scheme))?PO_Number=' + PO_Number), function() {
    $('.loader').hide(); //hide once load completes
});

Collectives™ on Stack Overflow

I want to use Loading Image on laoding partial view MVC 4?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related