asp update panel and JSON with Ajax - asp.net

i have a qeustion on design decision
i have a aspx webform that has two dropdownlist
one of them are set to autopostback in order to generate values in the second dropdownlist.
my lecturer told me that i can use json with ajax to improve the postback.
however i googled online and come across the asp updatepanel function.
i want to ask , does the two works like the same ? if i have to use json with ajax, do i have to write the page in traditional html instead of html with asp controls ?
what are the pros and cons to this two ?
Thanks,
WuSen

see this link What are the advantages of jQuery Ajax vs UpdatePanel or even you can find more here http://codingstill.com/2012/02/asp-net-and-ajax-all-about-update-panels-web-methods-page-methods-and-jquery/

Related

ASP.NET (webforms): Using with MINIMAL server controls and substituting with JQUERY?

I am currently working with ASP.NET and the person who designed the form has used all Server Controls for things like TextBoxes and Dropdowns etc when really they are not providing postbacks.. Some of the dropdowns and textboxes are values that I need only in jQuery so as far as I can see there are no drawbacks to coverting these controls to standard html controls rather than ASP.NET server controls?
I suppose I will need to continue to have my GetDataGrid button as a server control because I will need it to postback (and receive PageLoad events etc - all asp.net events) to update the GridView? Or would it be possible to use the GridView (ASP.NET server control) from a Webmethod and call it via Jquery?
Of course in my webmethod I would need to the instance of the gridview to add the datasource - but I don't see how this would be possible without being in the ASP.NET events - or maybe I wrong?
The other thing I thought of was changing the GetGridView button to a standard HTML and calling the javascript postback from the client click event?? This way it would do a real postback and I would end up in Page_load.
Taking everything into effect i don't want to the change the GridView asp.net control as it funcions well as an asp.net server control but i am unsure how i would do this.
I remember a document being available that said "how to use asp.net webforms without server controls" but i can't seem to find it. I suppose using webforms like asp.net MVC - but i can't change the project to MVC - its out of my control.
I would love to hear some feedback with regards to how to do this or comments etc.
I find ASP.NET webforms to inject a lot of code smell into pages - I am using .NET 3.5 so a lot of the output is with tables etc...
If you use Request.Form["..."] then you can get the information which was filled in in standard html input fields.
Instead of keep on using the GridView control I suggest you take a look at either jqGrid or the new templating system that Microsoft put into place for jQuery (currently a plugin but expected to be part of core jQuery from version 1.5 on). These can bound to json which can be retrieved from a webmethod or pagemethod call to fill up the template with data.
Also i don't think its possible from asp.net (code behind) to receive values of an html >control without it having runat=server.
Use webmethods.
Set a client event (like 'onchange') on the html control and then in javascript function called when the event is fired you can use PageMethods to send your data to the code behind.
Some thoughts...
The GridView can't be created in a WebMethod and even if there was a way to get that to work, you'd be better off going with a genuine client side grid. As that's not an option, I don't think there is too much point in trying to make any major changes to your existing pages.
ViewState
Changing the textboxes, buttons etc to HTML versions, would gain you a little bit in reduced Viewstate size but add a bit of complexity in how you handle interactions with the page. You can add runat="server" to HTML controls which will give you control over what is rendered and still have access to the control on the server side.
.Net 4 gives you far more control over viewstate but unfortunately in 3.5 its not as easy.
The GridViews
You could wrap the GridViews in UpdatePanels. That's a 'cheap' way to add some interactivity to your pages although you won't be gaining anything in terms of performance.
It's also still possible to manipulate the Gridview using jQuery on the client-side. There a lots of tutorials, blog posts etc explaining how to do this on the Internet.
MVC with Webforms
Its also possible to mix ASP.Net MVC with Webforms in the same website. As it sounds like you are familiar weith MVC, you might want to consider this approach for any new pages. Here's a blog post explaining how to do this.
Update:
Here's a more recent article by Scott Hanselman on how to use MVC with an existing Webforms application.

asp.net gridview ajax

In Ajax,is there any technique exist to validate ASP.NET GridView, i.e., to check whether the GridView contains at least one row?
Any comments welcomed.
I assume you render the GidView on the page. If I get you can check it using Javascript/jQuery on client side...
If you want to check it on the server side you have to call a method on the .aspx page using Ajax. In this case you should create a static web method on the page that check how many rows the gridview has got then you have to call that method using Ajax or jQuery
http://www.singingeels.com/Articles/Using_Page_Methods_in_ASPNET_AJAX.aspx

Ajax in existing asp .net project

I have a web page devoloped in visual studio 2008.
I have 4 dropdowns and a repeater in the page.based on the selection(search criteria) from the dropdowns the repeater value will change.
and one dropdown selection will bind values to the other dropdown also.
Since the page is causing a lot of postback we decided to implement ajax here.
I am yet to learn ajax.
Can anyone tell what is the best way to do this .which ajax control replace dropdowns?
i have already server side code written on all dropdowns.
Please give me a good solution which i can implement in less time and reuse my code.
One more update: i have a master page used in the project.
I am using update panel of ajax which does not work if i use master page.
(That means all the dropdown controls and repeater i put it in update panel.But still page postback occurs.)
In a normal page(without master page) it works? why is this happening?
Thanks
SNA
You are able to use UpdatePanel and place dropdowns inside it.
Your solution will depend on the AJAX framework you choose, but here are cascading dropdown examples in ASP.NET AJAX and jQuery
If your main reason for using AJAX is to remove the number of postbacks you are getting, then I would recommend against using Microsoft's built in solution, e.g updatepanels.
The learning curve will be higher but learn to use jQuery, maybe with a little help from jTemplate to help you build your drop downs on the page.
Using updatepanels will not reduce your postbacks as behind the scenes asp.net is doing a full page life-cycle, sending all content back to your client but only updating the update panel. jQuery will be far more efficient. (and the reason I use it!!)
Update
If you don't believe me, see... Why Update Panels are dangerous
Update #2
If you don't want to go the whole way of learning Ajax just yet (although I'd recommend it) you could always pre-load your page with all the possible drop down combinations and then swap them using javascript / javascript + jQuery.
Here is one example of how you may do it -- use jQuery for dependent drop down combos
Using this method you are more likely to be able to save the code you've already written to work out the drop down options.

jQuery ASP.Net Webforms AJAX

I have a standalone webform (no masterpage) that opens in a div from another page. The standalone page uses jquery to move a user through a non-linear questionnaire. At the end of the questionnaire there is a result displayed with a "complete" button. When the user hits the complete button the result is sent back to the parent/host page of the div.
I have a new requirement where i need to actually pass the question and answer id's to code-behind or web service where i can insert the question and answer id's to my DB.
None of what i need to do requires object serialization. I want to do this as simply as possible.. none of the controls in the questionnaire are server controls.. just regular select boxes or radio button groups. I suppose i could do an ajax postback using an update panel or something but not sure if making the controls runat=server will screw up all the jquery/js i have working in the questionnaire.
Any help is appreciated thanks!
I would tackle this by using jQuery to post the data to a web service, which is fairly trivial. There's are a couple of code examples for doing this with asp.net here:
jQuery: Ajax call to asp.net webservice fails, server return 500 error
and
Calling a webservice through jquery cross domain
To answer your other question, putting runat="server" will not have an affect of jQuery's ability to parse the elements in the DOM.

asp.net 2.0: update formview with jquery

I'm struggling with an issue I just can find a solution for.
First of all, I can't use asp.net AJAX or anything else thant standard asp.net 2.0 as the server admin won't install anything else.
So here is, what I try to do. (For the curious, skip to the bold question below)
My page consists of several parts, each of which gets loaded by jquery.load(url). One of these page parts gets filled with an aspx that contains a form view. As I don't want to have postbacks, I switch to the EditTemplate of the form view by a simple click on a regular html button that submits a parameter indicating the aspx page to switch to edit mode, e.g.
Page_Load(...)
{
if(Request.Params["SwitchEditMode"]) SwitchEditMode();
}
This works perfectly! Now here the part where I'm stuck. The elements in the EditTemplate are based on a select from a database view and bound to the fields by <%# Bind("xx"). Then I have a html button (no asp control) that submits a parameter to the aspx page that tells it to invoke the DataSource update method. In the dataSource_updating method I look for the controls that contain the values I want to save. But these values are always the same, as when I switch to the edit view. No changes I make in the textboxes or dropdowns are preserved.
A long story short, the question how to save the values from EditTemplate back to the database with jquery?
Up to now I tried several approches, that didn't work out.
In the updating() method look for the controls by FindControl and set e.Command.Parameter["xyz"] = foundcontrol.SelectedValue;. The values are always the same as in the beginning.
Set <asp:parameter name="SampleValue" /> and in the EditTemplate <asp:TextBox Value='<%# Bind("SampleValue")#> The values are always null.
Set a hidden input field with the selected value via javascript. This doesn't work as the control within EditTemplate are only visible after the switch into edit mode
So maybe I'm totally wrong with my ideas, heading into a totally wrong direction and this can be accomplished much easier, but up to now I don't know how to achieve this. I could do it without ajax, but for the user experience I'd prefer the version with jquery.
For all that have read this far and not got confused :-), thanks for your effort!
Best regards,
Andreas
I would forget using a form view and just use a regular html form with regular input controls. Return an object from your web service that has all of your values and populate the controls with ajax and then subjmit with ajax. Either do fully asp.net or fully html/jquery with asmx back end. Otherwise it's just too confusing.
If you load both "modes" of the FormView into the same page using AJAX, you're probably getting duplicate field names. One of them contains the unchanged values which are being saved. How will ASP.NET know the difference? You only want to submit the ones from the EditTemplate, which will require a separate form (or some other hack).
Or perhaps your HTML submit button isn't giving ASP.NET what it needs to repopulate the controls. Are you using ViewState in the page with the FormView?
All in all, this sounds like a hairy combination of technologies... as you well know.

Resources