Dynamically add textbox in asp.net - c#

In my page, i got two column and multiple rows. The first column contain the label such as question for the 1st row, and the options for the questions. And the second column is the textboxes. When i click on add button, i wish to add those controls to page which subsequently allowed me to add the value in the texbox to database. I did some research but most of them uses javascript or datatable. Is there any other method?

You don't specifically say what type of .net development you are doing, and your question is tagged with asp-classic, which I doubt you're using. [If you are please please stop] So I will assume you are using Web Forms.
While I don't agree with Inerdial's position that you should avoid dynamic controls at all costs, I will say it does make things much more complex and requires a very good knowledge of the ASP.net Lifecycle. If you truly want to go down that path, here is a great resource.
With that said what you are describing to me does not appear to need that and his suggestion of setting the control visibility to false is a good one.
You could create a row, a panel or a div and output the controls that you need when adding a new row and set it's server-side visibility to false whenever you don't want it displayed. Then you could have a link that when clicked it toggles the visibility to true and will allow the user to add items. Once users add items they'll be displayed in your data table and you can reuse the form to add additional items.
I would also like to encourage you to consider JavaScript if it isn't an overly complex form. It eliminates an extra round-trip to your server and in general is a better user experience.
Edit: This link may also be of use to you.

Related

How do I display the value in the Textbox

How do I display Price value($) in textbox next to a label when user checks the radio button, select one of item from listBox, and then clicks the button?
Is there way to do it on the form1.cs[Design] using the properties? Or do I need to set them up in code level?
listBox item example
EDIT: Solved this in Code-level.
I don't think you can do it without any code.
Also I'd recommend you to check out this page - just a few simple rules can make your chances to get a good answer on this site much better.
And there is not much of coding needed to solve your problem. Take a look on the Events tab in Property view in form designer. A few event handlers to process user input and some fields inside your class to store the data - I assume it is not some serious business app you're dealing with, so all the code you need for this to work would be like 20 lines tops -)

Dealing with multiple "chained" postbacks from dynamically-created controls in a single page

I'm trying to build a very specific search page for a project and I'm having lot of trouble dealing with multiple postbacks invoked by dynamically-generated controls on a single page.
The page has to work like this:
There is a single checkbox, "Detailed search", that causes a postback on checking/unchecking.
When detailed search is not active, a simple grid with contents and buttons is displayed. Nothing special.
When detailed search is active, N checkboxes must be generated from some dynamic data, that represent the sections where you want the search to happen. Below the checkboxes, an AJAX-enabled tab control will appear, initially with no tab pages.
When checking one of the section checkboxes, a postback will occur. After the postback, data will be searched in the section selected by the user, then a new tab page containing a grid view of results and the name of the section will be added to the tab control. If the checkbox is unchecked, the tab page will disappear from the control, again, after a postback.
Now, the issue is that pretty much everything has to be generated dynamically, and that pretty much everything is connected to something else.
First issue: dealing with the "Detailed search" checkbox. Sounds easy, doesn't it? My initial idea was to set Page.Viewstate["DetailedSearchEnabled"] to true or false during the check/uncheck event handler, then create controls dynamically checking the value of DetailedSearchEnabled during Page_Load.
Nope. The postback event-handling happens between Page_Load and Page_LoadComplete. It would take an additional refresh for things to work as intended.
<< Then I'll just generate the controls on Page_LoadComplete! >>
Nope. Those controls need event handling as well, and if they're generated after Page_Load they will not be wired up correctly.
A possible solution would be generating everything in advance, on Page_Load, and only hiding/showing controls on Page_LoadComplete. But that is inefficient, and one important point of this search page is that only the minimum amount of controls should be generated.
The difficulty of this task seems to come from the way event wiring and the page life cycle work.
Surely there must be a better way of approaching this problem.
First issue: dealing with the "Detailed search" check box.
The correct approach (if you want to use page post-backs) is as follows:
In the CheckChanged event handler, save the value of the Checked property to ViewState["DetailedSearchEnabled"]. If the value is true, add the dynamic check boxes to the page. If the value is false, find and remove them.
Override LoadViewState. After calling base.LoadViewState, re-create the dynamic check boxes and wire up their events if ViewState["DetailedSearchEnabled"] is true. Note that neither Page_Load nor Page_LoadComplete is the appropriate place to do this.
Yes, you should create the dynamic check boxes at two points in the page life cycle. I recommend a helper method.
In general, your event handlers should add or remove just the dynamic controls (if any) affected by those particular events, but LoadViewState should re-create all dynamic controls that existed from the previous page request. You must store enough information in view state for LoadViewState to do so.
My answer to this other question demonstrates how to add and remove dynamic controls. You may want to use it as a reference.
Sounds to me like you should be using a CheckBoxList control to handle your dynamic checkboxes. You can add an remove items to the CheckBoxList during your post back and not have to worry about dynamically adding/removing actual controls/events to the form.
Here is a link to the msdn:
https://msdn.microsoft.com/en-us/library/14atsyf5(v=vs.85).aspx
Here is some sample code:
Protected void Button1_Click (object sender, System.EventArgs e)
{
CheckBoxList.Items.Add(new ListItem("TextValue1", "Value1"));
CheckBoxList.Items.Add(new ListItem("TextValue2", "Value2"));
}
If all else fails, you could still fall back on the quick-and-dirty old-fashioned ASP way.
Use Response.Write or <%...%> to generate your dynamic controls as plain old HTML (simple form fields, e.g. <input type="checkbox" name="foo" value="1" />).
Make sure you have a form field for every piece of information you may need after the postback(s). If necessary, use hidden form fields to 're-post' values across subsequent postbacks.
After postback, retrieve the values of the controls with the Request object.
Use those values to adjust the generation of controls as you see fit.
You should be able to do all of this in Page_Load. The advantage is total freedom. The disadvantage is total freedom to make a big mess of your aspx. So you may want to migrate all this dirty code out of your aspx, and into a custom-made control, which you can then add to your aspx.
When generating your own HTML, be careful not to introduce XSS vulnerabilities. Use HtmlEncode where necessary.
As you suggested yourself, there is a better way to tackle it.
If I was in the same situation, I would create web methods for interacting with the page, and use client side to do the UI. I'm currently working mostly with angular JS, although it does come with a learning curve. You could use ng-hide/ng-show to bind to the checkbox event to display the detailed search. When the n number of checkboxes needs to be displayed, you can then just fill them in with ng-repeat, for each of the items you need to display, after a check/uncheck you can dynamically populate new controls etc. through web method calls if extra data is needed.
Pure ASP postbacks are quite clunky from my experience, and not really suited for building a maintainable dynamic UI.
Instead of making so many postbacks, it would be better to use jquery and ajax calls to load the controls as needed and then attach events to it or you can even use UpdatePnael for that. Help Links:
https://www.simple-talk.com/dotnet/asp.net/ajax-basics-with-jquery-in-asp.net/
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

How to dynamically add a dataentry form in asp.net webforms

I have to create a data entry form in asp.net webforms where the user could enter several member details. Each member detail will have about twenty data items such as FirstName, Lastname, DateOfBirth etc. The number of members entered can be anywhere from one to say twenty.
Once all the members entered or during the entry process, they should be able to go to the previous or next entry and make changes. Essentially there should be a Next and Previous buttons which will traverse the pages. At the end when the Save button is clicked all the entered data should be saved.
I have created a UserControl, which has all the textboxes to enter data. I have created five hardcoded panels which display the usercontrol five times. This makes the total members that could entered as five.
I would like to replace this hardcoded model with a dynamically added panel, when the next button is clicked.
Please let me know how this could be achieved. Or if there is a better architecture please let me know. I tried the wizard control, but it was too cumbersome in maintaining the previously entered values and traversing data using Next and Previous buttons.
Thanks
You could add the controls dynamically to the page using:
Page.Controls.Add(new MyControl());
You'll have to find a temporary store for the data entered in the controls though such as Session.
Session["addedControls"] = myControls;
You can track the number of controls they add and then loop though and save all the data to whatever permanent store you're using.
There's an example of this here: http://howto.jamescarnley.com/2008/05/adding-fields-dynamically-in-aspnet.html
Storing the entire control in session does have it's drawbacks such as the overhead involved, you could just store the data which is more efficient but is a tiny bit more effort to implement.
This will also only work if they have cookies enabled.
Alternatively you could have a drop down list for them to select the number of entries they wish to make and display that number of controls by calling Page.Controls.Add the number of required times. Then just save them all in bulk at the end.
You could dynamically add the controls you need to input a new member easily enough in javascript. What you propose sounds like a nightmare to me. I'd put up a page with the controls to add a member and an 'Add Member' button. When the Add Member button is clicked - I would save the member to the database, retrieve a list of members added in this session - and display the names of the members in a list to the right of the 'Add Member' area of the page. If they want to review a member they can click on their name and you can show that member ready to be edited. Or they can add another member until they have finished. What you are trying to do is going to be a nightmare to manage and won't be any easier for the user to use.
Using dynamic controls will be very difficult and not user friendly as it may require refresh the page or using update panel
in your case, I would recommend doing it all from JavaScript using Knockout, This is a full sample Knockout Grid
Make sure after adding or editing the grid, you will serialize the JavaScript objects into string using JSON.Stringify and add this text to a hidden field.
On form submission, just get the hidden field value, use newtonsoft json library to convert the string into an object and fee free to use the object which will be a list of your model (ex: Order).
Compared to dynamic controllers, this is more manageable and user friendly

Call code behind c# function from javascript

I know this has been asked, but none of the numerous answers fit with my situation. So I will humbly ask if someone can walk me through this again gently.
Environment: .Net 4 web app using c#, javascript, jquery, sql server, and entity framework.
Question: I need to be able to allow a user to "quick add" a value into a table that is bound to a drop down box without losing values a user has already entered onto current page. I don't care if I have to do a postback or use jquery or use ajax, etc. I need the functionality first - prettiness later ... the scenario is described below if you care to keep reading. With all that being said, I would love for this to be smooth and not "clunky" for the user.
Scenario:
I have a page where the user is able to enter many pieces of information into textboxes, static drop down boxes, and drop down boxes that are bound to other tables that will all get combined and inserted into one table. Well, it never fails, a user could be filling in the page and when they get to one of the table bound drop down boxes - a value is missing or they haven't added something item yet. I would like to add a button or link or something next to that drop down box that would allow the user to "quick add" an item to the table that fills that drop down box and then refresh the drop down box so they can choose that new value from the list ... all while not losing the other data on the screen they already entered.
What I've tried:
-Tried WebMethod option. Currently, this web page calls some custom "bind" methods in the code behind to fill drop down boxes so they are not filled directly from objects from entity framework. So that means using a static method will not work for a solution because part of the static function would need to call the bind method to refresh the drop down box with the newly inserted values.
-Tried PageMethod option. Some of the other samples used Page Method settings, but my site uses master and content pages and the posts seem to state that the page method route was not going to work.
Make sense?
Add an UpdatePanel to the page. The update panel should wrap the drop down to be added, as well as the textbox/button for adding a new entry to that drop down. You would want to have a different UpdatePanel for each dropdown/button pair, if applicable.
When they click the button inside of the update panel you can read the textbox, add an extra item to the drop down, and send an update to the database. (I'd manually add the new value to the drop down rather than updating the database and re-binding, if possible, but it may not be.)
The magic of UpdatePanels will make sure that this is all asynchronous and so doesn't disturb the user working on the page.

Gridview and Column sets

I have a Gridview that is data bound to an array of objects, with a ton of properties attached to them. The grid would need to be too wide to show all of them at once (and also overwhelming for the user), so I'd like to have some link buttons that post back to the server and show different sets of columns (all from this same data set array of objects), based on what "tab" the user clicked.
In the GridView I use TemplateFields to bind the columns to the object properties. What would be the best way to implement the different columns and views?
Should I just bind all the data, and then on the post back event for a tab press, show and hide only the columns I need for that tab? This seems like since it would be binding a lot more data than I am showing, that it might be unnecessarily slow.
Should I dynamically create the columns before the binding, and only create the columns and bind the data for the columns I want to show? What is the performance hit the page would take for dynamically creating the columns each time based on which tab was pressed?
Thanks!
If you have that many columns, you may want to think about using a different control instead of a gridview. A DetailsView with paging would probably render better and be more manageable for the users.
To answer your question, though, I don't believe option 1 would be that much of a performance hit. And I believe that option would be less strenuous than option 2. That mostly my opinion, though.

Categories