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
Related
I'm writing an app which involves letting users to share comments on a website, which has a comment form with Google's reCAPTCHA embeded. I would like to load this page via HTTP and display CAPTCHA within my app, so that user can post comments from my app. Is it easy to implement or should I rather try other solution?
EDIT:
I've red reCAPTCHA developer guide. If I would like to embed captcha inside my form, I'd need to insert div element with a proper class, and make a ajax request in order to render captcha. This call would insert an iframe into a given div. What I need is to know how to access that iframe's content without using AJAX.
Turns out we are not supposed to do that kind of tricks with reCAPTCHA.
There is no support for that in API. It seems that it was part of Google's design to prevent that kind of usage.
The only walkaround I could come up with is to implement a WebView widget with JavaScript support, get website via http, and load it into this webview, centering this view around the form we want to post.
It seems like a lot of work though, thus I'm going to simply skip this, if someone successfuly manages to figure it out I'd appreciate a hint :)
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
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 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.