I'm new to React, so please bare with me.
I have made a simple ASP.NET Web Forms project that successfully opens a page in React. My next question is, is it at all possible to open a new popup from the React-page with the content of an ASPX-page, and in some way communicate between the 2 pages?
Scenario:We have bought access to a simple layout designer, made with React, that we want to feed JSON with different settings. These settings, however, are currently coming from a ASP.NET Web Forms page (hosting an ASCX control) which is generating the JSON. Is this scenario completely impossible? Maybe we can use a service to communicate between the two, but its important that this 3rd party designer (which through the developer of this, has access to implement custom features, like opening a popup or similar) can open a settings-popup we have created in ASP.NET Web Forms.
If this is too complicated, any ideas would be appreciated to how we can accomplish this. For example, are iframes still a thing? Or are there new technologies that works better? (In case we need to host a page outside the React project, that communicates back).
I hope my explanation is understandable, otherwise let me know, and I'll try to elaborate.
Hope you can help, thank you in advance!
For clarification, we have hired the developers of the 3rd party software to help us implement the solution, React-wise, so I just need to find out what the possibilities are in regards to the integration of the 2 worlds.
be it bootstrap, jQuery + jQuery.ui dialogs, or react? They all should work. however, what you can't do in ALL cases is allow ANY postback in that dialog form you displayed. Once you do a postback- then the page cycle starts and it blows out the dialog form.
And this issue is not really limited to webforms, but that of you now having to avoid post-back when such dialogs are displayed. Of course while web forms are somewhat legacy today, they are VERY nice in how easy it is to wire up controls and their events to code behind.
Needless to say, adopteding one of these frameworks that has all those great dialogs and widgets? They sure are nice, but now it means you having to write ajax calls and avoid post-backs - and that can be a lot of work. So while even jQuery.UI can load a WHOLE different aspx page into a div and pop it up? (and it works VERY well). Well, ok, you now have that cool differnt page as a dialog popup form, but you can't fire any post-backs via standard asp.net buttons and controls when you do this. And as noted, this issue is not really limited to asp.net web forms, but only that webforms obvsilty encouraged a LOT of post-backs with code behind. The amount of round-trips from those post-backs is costly, but HUGE savings in time to write such code with great ease.
You could try a dialog form with a update panel surrounding the controls that do cause post-backs.
So, in web forms, the VERY thing that was you friend and resulted in GREAT ease of coding is now your very same enemy. (that enemy being lots of post-backs and round trips).
So, you have to give up a LOT of code and forms that do postbacks simply can't be shoved and dropped into say some popup dialog form, since that form VERY likely had a lot of post-backs - and they will collapse that dialog and start the round trip process.
As long as you keep the above in mind? Then adopting bootstrap, jQuery.UI dialogs or react should work just fine - but you be spending lots of time writing out ajax calls, and those calls to code behind will NOT have use of the textboxes and controls on the form - since they are sill sitting on the browser + users desktop and do not come along for the ride when you make the ajax calls to the server side code.
Related
I have an existing ASP.net 4.5 webforms application that I want to make into a "WebApp"-like application for mobile browsers.
What I'm mainly interested in is the graphics / sizing / scaling aspect, since the WebForms site works well with mobile browsers already, but it looks ugly and not "mobile" at all.
Reading around, I came across jQuery mobile, which at a glance seems perfect: just including it in my website turns every element of the page "mobile friendly" (fixed page size, big buttons and elements, auto stretching, etc.).
But my initial enthusiasm was short lived: as soon as I tried to use the website, I noticed that while the graphics were perfect, including JQ mobile broke almost all the logic, for example:
DropDownLists stopped generating postbacks
Clicking on LinkButtons stopped working (nothing happens on click)
UpdatePanels broke completely (the ajax calls don't fire anymore)
MultiViews broke completely (they get reset to the initlia View on
every postback)
Am I doing something wrong, or is it just that WebForms and JQuery Mobile are just incompatible?
If they are incompatible, can anyone suggest an alternative to make my website look like a mobile web app (other than re-designing everything by hand that is).
I use asp.net webforms in conjunction with jQuery Mobile and they can work well together. However it takes some forethought and planning, and probably some new ways of doing things compared to the traditional webforms approach. So converting an existing webapp is not as quick and simple as you would like.
Some hints:
If you are using a single aspx page with multiple data-role="page" elements, consider putting all of them within one FORM element so that asp.net postbacks/updatePanels can work.
For linkbuttons, you will most likely need to turn off the default AJAX loading of page links in jQM.
In many cases, instead of using postbacks on controls, use client-side scripts to make async calls via PageMethods in the codebehind, or WebMethods in a WebService(asmx). If you are more comfortable with UpdatePanels, these should still work if you have everything inside a form tag and a scriptmanager within the form tag too.
DropDowns do get restyled by jQM, so you might want to catch the change event in javascript and then either use async calls or fire the postback via javascript.
Here are some other opinions:
JQuery-Mobile and ASP.Net - AJAX or Postback?
How to mix jQuery Mobile and ASP.NET
jQueryMobile in ASP.NET WebForm
If you choose to have Ajax enabled with jquery mobile JQM [which is preferred when using JQM to give the user feeling a native app], you won't have the post back anymore. That is not good because you would lose a lot of built in features like validation controls, built in request validations....
So, one of the options would be using WCF restful service and have it compatible with asp.net (by having this in the web config: serviceHostingEnvironment aspNetCompatibilityEnabled="true"). In this case, you need to mitigate security threats like script injection and cross side request forgery and .... inside with the WCF service as there is no built in request validation.
And now some JQM gotchas:
In order to avoid a lot of surprise, you may have only one page in the DOM by removing previous page from the DOM. This way, you don't need to worry about having multiple items with the same id in the DOM.
The other thing is binding events. if you have a java script in you master page and you have let say a click event to bind, make sure to use one instead of on. otherwise, it behaves unexpectedly.
For the client side validation jquery validation works fine and easy to use and no conflict with JQM.
1) A while ago I’ve started learning Asp.Net, but then I’ve heard that Ajax is “the new thing”. Since I don’t want to throw away the time I’ve invested into Asp.Net, I’d like to know if it is a common/recommended practice to use both technologies ( Asp.Net and Ajax) when creating websites and web apps in general?
2) If it indeed is a common practice to use the two technologies together, is that only true for server-side Ajax and Asp.Net or can client-side Ajax also be used in conjunction with Asp.Net?
thanx
EDIT:
A)
The only problem is that it can be a
bit trickery to do ajax request using
jquery when using asp.net
webforms(asp.net mvc was designed with
frameworks like jquery in mind so it
is easier to do).
Are you implying that perhaps jquery could be too much of a hassle when used together with webforms and thus I should think of using Asp.Net Ajax instead?
B) Little I read on ajax is that it also needs to call web services or some other technology that provides similar functionality to web services. If true, which technology do you use ( WCF or Asp.Net web services or … )?
C) Is Ajax a subsection of jquery? Thus, to understand Ajax, will I need to purchase only a book on jquery or will I also need to read a book with Ajax in its title?
You can use both, and it is common to use both. MS has a toolkit around using AJAX on asp.net sites:
http://www.asp.net/ajax/
1) Yes it is common to use Ajax and Asp.net on the same website. I do it all the time(in fact if you turn off javascript on my sites they won't work too well as so much is AJAX). AJAX allows for requests to the server to be made without refreshing the page you still need a serverside language to do stuff with that request. You also need the load the page for the first time so asp.net controls still are needed and in fact if your using asp.net ajax then you can use update panels where you put controls into that automatically become ajax enabled.
2) I am not sure what you mean but Ajax is mostly javascript so it lives on the client side and sends requests to the server side.
Edit
Ok I skimmed most of the stuff in those chapters. AJAX server side is where most of the rendering is done on the server side. So the update panel is an ajax server side control. You drag it on to your webform throw some other server side controls into it and a button. If a user then clicks on that button in the update panel an ajax request is made to the server and you can grab all the stuff you need and use C# to change it. You never have to write one line of javascript code to make that happen.
Of course that has a price though for instance an update panel does not do a true ajax request because of the page life cycle. If you actually watch the code through the debugger you will notice it will go through the page life cycle but in the end will just rerender that update panel so there is a bit more over head then if you did it yourself.
Client side Ajax is basically Microsoft trying to make it easier for you to do javascript by trying to make it more like C# syntax and giving you built in methods. A problem is that alot of people throw the buzz word Ajax too often around and call stuff that should not be called Ajax when it should be just called javascript.
This seems to be the case with this client side ajax as most of what I seen in the client side ajax chapter is almost all javascript. Like in "Figure 33.8. Selecting a menu item." all it seems to be is your click on a choose then it displays the name of that button that is not really Ajax.
Ajax to me is when you actually make a server request to post or get some information with out the page refreshing(ie full post back). For example if you got a form of data that you want to send to the server to be saved in a database. If you would hit the save button and that form data would be sent to the server without the page refreshing then that would be an Ajax request.
Most of the stuff in the ajax tool kit is more javascript
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Calendar/Calendar.aspx
For instance the calendar control to make it select different dates it is not doing any sort of request to the server since it is all javascript so why would it be ajax if it never posts to the server?
If you would take the value in the textbox that the calendar control puts the date in and post it to the server without refreshing the page that would be an Ajax request.
Finally I would not be too worried about asp.net webforms going anywhere anytime soon. I believe the guy who wrote that article about asp.net going to dye is the guy who made Ajax or was involved some how with the development of Ajax so he is probably biased.
Besides look its been 5 years now since he posted that and asp.net is stronger then ever. Ajax still needs a server to connect to, you still need to render the initial page load with either straight html or asp.net server controls.
Edit 2
1) Yes I think jquery is better the MS ajax for a couple reasons:
It uses less resources then drag and
drop controls
It simplifies javascript alot as it
makes it easier to use(such as
selecting html controls,etc). So if
I was using MS ajax I probably still
be using jquery for the selectors it
has so it is kinda redundant to use
both unless you have a good reason
too.
The only problem is that it can be a bit trickery to do ajax request using jquery when using asp.net webforms(asp.net mvc was designed with frameworks like jquery in mind so it is easier to do).
2) You really only need to learn jquery and not even javascript. I read a javascript book in like a day then jumped into jquery without even doing on exercise in the book and never did javascript before and I had no problem doing jquery. Of course if you got javascript experience it is a plus since sometimes you will be trying to find a jquery solution when javascript already has a method for what you want to do.
Edit 3
A)
The only problem is that it can be a
bit trickery to do ajax request using
jquery when using asp.net
webforms(asp.net mvc was designed with
frameworks like jquery in mind so it
is easier to do).
Are you implying that perhaps jquery
could be too much of a hassle when
used together with webforms and thus I
should think of using Asp.Net Ajax
instead?
No I am not implying that it is too much hassle for webforms was just stating the fact that it will be a bit more tricky in certain situations then ms ajax and jquery with say asp.net mvc.
asp.net webforms was not really made for a framework like jquery and has trouble dealing with it because of it's page life cycle gets in the way. MS ajax might have it's own set of challenges though too(like everything usually does). Jquery was made in mind of to try and work across all browsers since in javascript many times you would write something that worked in IE but did not work in any other browser and I am not sure if MS ajax client side version thought about this.
B) Little I read on ajax is that it
also needs to call web services or
some other technology that provides
similar functionality to web services.
If true, which technology do you use (
WCF or Asp.Net web services or … )?
Yes this is true. This was the whole point many people including me where trying to make to prove that guy was wrong that asp.net was dying because of ajax, since you need something in the back end to make a call too.
However you can choose whatever you want. You can make a separate web service( can be a asp.net web service), you can have like static web service methods in your page load ( I never done this way) and the way I use to do it is by making a generic ajax handler.
You can't however just make a regular method in your page_load and try to call it as it has to go through the entire page life cycle.
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/
http://weblogs.asp.net/craigshoemaker/archive/2008/11/07/using-jquery-to-call-asp-net-ajax-page-methods-by-example.aspx
http://dotnetslackers.com/articles/ajax/using-jquery-with-asp-net.aspx
http://sites.google.com/site/spyderhoodcommunity/tech-stuff/usingjqueryinaspnetappswithhttphandlersashx
I have not read these tutorials but these tutorials should show you the 3 different ways you can do an ajax request to an asp.net webservice, asp.net code behind page and asp.net generic handler.
Choose what ever one you think is best. I don't know if one way is better then another and there probably are more ways to do it.
C) Is Ajax a subsection of jquery?
Thus, to understand Ajax, will I need
to purchase only a book on jquery or
will I also need to read a book with
Ajax in its title
Ajax is just part of jquery and probably won't take you long to learn. If you buy a book about jquery there will probably be like 1 chapter on it. The only down side is all the jquery books I know of are all in php.
So if your just buying it to learn the ajax part probably not worth it since they will show an entire example of how to do it with php that might be slightly different then if you did it with asp.net( mostly just setting up the server side to accept the jquery calls- see the links that I posted above).
If you want to learn jquery selectors and stuff then it does matter if the one chapter is in php since it's all client side stuff expect for the ajax part( what is client side and server side).
It's not hard to really do the ajax stuff it just knowing what path you need to choose and more how to accept stuff on the server side and return stuff from the server side.
$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
The above is basically all you need to do on jquery side to send some ajax stuff. The first parameter is the path where this request should go. In this case its some php file called test. The next parameter is the the actual data sent as a json result and finally the last line is the function call back line. When the ajax post request is done that line gets called and does the actions. Data is the returned stuff you sent back from the server.
http://api.jquery.com/jQuery.post/
So I would just go through the tutorials I posted and play around with the jquery selectors. Once you done that you can decide if you want to go with jquery or not. The last thing I wanted to point out about why I like jquery is the fact that if you learn the MS ajax stuff your basically stuck with asp.net( what I have no problem with since I love .Net) but with jquery you can easily take your code or those skills of jquery and use it with php, ruby or whatever else and all the client side jquery selectors won't change by switching a different language. The only thing that will be different is the ajax stuff and even that won't be 100% different as the jquery ajax client side could will be the same.
Ajax is a methodology which can be used in conjunction with with other frameworks, such as asp.net. Asp.net will allow you to integrate javascript to implement ajax solutions.
A common implementation is to use javascript to call an asp.net webservice to perform ajax operations.
Ajax is the new "old thing" - ASP.NET MVC is the new "new thing" :-)
But seriously, you can mix all of these technologies in one web application if you want:
"classic" ASP.NET (WebForms)
Ajax (using ASP.NET Ajax controls other approaches such as jQuery)
ASP.NET MVC.
AJAX is a technique essentially added on top of an existing website to allow things to be done on that page without refreshing the entire page. Here on StackOverflow, for example, you can vote by clicking the up/down arrows via AJAX, without the page refresh you'd have seen without AJAX.
It doesn't replace ASP.NET (or any other language).
AJAX does not replace ASP.NET. They can be used together or independently. ASP.NET is more of a framework, where AJAX is a set of techniques built on top of JavaScript and HTML.
There is a framework that Microsoft has called ASP.NET AJAX. There are controls that will output JavaScript so that if you wish, you can have AJAX functionality without having to get too far into JavaScript.
However, you could also write the JavaScript by hand and use XMLHttpRequests to send requests to ASP.NET URLs and get data back.
ASP.Net is primarily a server-side technology stack which dynamically generates most of the client-side code. The out-of-the-box ASP.Net 2.0 page model is a fairly painful way to implement AJAX-enhanced user interaction (though there are techniques, such as custom handlers, that make it pretty tractable). Both the ASP.Net MVC and ASP.Net AJAX frameworks provide helpful tools for making it lest troublesome.
AJAX is commonly used to describe any asynchronous, partial-page-interaction technique to build the user interface of your application.
The server-side technology and the client side technology choices are fairly independent, though different techniques for how to work with a client side technology become attractive with different frameworks on the server.
Which control is best in terms of performance... multi-view or TabContainer in asp.net ?
According to your description I would probably don't use any of those two controls. I wouldn't go with tabs as you don't really need to be able to switch between them all the time as is seems. The tabs container uses javascript to enable you to change tab on the client side.
About the multiview. I find it bad practice to have that much different logic in the same place and it will probably give you problems later on. In my opinion and experience it's usually better to split that up in different pages and have one for each thing you want to add/modify (you can have the delete at the modify page and/or in the listings). I would recommend to stay away from the multiview control for tasks like this, as I think that having one page to show multiple pages is usually a bad idea.
As far as i know TabContainer isn't a native control in ASP.NET, you could use TabStrip from microsoft.web.ui.webcontrols, but this is limited to Internet Explorer.
So if you have TabContainer from a third party source, use MultiView which is native to asp.net therefore faster. But everything in ASP.NET eventually renders as basic HTML.
I don't know how they render in HTML.
i know this question have been mentioned alot here but mine is a little more updated,
now with ASP.net 4 and new Ajax client templating plus JASON services.
so if i got all these new capabilities will i really need server side controls as long as i can bind on client side, create data-views on client side heck i can even use data-context and apply CRUD operations on clients side.
so i actually i wont need button_click server side event or what so ever...
i am asking this because i own some commercial Controls like Telerik and Component art and they both offer client side operations ow but still i am confused as to my knowledge creating these controls will still have to go through Page Life cycle
please advise me.
The last Webforms app I created I had very few server controls on the page. Any save or update action I used plain HTML controls and jQuery for AJAX. I don't use any third-party control packs, but I know if you use jQuery you can find a jQuery plugin that will do what you need. There are hundreds of them out there and they're free.
If you are thinking about avoiding the page life cycle then I strongly suggest looking at the asp.net mvc framework. It allows for a lot more freedom and control over the HTML you produce. This makes it much easier to do AJAX and jQuery.
I've always wondered what is the best way to add a new item to html-select in a website.
Yes, this may sound silly but it is a great problem from the usability perspective. I don't want the user to be taken to a new page every time they need to add new item to a html-select.
I like the way Google Reader and Gmail handle this problem in there "add folder" and "add label" functionality. I would like to mimic that but i have no clue how they did that.
I'm using jQuery, so any reference to plugins, code examples or tutorials are welcome.
I would like it to be as modular as possible so i can reuse it anywhere.
I'm using ASP.NET 3.5 web-forms, Microsoft Access 2003, jQuery, IIS 5 and Win XP Professional as web server.
Thanks.
there's a jquery select plugin that might help you with this. I've manipulated select lists client side and had no problem with subsequent form-submits but you'd need to do some experiments w asp.net
The standard technique of doing this is called ajax, which basically means replacing only parts of the page. JQuery ajax and maybe a tutorial should get you going.
A common mistake for this scenario is to add the item on client (using jQuery or plain javascript). It may look that it works until the next post-back. Unfortunately the Asp.NET post-back model does not allow to alter the controls contents on client side only. So basicaly there are two choices:
Use ajax (the simplest would be to
use an UpdatePanel)
Make a normal
postback to add the item (simple and
fast to code, if performance is not
an issue - for intranet applications
for example)