Host .NET app inside HTML web page - asp.net

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/

Related

Single-Page Website with Ajax NAvigation

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

Rewrite website from iframes to AJAX

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

Pass a variable from ASP.NET to HTML via Iframe?

I don't know if this is even possible, but here goes: I have an ASP.NET page that contains an IFrame that calls an HTML page. Is it possible to pass a variable from the ASP.NET page to the HTML within the IFrame? More specifically, I'd like for the ASP.NET page to fill in one of the fields on the form within the HTML page.
You could do something like this:
window.frames['IFrameName'].document.getElementById('TextBoxID').value='YourValue';
If you only need it to work with the latest browsers then window.postMessage is the way to go to communicate between frames.
See: http://msdn.microsoft.com/en-us/library/cc197015

Which one is better when we want to redirect to a new page in asp.net : using a link button and then Response.Redirect OR using an html <a> link?

Which one is better when we want to redirect to a new page in asp.net : using a link button and then Response.Redirect OR using an html link?
Depends on your needs:
Use the <a> tag if there's no need for you to do anything with the form/page you're directing from
use response.redirect if you need information from the form before moving on to the next page, for example to update session states or store intermediate results.
well an anchor tag elimates a round trip to the server.
If you are just linking to another page with a static URL, use an HTML anchor link. It will have better performance and only requires code in one place: the page.
If you need to perform operations on the server before the redirect, including manipulating the URL (e.g. dynamically creating querystring parameters), then use a server control (button, link, linkbutton).
I would use the anchor tag. It seems that with the redirect you are doing extra work with the round trip for not much gain besides using the link button control (at least this is what I am surmising from your question, there are valid reasons to use it). Also (not that this will likely make a difference in your case) it does cause and additional status code to be sent to the browser (302), telling the client application something is potentially amiss). If you are working on a highly secure site and or have non-browser applications accessing the page to pull information, this could be a problem.
Actually you have a third option which might suit your needs. Depending on the way your pages are setup and what you need to do, you can use Server.Transfer also.
If you want to use a button instead of a link just for the way it looks, you can use javascript to change the location of the page in the button's onclick also saving you a trip to the server.

asp.net web stats - google analytics

i want to add tracking to my website. I saw google analytics which seems to track what i need.
So do i stick the google analytics snippet in each page, in a master page, just in my default page? what is the best practice here to get the best metrics.
The google analytics code snippet has to be on every page you want to track.
Easiest is to put the code into the master page(s) if you use them.
Otherwise put it on every page, or put it into a user control which you can include on the relevant pages or include it using a server-side include, e.g:
<!-- #include file="file_containing_google_analytics_code.js" -->
It depends on the structure of your site. If you have a small number of Master Pages it makes sense in there, or you could put some code to emit it in a base class that you inherit all your pages (or master pages) from, or if you have a standard footer control that you use on all pages you can put it in there.
I generally wrap it in a Placeholder in ASP.Net and have some code the switches it on/off from a web.config setting so it doesn't appear when the site is running in test/UAT/dev machines.
We use Google Analytics, and have incorporated this into our base page - although our first implementation was done with an HttpModule.
I like the base page approach, because it is a common area for some like-minded tasks. It additionally moves the viewstate to the bottom of the form, removes whitespace, etc.
You should take a look here : http://blog.sb2.fr/post/2008/12/21/Google-Analytics-WebControl-for-ASPNET.aspx

Resources