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

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

Answer 1

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
});