asp.net core docker Part 94 Providing visual feedback using LoadingElementId AjaxOption

Link for code samples used in the demo
http://csharp-video-tutorials.blogspo...

Link for csharp, asp.net, ado.net, dotnet basics, mvc and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat...

This is continuation to Part 93, Please watch Part 93 from the ASP.NET MVC tutorial before proceeding with this video.

One problem with partial page updates is that, they donot provide any visual feedback if the request is taking a long time to process. With full page postbacks, we don't have this problem, because the entire page is posted to the server and hence the user knows something is happening.

For example, let's say a request in our ajax enabled application takes 10 seconds to complete. When the user clicks the button and if we don't provide him with any visual feedback that the request is being processed, the user may think the website is not working and he may click the button again. So, it is very important that we provide some visual feedback. To achieve this here are the steps.

Step 1: Right click on the project name in solution explorer, and a folder with name = Images. Copy and paste the animated GIF image, in the Images folder.

Please note: You can create animated GIF images using the following website.
http://spiffygif.com/

Step 2: Place the following DIV tag on the view, where you want the image to show up when request is still being processed.
[div id="divloading" style="display:none;"]
[img src="~/Images/spinner.gif"/]
[/div]

Step 3: Modify the Ajax.ActionLink() html helper method on the view as shown below. Notice that, we have set LoadingElementId = "divloading"
@Ajax.ActionLink("All", "All", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "divStudents", InsertionMode = InsertionMode.Replace, LoadingElementId = "divloading" })

Step 4: The controller action method in our example, completes in no time. So the image never shows up. To introduce some latency include, System.Threading.Thread.Sleep(1000); statement in the controller action method. The duration for the sleep method is in milliseconds. We have specified 1000 mill-seconds, so the thread is going to sleep for 1 second.
public PartialViewResult All()
{ System.Threading.Thread.Sleep(1000); List[Student] model = db.Students.ToList(); return PartialView("_Student", model);
}

Now run the application and notice that image shows up, while the request is still being processed. When request processing completes and when the response is received, the loading image disappears and the UI is automatically updated, with the data received.

asp.net core docker Part 94 Providing visual feedback using LoadingElementId AjaxOption
172 Likes	172 Dislikes
59,834 views views	524K followers
Education	Upload TimePublished on 17 Sep 2013

Related keywords

update mysql,wcf vs web api,ado.net core,sql server management studio,webkinz,webadvisor,craigslist nj,wcf one piece,asp.net core 3,ajax players,weber grill parts,webtoon,tutorials by hugo,csharp corner,mvc design pattern,asp.net machine account,servers for minecraft,asp.net core dependency injection,ado.net tutorial,update csgo,services angular,ajax ontario,tutorial definition,tutorial on excel,update angular cli,asp.net mvc tutorial,asp.net cos'è,csharp assembly,tutorialspoint python,sql join,services briefcase,asp.net core web api,ajax jquery,wccftech,craigslist ny,asp.net zero,csharp foreach,server memes,sql date format,services online,chase,update select,serverless architecture,server resume,wcf c#,server books,tutorialspoint javascript,mvcc connect,ado.net mysql,services technologies gps,ajax deadpool,server jobs,cvs,website,mvc tutorial,costco hours,wcf service application,tutorialspoint spring,serverless,wcf soap,wcf cat,cool math games,wcf test client,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,ajax parking,sql database,asp.net core logging,updates were rejected because the tip of your current branch is behind,mvconnect,cunyfirst,asp.net guida,wcf nba,csharp download,wcfi foundation,csharp online,wcf authentication,tutorials near me,http://asp.net,server 2019,chernobyl,ado.net descargar,web of dreams,serverminer,ajax cleaner,ado.net visual studio 2019,tutorial for windows 10,webassign,ado.net vs entity framework,ado.net visual studio 2017,csharp list,sql like,asp.net mvc,asp.net core tutorial,sqlite,wcfm,ajax roster,tutorial gateway,mvc architecture,http://ado.net,update node,asp.net core mvc,ajax soccer,server hosting,update inner join,update viajes,update postgresql,wcfi,updated,ajax dish soap,capital one,server rack,tutorialspoint html,csharp interface,craigslist,webroot,tutorialspoint reactjs,ajax request,wcf dragon ball,asp.net core 2.2,tutorialspoint python 3,sql developer,webster,services transmission company sas,update windows 10,sql group by,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,update traduccion,tutorialspoint spring boot,mvc map,csharp online compiler,update chrome,update from,asp.net download,sql between,ado.net c# pdf,services tag dell,wcf 2019 nba,update oracle,csharp switch,ado.net ventajas y desventajas,csharpstar,wcf tutorial,tutorialspoint,ajax meaning,csharp-video-tutorials.blogspot,tutorials dojo,tutorial mission gta online,central park 5,csharp string format,ado.net c#,asp.net core github,server status,ajax fc,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,server error in '/' application,services windows,asp.net core 3.0,sql injection,tutorialspoint c#,wcf ria services,calculator,ado.net entity data model,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,update bios,servicenow,webcam,mvc hours,webmd symptom,csharp array,csharp enum,ajax call,asp.net core 2. guida completa per lo sviluppatore,asp.net core,server pro,server status ffxiv,cheap flights,webcrims,asp.net core hosting,services sas,update java,update npm,tutorialspoint java,tutorialspoint java compiler,webmd,csharp to json,college football,ado.net dataset,csharp dictionary,tutorial meaning,cnn,website builder,tutorial.mc-complex,tutorialspoint sql,asp.net web api,server side rendering,weber grills,sql server 2017,tutorialspoint spark,mvc nj,ado.net oracle,asp.net core download,csharp to vb.net,webster bank,webstaurant,tutorial systems,tutorialsystems,tutorial teacher,ajax post,services fms publish announcement,services.msc no abre,ajax jersey,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,tutorial on variational autoencoders,csharp random,century 21,services consultores,services consulting,mvcsd,services.msc,mvcsc,ado.net pdf,asp.net core configuration,ajax marvel,tutorial synonym,sql update,asp.net tutorial,mvc medical,ado.net entity data model visual studio 2019,wcfs international curriculum,mvc2,ado.net entity data model visual studio 2017,chase online,update sql,wcf api,costco,update ubuntu,server jobs near me,webex,sql meaning,sql tutorial,sql commands,ado.net entity framework,ajax tavern,tutorialsteacher,ajax javascript,services desk,ajax greek,csharp tutorial,mvc pattern,ado.net sql server,ado.net connection,asp.net identity,mvcu,asp.net core middleware,wcf web service,mvc webadvisor,tutorial music,web store,mvcc,webmail,mvci,mvctc,