Modifying GridView data using Jquery doesn't persist back to Server events - asp.net

So i have an ASP.NET GridView control in which each column is a 'BoundField'. I did not create a TemplateField(ItemTemplate/EditItemTemplate), because i was planning on using JQuery to convert the BoundField row to a 'Edit' field by just converting the text in each cell to a textbox or textarea when that row was clicked. This is done all client side.
So far all the client side stuff works great. But I have a 'Save' button on each row of the grid that triggers an eventhandler on the server side. In that server side method, i try to grab values of that current row, but they are all the OLD cell values before I modified the fields/data using jquery/javascript.
When i iterate through each cell of the row, it's the same state as it was when it was rendered.
So what i'm trying to understand is. Why do all of this fancy javascript/jquery stuff when the state of the Grid stays exactly as it was when it was rendered when posting back to the server ?
someone please shed some light on this!!!
Thanks!

The GridView controls uses ViewState to persist its state between postbacks. When you do a postback it loads its previous state from the ViewState. Changes that you do via client-side Javascript are ignored. This is simply how the control works.
If you want to keep using the GridView control with inline editing, the easiest option would be to move to edit mode via a postback.
Another option is to have the fields in each row to begin with, only hidden. Then, you could show them via Javascript. You'll be able to access the values on the server.
Yet another option is not use a postback but an Ajax call, so that the grid is not re-rendered when you click the button. But that means you would have to manually collect the values from the grid via client-side code and pass it to the server.

Related

How to keep options in listbox after a postback?

I have (1) dropdown list, (2) listboxes, (1) button on a page.
The listboxes start out empty, but it is filled via jquery/ajax on the dropdown list change.
When i click the button it causes a postback and every time it does the contents (options) within the listboxes are removed.
Questions:
1) WHY does this happen?
2) HOW do i keep the contents of the listbox from being removed? No options in the listboxes are selected
The content/state of form controls are stored in view state that is created on server side by asp.net engine. The elements added on client wont be accessible on server side. You can put the content data in the hidden field in javascript and get the data back on server side from the hidden field and assign to control like listbox, dropdown etc. This is how asp.net also works.
This happends because since you add the values with AJAX, they are not added to the ViewState, which is what asp.net uses to persist the state of the form. Your best option is probably to use AJAX to avoid a postback or load the values on your page load event only if it's a postback.

ASP.NET custom server control not retaining values after post back

I have a custom server control (composite control having dynamically created dropdown boxes and textboxes). I have enabled AJAX in order to avoid page reload.The server control is used inside the ASP.NET webcontrol having few buttons which controls the visibility of the server control. Now I enter values in the dropdown box and texboxes and click on any other button. After this postback the last entered values are gone! The control is not remembering the values. Can anyone help me? How can I retain the values after post back?
Ensure that the controls are given the exact same ID after each postback. Also you might want to try initialising your dynamic controls (DropDownList and TextBox) during Page_Init if possible.
If your custom server control is create dynamically all the controls, then you need to recreate them on every post, and you need to create them before the Page_Load(), or else the asp.net cant know them to filled with the post data.
To solve this, if you can not create them before the Page_Load(), then you can fill them by your self with the posted data by using the Request.Form[YourCustomControl.UniqueID] for all controls.
You need to re-create on each postback, see This article

How to retrieve values of dynamically created controls in code behind?

I intend to use Javascript to dynamically create a group of html elements (input boxes, select list, radio button, etc.) each time the user clicks "Add More" button.
I have found the Javascript that does that here:
http://viralpatel.net/blogs/2009/01/dynamic-add-textbox-input-button-radio-element-html-javascript.html
http://forums.asp.net/p/1611284/4118564.aspx
So how do I get the values of these dynamically created HTML elements from code-behind? Is there a JQuery way which is better?
Thank you.
I think you'd may be able to do it with a callback/async postback to your ASP.NET page to update the control tree as you update. Not sure how the ViewState is updated/affected by this.
Otherwise, because your messing with the ViewState, so you'll need to revert to accessing them by the Request.Form object.

Passing data to server code from a client-side control using ASP.NET AJAX

I have a ListView on a page that displays a list of widgets. When a user clicks on one of the items in the list, I want to display a ModalPopup that contains controls allowing the user to operate on the item they selected.
I could easily accomplish this by placing a Panel and a ModalPopupExtender in the ListView's ItemTemplate, but this mean one set of hidden controls for each and every widget, which would massively bloat the page size. (There are going to be some rather heavyweight controls in there.) Instead I want to reuse a single ModalPopup for each of the widgets in the list.
I've done some searching but I haven't found anything that applies directly to my situation before. From what I've been able to figure out, however, I have to do something like this:
Place a Panel and a ModalPopupExtender on the page inside an UpdatePanel.
Build a custom WidgetManipulator user control that has a WidgetID property. Put this in the Panel, along with a couple OK/Cancel buttons.
In Javascript on the page, attach a click handler to each widget in the ListView that triggers a postback on the UpdatePanel.
On the UpdatePanel_Load event on the server, display the ModalPopup and then set the WidgetID propety on the WidgetManipulator to the ID of the clicked widget.
On the OKButton_Click event or CancelButton_Click event on the server, hide the ModalPopup. If OKButton was clicked, call WidgetManipulator.SaveChanges() first.
The part I haven't figured out is: How the heck do I know what widget was clicked on, and how do I pass that back to the server when I refresh the UpdatePanel? Is this even the right approach at all?
If you can use jQuery instead you could do something along the lines of these two posts:
Modal Delete Confirmation Version
Two Using jQuery SimpleModal Plugin
Demo
Inserting Content Using
jQuery SimpleModal Plugin Demo
When I need to pass data from client to server in ASP.NET AJAX, I generally use an asp:HiddenField with runat="server". Both can see it freely, but beware potential postback asynchronicity.
Sounds like you need to notify the server the widget was clicked - You may use a Timer to postback; or I'd go with option 5.

ASP.NET Dynamic Page Controls: Is it possible to bind events AFTER Page.Load?

I have a site that I am currently working on in ASP.NET 2.0 using the usual WebForm stuff and ASP.NET AJAX 1.0. Is it possible to bind an event to a dynamically created control after the Page.Load event?
I have a table <td> element that I am dynamically creating similarly to this code:
' Create Link Button
lnk.ID = String.Format("lnkDetails_{0}", dr("Id"))
lnk.Text = dr("Name").ToString()
lnk.CommandArgument = dr("Id").ToString()
AddHandler lnk.Click, AddressOf DetailsLink_Click
cName.Controls.Add(lnk)
This this code is looped over for each row in a database (and of course more cells are added to the table, including an ImageButton with an event. The events work flawlessly when I execute this code during events leading up to and including Page.Load. I need to be able to fill this table with current data, which is updated during a btnClick Event elsewhere on the page, which occurs after this Page_Load event, so I am populating with old data. If I change this code to Page.LoadComplete, events stop working.
This data is a summary display of various components of an application, things like somebody's name, which when updated on a 'detail' form, updates the database by partial postback (a requirement), then it needs to show the update in this 'summary' section after an update. Currently it takes 2 postbacks to actually see the change in the 'summary' section, so effectively the summary is 1 step behind the changes (clear as mud?)
What would be the best way for me to populate this table with current data (which is available during/after Page.LoadComplete), but still have an event fire when a link is clicked (the event causes an UpdatePanel to display the 'detail' form).
I also have jQuery at my disposal and the usual ASP.NET AJAX methods, also javascript is a requirement for the website, so I do not need to degrade for unsupported browsers.
This is my first ASP.NET web application and need some help figuring out the best way to make this happen (I'm well versed in PHP, Django and the usual ways to do web forms - things like having multiple forms on one page o_O).
Update:
There really isn't a good way to bind control events to controls after Page_Load. The overall architecture of the pages is there is one ASP.NET form encompassing the entire page, there is only 1 aspx page. I am using master pages (however it doesn't have any obvious implications to my issue).
The page is split into a left and right 'pane', the left is a summary of all the data (in an update panel), the right 'pane' has 6 'tabs' implemented each as their own user control, each with several form fields and an update button all in it's own UpdatePanel.
An update on any of these tabs only refreshes the summary panel (UpdatePanel.update()) and its own panel. The 'refreshing' and event binding of dynamic controls of the summary from the db happens during Page_Load and the Update Button event updates db data. (The control event happens after Page_Load). I want to avoid doing a double post to get the summary to update, any thoughts are helpful.
You need to postback the whole page after your data changes in the 'btnClick Event elsewhere on the page'. It sounds like you have an UpdatePanel and it sounds like this is catching the postback of your btnClick event handler. Put the btnClick outside the UpdatePanel or change its triggers so that your btnClick forces a postback/refresh of your data. Or, redesign your table so it's AJAXly-refreshed when you click on btnClick, it's hard to get you more details without knowing more about the structure of your page and controls.
Good luck!
You can bind to an event whenever you want. It's just a simple event after all. But not all places might be suitable because you have to take into account when the event fires. And in most cases this happens between Page_Load and Page_PreRender. That includes the click event on a LinkButton. In general, I would recommend to add your dynamically created controls in the Page_Init stage.
You have to add the controls before Page.Load in order to maintain ViewState between postbacks, so use the OnInit event handler for that.
But once they're added, you should be able to bind event handlers (such as OnClick) at any point during or after the Page.Load... for example in your grid's ItemDataBound (or something like) or in the Page.PreRender.

Resources