Manage state in MVC4 - c#

I have a page with around 20+ controls. Within this page I have a partial View which I am using to create an editable grid. This grid has Add New Row/Remove Row buttons on click of which data entered in the textboxes in grid row gets added to the grid.
Whenever I click these 2 buttons, my page is getting refreshed due to which whatever data is being entered by the user in the 20+ controls of main page is lost.
I have tried hopelessly searching for solutions quite some time, but still trying my luck out here. Any ideas are appreciated.

Well I recommend you to use full jquery mechanisms to add or remove rows. You can easily add or remove HTML elements. All you have to care about is to maintain the numbering system. I suggest you to use a view model that contains a list of objects that you need to add or remove. At first render it normally by providing list of objects (from database or other source, if required). After this define your add and remove buttons to type button and play with jquery to add remove table rows or even divs. After adding or removing required element, reorganize your numbering. At submit you can use either full postback or ajax postback. If Any confusion, let me know.

Related

C# ASP.NET - Dynamic MenuItems in a user control are randomly being duplicated outside of control creation

EDIT: I needed to skip control creation during post back -- see my answer below.
I'm working on a very basic front end to a simple tool and I wanted to present some data in a much more sorted and useful way, instead of making one huge wall of text. I found this tutorial on building a simple tabbed interface using MultiView, but have run into a bizarre problem. I can't use Ajax tabs because of legal hissy fits over 3rd party software.
My webpage is a basic ASP.NET page with a user control plopped in the middle of it. In this control's ascx file, I defined the Menu (empty) and the MultiView (also empty) so that I can dynamically populate the tabs with content driven from an external file.
When the default page's OnInitComplete function is called, I call through to the user control to load the data file, then build out the tabs and the view content based on the loaded data. I tried doing this from PageLoad, PreInit, and CreateChildControls, but I kept getting an errors saying that I was setting the the MultiView's active view index at an invalid time (and also that there were 0 views despite the fact I just added a bunch of them):
ActiveViewIndex is being set to '0'. It must be smaller than the
current number of View controls '0'. For dynamically added views, make
sure they are added before or in Page_PreInit event.
But OnInitComplete appears to work just fine, so I went with that.
I iterate over the loaded data (multiple lists of strings), and for each list, I add a MenuItem with the list's title to the Menu and a View to the MultiView. The View is populated with a table->row->cell as in the above tutorial. In the cell, I add the list title and a CheckBoxList data bound to the list of strings.
So far so good, but when I click on a tab (or one of the checkboxes, etc) and there is a postback or something like that (the screen flashes as the site redraws itself), there is now a duplicate set of MenuItems immediately after the original. Each time I click on a tab or checkbox, another set of menu items are added.
I clear the MenuItem's Items list prior to building the controls and I verify that the controls hierarchy is structurally as expected after the control construction. Yet when one of my callbacks is called, my MenuItem list magically has some items added to it. None of my other controls appear affected at all. As a hack, I can remove the duplicates manually in my menu's OnMenuItemClick event, but I'd have to do the same in any of the callbacks I receive. Obviously I'd rather prevent this from happening. This has me stumped and I haven't been able to find anything online about it. Why would one set of controls have some content duplicated, yet every other control maintain its state correctly? My code is really simple so there isn't a way to add additional menu items without also adding the views. Anyway, there are a correct number of items prior to clicking on the tab/checkbox, an additional set immediately following in the callback.
This is my first time using ASP.NET, so I'm learning as I go. :) Thanks!
My problem was that I was not testing for postback before creating the controls. The code below is working for me.
In my user control's code behind:
protected void OnInitComplete( EventArgs e )
{
if( !Page.IsPostBack )
{
CreateMyControls();
}
}

Add usercontrols dynamically inside a GridView

Here's my problem. I am trying to add usercontrols dynamically to different rows of a GridView.
Let me explain the scenario further. Let's say, I have a page where the user can place orders for different kinds of items. The order form for each item is different in layout and code, and has its own usercontrol. There is an "Add More" button, which lets the user add an extra row to the GridView, while the kind of form that gets appended is selected by the dropdown list (see picture below).
What I am trying to do is - have a separate UserControl for each one of these forms, and then have the UserControl added (or maybe I should say "bound") to the GridView. Every time a new row is added, I plan to re-bind the GridView, including rows from above, to maintain all the rows.
The problem is - the main page cannot know what fields there will be inside each individual UserControl (they can be anything, really, and down the road, newer UCs could be added). So my main question is - how do I bind the data to the GridView, when I do not know what to bind? Is there any way to bind the data from inside each UserControl itself?
I hope my problem and question are clear enough. Thanks for helping.

Navigation grid inside of a FormView

We have a list of elements we use to drive a form view. Typically the resultset is between 5-15 records. Right now in the form view we have the typical first/prior/next/last for navigation. The problem is that sometimes the user needs to go directly to a specific record to edit it. The records here are job tasks that have some pretty short descriptions.
The idea was proposed to put a gridview inside of the formview that lists all of the records for that form, and a user can just select view or edit on that record and it will navigate directly to that record and put it into the proper mode. We could put this outside the form view as well, that doesn't really matter.
The question is, regardless of the dirving force, how to I tell the formview to go to record X driven from something like an external grid.
I know that the formview has the DataKeyNames field but is there a way to say "Go to record who's PK is 17" given that it's in the current dataset for the formview?
If so, does anyone have any sample C# code for it? I know we could just populate the existing formview with a single record, but we also want to keep the normal navigation buttons in place as well, in the event as well (sometimes there's cases where there's hundreds of job tasks, in which case we'd supress the grid view -- sounds wrong but there's more to the business case).
This short solution was to embed the grid in the FormView ItemTemplate and reference the same data source for both.
To made the row editable, you need a simple callback for RowDataBound on the grid in which you will retrive the link button (or whatever control you're using to trigger the edit) and then set the command argument to the rowindex. After that, you need to have the callback for the link button (or trigger) that wil retrieve the command argument (again the row index) and then set the FormView PageIndex to that value, and then set the ChangeMode for the FormView to FormViewMode.Edit.
So to recap, for read only view it's a grid with all of the items, but when handle the edit or insert, you get the traditional form view.

How can I create/delete a table row with form controls using AJAX?

I have a table that has several fixed rows that contain user controls that have their own Update panels. I need to be able to create new rows within this table, each column of which contains a TextBox control. I don't want to just wrap the whole table in an Update Panel for obvious reasons, but want to be able to create/delete the new row(s) without a full postback and have the TextBox controls registered/de-registered to/from the page, without having to rebuild the entire table.
Any ideas how/if this can be done?
It can be done using a client-side approach, such as building the UI with JavaScript templating or an MVVM framework. You could also use a ListView that can be easily templated to render the initial shell, and additional rows can be added with JavaScript.
Or, wrap the whole table in one UpdatePanel.

C# gridview nested in repeater update

My current situation is to display an unknown number of Plantypes and within those Plantypes display a list of Participants(also unknown number), the participants have a textbox and a dropdown that is editable (you can't edit the individual rows, there is one update that does a bit of validation then updates all rows.)
I currently have a gridview nested withing a repeater, the repeater displays the Plan in a label and OnItemDataBound I call a method to populate the gridviews. It looks great, but I can't figure out how to save all the data at once. I'm not opposed to handling this a different way, as in loose the gridview and or repeater, if someone has a better idea.
This is C# and framework 2.0...there is no sorting or paging on the gridviews...just some links and the fields to update.
thanks in advance,
Padawan
HTTP is stateless. Since a user physically can only update one record at a time you should implement some way to save as the user goes. This can be a simple as having a row focus and row blur events and do the saves using AJAX on blur(unfocus). Maybe make is modal as they edit so they cannot leave the page without saving.

Categories

Resources