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/
Related
I have a simple yet not so easy question. (So, I suppose)
I have a current DurandalJS application in production. I am generating my views using C# Razor syntax. So, I am still using my controller to pass the HTML to the client. Rather complicated to get setup using routes/areas/etc but it has been working.
I am using server side for only one real reason. (other then validation, but we can ignore that for now as I am sure model validation has improved and there are ways to handle this now)
Lets say I have a button. And I only want to show that button on the screen if the user is an admin. Now, of course I can use KnockoutJs (or Auelia/Angular/whatever) to find out the users roles and "hide" the button. But as far as I know, the button is still inside the HTML? (it is in Durandal, not sure if the newer libraries handle this different). So, currently I use server code to do the check then the HTML gets rendered without the button.
Knowing how many people use SPA type libraries, what are most of you doing for simple use cases like this?
Oh, yes, on the server for the return API call, we would have security anyway, so assuming someone activated the button it would not work anyway, I simply do not want my users ever seeing it.
I have to build a custom control where I will render a textbox where I am supposed to take input, and on textbox change event I will have to keep a list of objects that satisfy that search string I took from the input, which should be exposed to be fetched at any time. I have no idea how to make an asynchronous call to the code behind the control. I am very new to custom controls, recently I have developed only one that rendered some div. I am very confused about this one, can any one give me any idea of how to do this? I am not asking for the code, I can figure it on my own, but I am missing the idea or general knowledge about asp custom controls.
I'm in a huge bind.
Long story short, I am working on a big project and am learning ASP.NET, C#, everything as I go.
The elementals of my project are comprised of user controls. My line of thinking was that I could create many user controls, each performing a function for a "component" of the project I'm building. Up until now I have been using clientside scripting to postback ajax calls to the code-behind on each of my user controls. AJAX worked well because it allowed to me pass data(that I need from the client) to my user controls and then I could return something in order to do an action.
I have been using a method for generating querystrings to create a callback "action" in order to determine what method needs to handle what data when the postback is sent to the code-behind side.
My problem now is that I need to start using many user controls one page -- and so now whenever ANY control does a postback ALL of the controls go through a page load. I thought my callback solution would take of this, but it isn't. Particularly when I drop a custom registered control into another user control.
I have done multitudes of research and having seen various ways to get around this, the best of them being [WebMethod] and controllers. However the project I am working on is NON-MVC.
I am also attempting to use UpdatePanel controls to minimize postback to the entire page but have had little success.
What can I use as alternatives? I feel like I'm running out of options or am missing something very basic here.
TL;DR -- I need a non-MVC method to pass data to user controls that can distinguish between multiple controls. Cannot use pagemethods(or page). Manual ajax calls are not working out. Cannot afford to do a full postback
Take a look at:
updatepanel vs page methods
Based on this:
My problem now is that I need to start using many user controls one page -- and so now whenever ANY control does a postback ALL of the controls go through a page load.
This might sound simple but have you tried to use if(!this.IsPostBack) in your load events?
Well not, the only way to avoid this situation, is using PageMethods or create a Script Service to handle AJAX requests (Web services with the ScriptService attribute or WCF REST services)
Note that even if you use the evil UpdatePanel, absolutely all the page life cycle will execute, which means that the whole page viewstate has to be sent in each post, the only advantage of using UpdatePanel controls is that you gain partial rendering, that's it, the performance on the server side doesn't change at all.
So you could use PageMethods or Script Services. But there's a catch, if you start using them you will notice an incredible performance change, your application will be more responsive (RIA applications), but the catch is that you won't be able to use the benefits of the ASP.Net server controls such as GridView, Repeater, etc. In other words you would need to change most of your view controls (this is the approach followed when working with MVC applications)
You can create static methods on your aspx page and mark it with [WebMethod]. Then you can call the method using jQuery ajax from the user user control markup. Take a look at this blog
If this is too hypothetical and needs to be somewhere else, please let me know.
I have a project that needs specific gridviews to appear on multiple pages. Instead of copying and pasting the gridviews on each of the pages I thought creating a user control for each specific gridview or create a page for each gridview and then use iframes would be my best options.
I have not used either extensively so I am looking to the SO community's experience, are there known problems with using user controls and/or iframes when it comes to:
validation
communication between user control/iframe and parent page
ajax/updatepanels containing user control/iframe
thanks in advance
Since a gridview is essentially a user control (that's very flexible), I would first explore doing this with neither of your options. If possible, use the standard gridview and let your data layer do most the work. However, assuming you already know that... but your requirements require one or the other of your options, here are things to consider.
An iframe is easy to implement but unless your need is really simplistic in terms of user interaction, the user control will be the most flexible. Another downside to an iframe is it's size (you're essentially loading two pages). The downside of user controls are the upfront time in building them.
Based on your criterion:
1. validation - can do with either option but you'll have more flexibility with a user control
2. communication between user control/iframe and parent page - much easier with user control unless query string parms will do the trick
3. ajax/updatepanels containing user control/iframe - again user control
I am working on a B2B portal web app, where i need to display upcoming news , products and company info on regular interval (say as slideshows and tickers).
For example :
Scenario 1. I need to display the latest company(registered in this week) in a marquee style. Where companies will be pulled out from database.
Scenario 2: I have some products categorized as hot products, that will be displayed as slideshow on the home or somewhere else.
I know using Jquery and Static pages its possible. But i havent idea about how to do this with ASP.Net databaound controls like grid, repeaters, datalist etc. We are not in favour of purchasing third party controls, instead it will be a last resort for us.
Please help me through buil-in controls. Any help will be highly appreciated.
You should decide whether you want to do with JQuery Widgets or ASP.NET controls (or third party ASP.NET controls like Telerik). Can you use both - yes you can, but you are only going to add more complexity to your app because ASP.NET controls don't know about your JQuery Widgets and you have to provide the glue to tied them both and keep them synched up. So if you decide to build everything in JQuery - convert your static html pages to .aspx pages then add additional serverside functionality to return the data. For AJAX behavior, you can use what is called Page Methods in ASP.NET or write seperate Script Services. You will make use of what is called a ScriptManager. That way you can keep your existing markup and rely on ASP.NET to provide you with Data. The other alternative is to convert everything to ASP.NET Controls - and rely on the builtin or third-party control suite to provide the functionality.