我想在加载部分视图 MVC 4 时使用加载图像？

Question

我的问题是我的部分视图有一个网格，其中包含大量数据需要时间......现在我想使用像 beforesend 这样的加载图像来加载我的部分视图...... 我的主数据加载速度很快，但部分视图中的详细数据需要时间

这是我的 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>

这是我的部分视图调用的控制器

        [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");

            }

        }

请帮帮我

Answer 1

在全局 $(document).ajaxStart 和 $(document).ajaxComplete events 上使用它来为所有请求全局附加它。在$.ajax 中有一个名为global 的选项，当设置为false 时不会考虑全局事件。

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

正如我所说，这会将其附加到所有 ajax request，如果您不希望它出现在所有 ajax requests 中，然后在每个 ajax request 中添加 global:false，如下所示：

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

更多global活动请访问 - Global Events

现在，如果您只想将其附加到特定的.load，您可以尝试如下：

$('.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
});