Is possible to develop whole asp.net web form with jquery - c#

Is it possible to develop a whole asp.net web form with jquery ajax instead of pagepostback?
If possible can anyone show some tutorials or examples?
eg binding data to form (textbox, dropdownlist, gridview etc.), send data to server, etc.
Thank you for your support and Sorry if my english is not good
Zabahey

In my experience, if you are doing that much with jquery you'll do much better trying MVC, as this allows you to work much closer to the HTML (important when marrying to jquery) and avoids all the cruft that is meaningless with a jquery-centric app. It is also much easier to write the ajax routes.
But to answer the question: I'm sure that would be possible, but it will be easier without webforms adding work for you to undo.

You can make a web page or should I say simple HTML markup which can use JQuery or any other Javascript Library to load dynamic content from Database. Yes, you can create dropdown's, checkboxes too, but then you have to be very much efficient in Javascript, HTML and DOM knowledge. Because, you can not debug errors rapidly in this case. Also, you need to
understand the asynchronous behaviour of browsers too.
Its just a complete different pool of water to swim in.

Related

Best resource to learn How to Create AJAX enabled User Controls

In our project, we use lot of User Controls. None of them supports AJAX. We use UpdatePanel for partial page rendering. There is no proper client side functions for the controls.
I used to create normal JS functions in the ascx page itself. I guess it is not the standard way to add client functionality to a User Control. However i can achieve all the things which i required , with out using any such standards. But when considering the maintainability, it is tough & it is hard to make changes & not scalable.
So i want to learn the proper way to create AJAX enabled User Controls. Just like how Telerik & other 3rd party controls create User Controls. What is the recommended way to create such controls by Microsoft.
Could you be more specific about the problem with Update Panel??
To use inbuilt ajax,
1. You need a ScriptManager
2. Put all necessary controls within Update Panel
Since you are using User Controls, its better to add ScriptManager in the main page where the User Control is added. Otherwise it might give an error saying multiple ScriptManager found.
UpdatePanel uses AJAX and is easy to use, however, if you want true client side controls, i.e. only call the server when you need too, then it's probably best to look elsewhere.
If you want to write your own controls, I'd recommended reading about some JavaScript design patterns, specifically the module pattern. If you have decent JavaScript skills, it's extremely easy to create controls with the help of jQuery - may as well make it a jQuery plugin. You might want to check out some client side MVC/MVVM frameworks like AngularJS or Knockout might be enough, because at least they'll help you with data bindings so it's less painful to manage the data on the client side and get it back to the server.
But, unless you're doing some that no one else has done before, why not use some existing controls by Telerik or DevExpress for example?
Example of module pattern (there's a bunch of different ways to do module pattern, this is just one):
var myModule = {
/* PROPERTIES */
prop1: 'sdfsdf',
prop2: 123,
/* FUNCTIONS */
func1: function () {
alert('!!!');
}
}
/* example use of module */
alert(myModule.prop1);
myModule.func1();
You'll also need to have a good understanding of events in JavaScript. For example, if you wanted to create a client side grid (there's millions already available for free), you'd need to handle click and text changed types of events. i.e. to handle paging, sorting, filtering and any other feature you might want out of your grid.
Edit: just created a basic JSFiddle to give you an example of a really basic client side control using a jQuery plugin. It doesn't work perfectly, but thought it might give you an idea of where to start if you wanted to try making your own controls.
http://jsfiddle.net/pwqmenwx/1/

When to use javascript instead of creating an aspx page?

I am new at C#.Net and i have one question that i couldn't manage to find on the internet. When should i use a classic combination of html + javascript + css instead of using an aspx page with a code behind?
As i experienced since i started .net , i found that aspx pages and code behind is a huge ease for developers. I didnt need any piece of javascript code since i started. There must be something wrong. I think i am missing a point. Can you answer my question and tell me some examples that i must use html+javascript+css instead of aspx + aspx.cs or vice versa??
Have a nice day.
Javascript is a client side technology, running only in the browser, whereas ASP.NET runs on the server side. These allow you to achieve different and complementary things.
With a classic server side language, any user interaction that you want to respond to must typically be posted across the internet from the browser to your server. It is then processed by the server, which responds with a new page for the browser to load. This generally means that the response time for the user is slower, though you will have access to a much richer programming environment on the server.
With a client side language, everything is processed on the browser. This allows for faster feedback to the user, though at the expense of working within the much more restricted programming environment that the browser gives you, and with no access to stuff your application may depend on, such as your database.
Of course, the lines are blurred somewhat when you make an AJAX request (usually a call written in Javascript that makes a request to the server, receives the response, and updates the page dynamically).
You mention that you have not used any Javascript so far. Perhaps as a starting point you'd like to investigate validating user input on the client side? This way, errors are caught and reported to the user immediately without the cost of the round trip to the server. http://www.tizag.com/javascriptT/javascriptform.php
Both client side and server side technologies can be powerful and useful. Use a combination of them both to give the best experience for the user.
In my experience, using Javascript/jQuery in .NET has been for UI and client-side validation purposes. If you are building an app that does not require Javascript to meet your client's requirements, then take advantage of what .NET has to offer. However, implementing Javascript is not that hard, so feel free to use what you prefer and is in the best interest of the client. You can still write and use Javascript in an ASPX page.
One of your considerations might well be speed. Javascript in a web-page will run on a site visitor's browser. Code-behind runs on the server hosting the page.
from my experience the main aim to use the companion of html,css,javascript with asp.net when the client needs is for a web app that acts exactly like win app
that u don't need to flush over the page to the server and come back again
Points you are missing
Code behind is not what makes ASP.NET; you can make a web app with all C# code right into the aspx files.
If you choose ASP.NET and C# for a web app, all your pages should be aspx ones, except for very specific and not very common situations.
You need to understand the difference between server side scripting and client side scripting. ASP.NET is a server side scripting technology while javascript is a client side only one. Take a look.
You can create aspx pages that are as simple as you want -even without any relevant serverside scripting- and thats all right.
Attempt to answer
You use the word must, so:
You must use aspx instead of only javascript if you want any kind of server side processing.
You must use an html file with plain javascript, jquery and css if there is the specific requeriment to do so, wich would be very uncommon. That could be a situation where a) the page should be as fast as it can possible be b) you don't mind everyone to be able to see your full code by just selecting view source on the browser c) there is no need at all for server side processing d) you don't mind about the little extra mix of technologies on your web application.
You use Javascript/JQuery to perform operations that does not need any server side processing like validating controls for a range or for empty values, some fancy UI stuff. It is much faster than the code behind because it does not post back to server however you could use UpdatePanel aspx server control to have partial post back and avoid reloading the page.
As a web developer you should always use combination of server-side processing and client-side processing. Working logic and application processes on the client-side allows browser based applications to seem more responsive and to have more "snappiness" to them.
If you are looking for highly customizable and high performance pages, then I would go with html + javascript + css and make calls to some webservice. This way you are not restricted by asp.net controls. Also, there are a lot of caveats with standard out of the box web forms that can lead to page performance issues and overhead - ViewState being one. You can also design your own asp.net controls as well, but there is some learning curve.
It really boils down to personal preference (there isn't anything in one that you can't do in the other) : Fundamentals vs Abstraction. To me javascript has always felt somewhat cumbersome when used in conjunction with webforms, however, with mvc it is a lot more natural, as it would be with a standard html + javascript + css page.
When you want to create static pages you can use html+css+javascript instead aspx.
In case you want things more dynamic you have to use aspx with cs.
For more info go http://www.w3schools.com/aspnet/aspnet_pages.asp

Event without postback

In chat scripts new lines adds without reloading page. User's availability status changes without postback. Even in facebook a new comment adds without reloading page. How to fire an event in ASP.NET using C# so that event takes place with reloading the page.
I believe that its not possible using C#. Is there any special library for it in AJAX or jQuery or other?
It's done using native XML components available from the browser when writing JavaScript. These are used to call a server-side page or service to load a block of HTML (or XML) async, and then write it into the document. This is essentially AJAX.
JQuery is a library designed to make writing cross browser compatible scripts easier, and offers built in functionality to help make those AJAX calls for you, without you needing to do the low level bits yourself.
ASP.NET has a range of tools for creating AJAX enabled sites, and recent versions now incorporate jQuery for the client side parts, without you needed to do much wiring up. Together the tools make exposing and calling ASP.NET services really easy. The simplest form is probably the UpdatePanel. It's a good place to start if you have never made an AJAX enabled site before.
Also take a look at the AJAX Toolkit.
jQuery itself allows you to send GET and POST Ajax requests and manipulate with HTML elements
$.post(...
$.get(...

Form POST in ASP.NET

I'm trying to convert a classic ASP page to ASP.NET 3.5. The page has several forms on it for several different things.
In ASP.NET, there's a server form control wrapping the entire page, and form controls don't work within a server form control, and you can't have more than one server form control on a page.
So in order to keep this functionality, I can either:
Remove the server form control that's wrapping the page, and leaving the html forms on the page.
Create button click events for every form and perform the POST in the code-behind.
What's the preferred method here?
I wonder if converting to vanilla asp.net (aka webforms) is a bad idea here. Personally I'd go to MVC instead - allows multiple forms etc, and the views are much closer to he HTML, a lot like ASP.
I guess I'm saying there are some glitches vanilla asp.net introduces that you don't have to suffer.
I would go with the second option, any button click is going to post the whole page back anyway so you're not saving any bandwidth. Simply handle each button appropriately.
Check the answer I provided to a similar question here :-)
How to get past embedding a html form for paypal buttons asp.net
If you're going to use different button clicks, you still need to use this override to disable the non-related buttons in each handler, otherwise it won't work. You can only have one form tag at a time - this way you can toggle/disable the ones you're not using as appropriate.
Better still, refactor your application to use a single form. While MVC would be a closer match to the model you're using right now, it wouldn't make sense to go that route unless you were experienced enough with it; Web Forms is an easier jump.

I'm about to start using ASP.NET MVC2 for my web application

I have a pretty big web application that I created last year using ASP.NET webforms. It has two parts: Admin and Client (each one a project inside a single solution). Admin logs in as you would expect and manages the clients. Clients log in and manage themselves. SQL Server back end. It relies heavily on MasterPages and LINQ. It has 2 class libraries, one for my methods (authentication, security, encryption, etc.) and another with dbml files for linq that both admin and client project reference.
Now I really want to convert this to MVC 2. I know I'll have to rewrite the front end (not a problem, looking forward to it). I can reference my current class libraries and modify them as I need. My main concerns are my forms and controls. I'd really like to stay away from the major asp controls and use jquery for everything if possible (especially the presentation layer. I'm just not sure how to go about doing this. I was also told jquery is great for 'parsing and updating the DOM' but I've never done this either and not sure where to start (why do this over LINQ?).
Another issue I struggled with was the size of my main table. It has 109 fields in it, and my customer thinks all of them need to be available on screen (or as many as possible, especially in the grid). I had to break up my entry/edit form into 5 tabs (all web controls). My grids have sorting, grouping, export to excel, etc... I would really like to find a grid that lets you inline edit individual cells when double clicked. Would it be better to use jquery for grids? I can break that large table into relational tables if needed (probably will do that anyway).
Any advice from anyone who's done similar will be greatly appreciated. I just bought the book "Pro ASP.NET MVC 2 Framework, Second Edition" and I have a great jQuery ebook I'm working with.
Thank you guys!
EDIT: Should have mentioned I used Telerik WebControls for my previous web forms project so I'm familiar with them. I had no idea their MVC suite was free (I've paid quite a bit for the webform controls).
For grids I can recommend the free Telerik mvc controls. They have good support for ajax binding paging, sort, edit, parent-child etc.
This combined with a few widgets from jQuery ui (tabs, dialog) should put you on the right track as far as your presentation layer is concerned.
Adding to RedSquare, the Telerik Extensions for ASP.NET MVC are free and open source (under GPLv2). That essentially means the Extensions for free for "free" projects (projects you're not trying to sell). If you're trying to sell and make money from your software, we have a commercial license, too, to support that.
Today, the Extensions for MVC include 8 extensions: Grid, Calendar, DatePicker, Menu, NumericTextBox, PanelBar, TabStrip, and TreeView.
Additionally, 3 new Extensions are available in beta: Editor, ComboBox, and Window. (Official release towards the end of August.)
The goal of the Extensions is to make it easier to build rich MVC Views, similar to what you've done in the past in WebForms. MVC is very different than WebForms, though, so be careful when making the transition to avoid the "traps" of thinking in WebForms mode. For example, there are no PostBacks or ViewState in MVC, so some things require more deliberate code in MVC.
Finally, as a word of caution for "pure" JavaScript components, remember that they do not support any scenario where JavaScript is disable or not executed (common examples: web crawlers, accessible browsers). If accessibility or SEO are concerns, Server + Client UI controls like the Telerik Extensions can be a bonus.
Hope that helps.

Categories