I just finished working on my first website (ASP.NET). All I wanted was just some simple navigation menu on the top and content at the bottom. First I started using MasterPages, but I didnt want the whole page to refresh when browsing between pages and it seemed impossible to achieve with MasterPages.
So I switched to iframes - all looks good, but I cant bookmark or access subpages.
I am willing to rewrite web again, but I am not sure which technology to use. Should I try AJAX asp.net? In tutorials I found online they always updated just few strings, never whole page with images, text etc. Would I have to put html code of all pages into one big file with numerous panels or is it somehow possible to keep separated aspx files? Or is there some other approach I overlooked so far?
All I want is a website with menu which doesnt reload all the time and possibility to navigate to subpages. For better understanding, my current page is www.caucasus-trekking.com
Thank you, Jozef
By me, the best approach is to switch to Asp.Net MVC because the standard web forms do not offer flexibility you need, can be very tricky.
Here is how you can do this using MVC:
Make the controllers and views for the pages.
Use the _Layout.cshtml for header, navigation, ... (instead of master page).
On the navigation links, put normal href values that navigate to specific pages in a normal, standard way.
Up to this point, this is a just a standard, regular website.
Now, On the navigation links, attach click handlers that load content from server using Ajax and URL from href. Put this loaded content inside your content div.
On the server, inside controller actions, return View for normal requests and PartialView for the ajax requests.
Also, use some of these approaches to modify browser URL. Modify the URL without reloading the page
Finally, you get partial page reloads, visitor is able to bookmark
page and your content is visible to search engines. win-win.
If you really want to keep the header/footer, then you maybe want to make a single page app (SPA), as with AngularJS for instance, but it require to re-write a few thousand of line of codes because you change of "philosophy". SPA on Wikipedia
The easiest solution for you at the moment should be AJAX calls that refresh the body only, but for a complex website I didn't recommand it. You have to write a _YourPage.cshtml that you load trough controller that you call in jquery, by the use of the ajax function, for instance:
$.ajax({
url: "#Url.Action("Search", "Home")",
cache: false,
type: "GET",
dataType: "html",
traditional: true,
data: {
page: // Your page id found in the a href thanks to data-*?
},
success: function (result) {
// replace the body
}
});
We used to use MasterPage as you have done before, or Single page Application
Related
I am planing a simple website layout: Header with navigation, sidebar and a content block.
The whole site should be a single-page application because I am using a Cesium Visualization and a page reload would delete the current JS objects that are displayed in the Viewer.
Therefore I would like to reload the content container using AJAX to display my different "pages" and therefore keep all the JS Objects in the browser.
My question is:
Do you know a way to add a url-based navigation to this architecture?
For example: I am on the index page /index/ and enter the new url /content1/. The new url reloads the content container using AJAX and keeps the rest as it is. Therefore I would also be able to use the forward and backwards buttons of the browser.
May this be possible with ASP.net MVC routing?
I am pretty new to this so I hope I discribed my problem well enough.
Thanks a lot!
Try Pjax which uses ajax to load content dynamically via ajax
and pushState to maintain url history i.e is a HTML5 api. You shall find more details in the link below
https://github.com/defunkt/jquery-pjax
If you are familiar with angularjs then using ngRoute is a better alternative to Pjax as it has an effective url management through the routing service, please check the below link for more details on ngRoute
https://docs.angularjs.org/api/ngRoute/service/$route
I know the page reload concept via ajax without page refresh.
But facebook pages reload through normal page load. but sidebar's not loading just reload content area.
How is it possible?
Advance Thanks friends
Facebook uses bigpipe
The general idea is to decompose web pages into small chunks called pagelets, and pipeline them through several execution stages inside web servers and browsers. It is implemented entirely in PHP and JavaScript.
Clicking and taking some action on a webpage initialize/executes a pagelet, response generates from iframe or from ajax as well. Read the response and show it to a small chunk, this will not refresh the page.
I believe they are using the new history.pushState functionality in HTML5.
The main page of our website is HTML. The powers that be want to put an asp.net calendar on this main page. Is there any better way to accomplish this than to use an iframe?
Start with this...
<div id="calendar">
View our calendar
</div>
Then use an AJAX request to replace the link with the actual calendar... works whether or not JavaScript is enabled / successfully fires!
Here is the jQuery way of getting the calendar...
$("#calendar").load("/ajax/calendar/");
I recommend that the first URL (the link to the calendar) links to a full page containing the calendar and the second URL (the link to ajax/calendar/) links to something that just returns the HTML for the calendar, to make it faster and less bulky...
All URLs are fictitious and any resemblance to your real URLs is purely coincidental.
If you control IIS - you could just map .HTML to the ASP.NET handler and add your asp:calender wherever you want.
If you're able to use JavaScript, then I would recommend one of the plethora of JavaScript calendars out there.
http://jqueryui.com/demos/datepicker/
I'm about to build a web application(not web presentation) which will load its content through AJAX (jQuery) into a specific div. There will be a menu above the div and when a user clicks on an item from the menu, the appropriate page will be loaded into the main div.
I'd like to know if there are any cons and pros of choosing this pattern for a web application.
So far I'm avare that the browser back button and history/url will be gone.
Two possible downsides are that it could make it difficult for users to bookmark content on your site and difficult for search engines to differentiate pages on your site.
You should probably provide more information on your reasons for taking this approach. You might have good reasons or it might be a case of using a technology (AJAX) because it is cool to use.
If you want to give the users the impression of fast responsiveness, then yes AJAX load your pages, but still have a different url for each page. This will take more code but it will solve both issues that I mentioned.
http://yourdomain.com/home.aspx //loads its own content via AJAX
http://yourdomain.com/contact.aspx //loads its own content via AJAX
etc
This is really only appropriate if you have a lot of content, or where the content involves time-consuming calculations, such as on a financial site. In most cases, it would be less trouble to just load your pages normally or break you content into paged chunks.
The main con of this approach this will make your site very difficult for search engines to crawl. They don't read Javascript, so your content won't get seen or indexed by them. Try to do progressive enhancement so that they (and any users who don't use Javascript, e.g. screen-readers) don't get left behind.
On the other hand, you can keep browser history functionality. This can be done using the URL hash, e.g. http://www.example.com/#home vs http://www.example.com/#about-us. The nicest way to do this is to get Ben Alman's hashchange plugin and then use the hashchange event:
$(window).hashchange(function(){
var location = window.location.hash;
//do your processing here based on the contents of location
});
This will allow your users to use the history function and the bookmarking function of their browsers. See the documentation on his site for more information.
I am converting an old html based website to ASP.NET, so that we can include more features like AJAX, Databases later on to the site. Currently my task is to create a new .aspx page for each older html page. To keep the layout persistent i have made a master page.
So currently i am building a content page from the master page, then renaming the content page and adding the text from the html page to the content placeholder area. However i was wondering if can cannot write a system, which can act as a Page Thrower.
Each hyperlink when clicked goes to a serverside code, where it requests the page it wants to load. Typically a webserver expects that the pagelink specified in the hyperlink does exist physically, but here what i am trying to do is that. Say the link is for the page "TravelDetails", the page need not exist physically, but the content of it is present in a file in (html format). so the Page Thrower gathers the data to display for that page, it has a master page already, it adds the html of it there and then throws the custom page. This way i don't have to keep 100+ aspx pages, i can do with a single page and maintain another data structure to store the content (static data) for each page. any guidance if my approach is right, and how to go about it?
Thanks
I think you should try some cms avaialable in market like dotnetnuke. Because every time you need to have to create a web page for a html page. In future if there will be any changes then it will take time. While in cms like dotnetnuke you just need to paste your html in existing system. You don't need to do coding again.
DotNetNuke is a free one. There are other Content Management System also available as well. Another advantage is that dotnetnuke is having skin features. So if you change skin at one place. You need not to do it for all the places.
Take a look at ASP.NET MVC. It uses ASP.NET Routing, which may help you.
Alternatively you can use ASP.NET Routing without MVC, too.
Matthias
Just a thought.
Create a page linked to the Master Page. In the content place holder add a Panel.
Let your Page thrower decide which page to display, retrieve the html data & add it to the panel at runtime.
Why don't you create the pages dynamically and then use asp.net caching in order to increase throughput.