load different html in the current page without reloading/refreshing

StackOverflow https://stackoverflow.com/questions/10814055

Question

i was looking at this website and i am interested on how did the developer managed to load different htmls in a single page without the current page being reloaded...

here is the website: http://demos.kendoui.com/web/validator/index.html...

for example if you clicked globalization in the Framework section, you can see the url changed, the body changed also but a part of the page remains (the top part) and the current page is not reloaded...

i am just starting in web development and i want to know this technique... i hope you can share it to me.... thanks :)

Was it helpful?

Solution

It is using ajax partial updates. You send request to the server and get portion of the page and then place it in some element, for example in div.

Normal:

<html>
   <head>
   <head>
   <body>
      <div id="divToUpdate"></div>
      @Ajax.ActionLink("Call Partial", "MyAction", "MyController", AjaxOptions{ UpdateTargetId = "divToUpdate" })
   <body>
</html>

Partial: 

 <span> here is my partial view which will be placed in "divToUpdate" div after clicking "Call Partial" Link </span>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top