Call code behind c# function from javascript - c#

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.

Related

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

Dynamically add textbox in asp.net

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.

How can I handle text boxes that are created by the client/javascript, on the server

I have a textbox in a form that collects a name. If the client decides he/she wants to add more names they would click add more and another textbox would appear.
If the client created 15 text boxes how can I work with their values on the server? Let's say that I name the first textbox, txtbox1, and each additional textbox would have an incrementing number.
Could I use the same naming convention that Asp.net assigns, figure out how many textboxes are on the page, and loop through them, or would they have to be initially rendered by the framework to begin with?
The HttpContext.Current.Request.Params have the parameters of all submited values, even those you created using javascript, as long as the value of the text box is sent from the client to the server of course... I mean, you need to add the client-created textbox to the main form element being submited.
You can make a naming convention yourself, but take care not to collide with Asp.Net conventions as that could be trouble to you... lets say: MyTextBox_1, MyTextBox_2.
You can then iterate the HttpContext.Current.Request.Params, and see wich keys start with "MyTextBox_" and read all of them.
EDIT: better yet you can use HttpContext.Current.Request.Form, because this contains only params sent submited in the form.

Saving data on a web page when switching from one page to another in ASP.NET?

I'm new to ASP.NET. I'm designing a user interface in Asp.NET and C# where the user can login and then launch an application. When using this application the user has to fill out a form that is 10 pages long.
So, I have used navigation menu and designed the interface in such a way where every page is different menu item and it is a static menu. The user fills out the details on the first page of the form and saves it and the data gets saved in the database.
The problem is he moves to the other page by clicking the menu tab; when he comes back to the first page by using the menu tab for that page all the filled in data is gone and he sees a blank page. I know that is how it works but I want it in such a way that in one sitting when he is filling out the data on the second page (after filling the data on first page) on reverting back to the first page he should be able to see the data that he had filled out.
What concept can I use? I'm not sure view state will be helpful in this scenario.
You should look into using the Session State variable for storing his information over the entire session. If the user is logged in you should think about storing his information that he enters in a database and having a Boolean state of "ApplicationFinished" to check if he has finished it or not. Otherwise I would have a call on each page to retrieve information from the database that has already been added, so that he can fill out information at different sittings or all at once.
http://msdn.microsoft.com/en-us/library/ms178581.aspx
Session State may be too long term for you, and if that is the case do some research on ViewState. There are a lot of different ways to tackle a problem like this. It all depends on which technology will fit your needs the best.
http://msdn.microsoft.com/en-us/library/ms972976.aspx
Also, if you're using a tab system think about using the AJAX tabs so that the data will remain on the forms even while tabbing through the different tabs.
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/
Well, if you are write the data on database, i guess the best (fast) workaround is to add a column named "completed" to the table the hold this informations. If the flag "completed" is not setted to 1, you load the database information and fills the page controls.
When you create a new record in the database, get the ID of the record and set it on Session. If the user gets back to the first page (previous page), you can recover the information ID and load the data.
As long as you are learning new things... add jquery to the list and leverage the JQuery Wizard Plug In. It will allow you to integrate your "10 page form" into a single unit, which can then be sub divided, routed and managed more easily. You can leverage AJAX to save each step, while offering built in navigation and validation methods.
I would suggest that you switch to using client-side javascript to control your tabs. That way your form data stays in the fields when you switch back and forth between tabs. You can use javascript buttons to guide the user from tab to tab.
I've done this using JQuery. I actually had 150 fields that needed to be captured (they were all required). I group like data on different tabs and then had buttons ('< Previous', 'Next >') which would activate different tabs.
When they are done, then display the 'Save' button.
This not be what you are looking for, but if your problem is that you want all of the input of a previously filled page to show up when a user navigates back to it, and you have already saved all that information, then you can try something like this:
HTML
<input type="text" id="yourID" name = "yourName" value = "<%=data%>"/>
Then all you need to do is set data to public in the code behind. Then to get the value for data just make a call to your database.
Make sure that you make data empty on the init call public string data = ""; or whatever type it is. This way if there is no info, then it will be blank, and if there is saved info, then it will be filled in.
You can also attempt to pass all the data through params in the url like so:
C#
Response.Redirect("webpage.aspx?data=" + data + "&data1=" + data1);
Or though javascript:
window.location = ("webpage.aspx?data=" + data + "&data1=" + data1);
To get the request do this:
if (Request.Params.AllKeys.Contains("data"))
{
data = Request.Params["data"];
}
This way is less ideal though if there is a lot of data being passed.

Storing a collection into a list and session - Front End

I have this program in which I am trying to store a collection of values into a list and session
Example:
valueCollection = (List<Values>)Session["Value"];
I want to do the front end in a way which will show a table with each row showing a label and textbox. This would be too simple to do obviously but I want it to show 4 rows of the table by default and then the user can select "add another" this will then add another row onto the table with a label and textbox exactly similar to the 4 default. Everytime the user selects "add another" the table increments by 1.
How do you do something like that, or is there an easy way?
Here is a screenshot to explain it better:
http://img828.imageshack.us/img828/9986/idead.png
The basic idea is that you bind a control to your data and provide GUI controls to allow users to add/edit/delete records. Once the records are modified you re-bind the control to see the changes.
Take a look at the Databound controls in the .Net Framework. For a quick first pass you could use a ListView - a control which provides built-in functionality to automatically generate and mange the add/edit/delete GUI elements.
In 'real world' usage, storing big datasets isn't a great idea as more users = more sessions and each session uses server resources. You should really be getting/storing your data in a database or perhaps an XML file.
HTH

Categories