General concept regarding dynamic textboxes on the fly - c#

I am working on a project which has a requirement to build "pages" on the fly. A page can consist of various controls like textboxes, checkbox etc. Currently when the user wants to add a new textbox I make a ajax request and render partial view and return the HTML and show it on client side. This works but I also want to handle the data properly when these dynamic controls are filled up by user. In a way if I am not wrong I need to be able to make array of HTML controls. Now if we give static List to our view and generate textboxes using Html.TextboxFor we see that the name generated is something:
[0].FruitName
[1].FruitName
[2].FruitName
How do I handle this index part when making a Jquery Ajax request so that I always get the correct indexes and render it on client.
If anybody has any better solution than making ajax request then also please let me know. I need to handle the dynamic rendering of HTML controls and also access their values properly when posted back to server.

Take a look at Non-Sequential Indices at http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx.
He introduced a helper method to generate it as well.
Also, I think you can just pass an index with your ajax call which then gets passed from Controller to your partial view and use it to generate a proper indexed TextBox.
Update:
I've asked a very similar question at Submit javascript dynamically added elements to controller method like Stackoverflow

Related

C# MVC modify View HTML before rendering on browser

I was wondering if it is possible to modify a view HTML before sending it to the browser.
I wanted to create a custom tag compiler where i can insert a simple tag as <my-parsing-tag></my-parsing-tag> on the view and replace it for some specific HTML.
I'm already using OnActionExecuting and OnActionExecuted filters to execute some actions on the context (Change ViewBags, View names, Sessions, etc.), i also tried to do it there but i couldn't find the correct place to get the HTML, well i don't even know if it's possible to do so.
Is it possible or i would need to store my views HTML on the database to accomplish what i need ?
EDIT
As #Juan asked, why i need it:
I'm working with a call to action system where the user can place some specific modal campaigns on the page he wants just using those simple tags or selecting the page that will display it.
After that i will append the selected HTML to the view before sending it to the user. This system is intended for users that can't work editing the views since they don't work with HTML.
EDIT 2
After some research i have tried to implement a custom RazorView, the code is here with the Index View HTML, but now i have two problems:
The first one is that my Index View has some HTML that is coming from the database and is placed there using vars on my ViewModel and instead of the call to action HTML being placed at the end of my Index View, it's being placed before the ViewModel vars. The second problem is that the HTML is being duplicated instead of replaced. Here is an image of how the result looks like:
http://imgur.com/a/elul1
You could use an HtmlHelper extension for this:
http://tech.trailmax.info/2012/08/creating-custom-html-helper-in-mvc3/
I would suggest the following:
Define a container in your template (layout most likely) that will receive any content the user decides to "drop" into it via the admin panel.
You let the view know there is something to display via the ViewBag.
The view uses information you passed in order to render the desired content.
How it renders is where the HTMLHelper extensions come in. You could create an extension method which renders partial views based on the information you pass to it or maybe a set of extension methods that you call selectively based on the desired widget.

How do I know what is the type of control textbox/checkbox etc in controller?

I need to be dynamically build controls like textbox, checkbox, radiobutton etc by making a Ajax request and downloading the HTML. However once enough controls are on the screen and user submits the form, I need all the controls and it's posted values. Posted values are easy to get using Non sequential indices in Asp.Net MVC. But, how do I get which control's value it is? Put simply if the form has submitted the value "Hello World". I need to be able to know from where did the Hello World. Was the textbox that submitted this value or the textarea?
I don't need anything else like ID, name etc. Just need to know the type of control whether it was texbox, textarea, select or which one.
when you dynamically build these client elements, you give them a name so they will post to the server.
just follow a naming convention like:
textarea1,textarea2...
txt1,txt2,...
then at the server, to collect the values - take all the keys that start with textarea to collect the values of textAreas...
a nicer way will be to have a model with lists for each type, and when you generate the client elements, build their names so the values will be mapped to the correct list by the ModelBinder
the syntax for these names is a bit nasty so work with client templates
I used this post by haacked when i needed to build something like this
You need know more about http get or post.

JQGrid and asp.net

In the past when I've used jqgrid all i have done is had a static web service and the grid loads as the page does. Now I need to have a form that i want to send values from to the service, and the results need to be in the grid.
I'm struggling with a couple of things -
How do i format the url function in the grid to send parameters with it, in the past i have got away with just url: 'JsonData.asmx/GetData
How do i actually call the update method of the grid from a button?
I'm writing the web app in c#, dotnet 4
Thanks
Luke
I see no problem in what you explain. If you could fill the grid data using url: 'JsonData.asmx/GetData' it should continue to work inside of the form. You should only verify the font size which you use in the form to have good look together with the grid.
If you need reload data in the grid you can use $("#grid_id").trigger('reloadGrid',[{page:1}]); (see here).
One other possible problem which you could have: one should create jqGrid once. If you for example need create the form once which contain one grid and later change the for contain to have another grid you could have to use GridUnload method. See here and the demo and here.

Simple MVC Question for MVC beginner

i have an Ajax ActionLink which normally just returns a PartialView (which is just a UserControl ascx file) however, my needs have changed and i want to return another PartialView (so a total of two PartialViews) that occupy different areas of my page... of course i can't call " return PartialView("UserControl.ascx") " twice in a row consecutivelly... so my question is what would be an elegant work around for this?
how can i return two PartialViews WITHOUT wrapping these two PartialViews up in a larger parent view? i hesitate to do this because both items are in a different part of the html table which would require me to include practically the entire page in the parent view due to the structure of the table, and in this case lots of html data unnecessarily would be sent to the browser at each request - defeating the purpose of an ajax call/partial update (correct me if i'm wrong).
Im sorry I misread, i thought you wanted to call an action method statically. If you want to update 2 parts with one click then I dont really now how you would do it with the included apis. What you could do is create a little javascript (jquery!) that takes over the link´s click, and then have the script load the render page with ajax.
I´ll post an example in a few minutes :P
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#TheLink").click(){
$("#PlaceToUpdate1").load("/Controller/Method/View1");
$("#PlaceToUpdat2").load("/Controller/Method/View2");
}
});
});
</script>
im not sure if that will work exactly like that (no compiler, just top of my head) but its something like that. Of course the link should be a dummy link that doesnt do anything, since the script is the one actually doing it (though you can intercept the links methods if you send back a false or something like that)
You could manually construct the partial views in HTML helper methods. However, the feasibility of that approach depends on whether or not the partial views will be reused in other pages. I build a data grid control from scratch using HTML helper methods. Some of my pages have three or four of these data grids managed by a jQuery accordion control to reduce the screen footprint. I chose building an HTML helper for a number of reasons. First, I expected to use this control throughout my applications. Second, I didn't want to burden my views with a bunch of conditional logic. Finally, I wanted to be able to change the grid's configuration (including the model) within the view, so I wouldn't have to recompile every time I changed it. The grid supports both LINQ-to-SQL models and user-defined classes (using reflection), has a built-in pager control and a search mechanism that supports multiple search fields in a grid. I also set up the columns so that they can either display formatted text, link to a controller action or hold a mailto: link. Within the grid itself, you can define the model to populate the grid, optionally set the columns to display, specify the action and controller for creates, and specify a JavaScript function for deletes (because I use the jQuery dialog plugin for confirmation messages). All these changes are managed in the view itself.
Learning how to leverage HTML helper methods gives you the closest thing to ASP.NET server controls that MVC provides.

Dragging & dropping items from one list to another in a ASP.NET page?

I would like to move items from one list to another on a page, and I'm pretty flexible about what type of a list it is. What's the best way to do that? ASP.NET Ajax? jQuery? Anything else?
There's a nice tutorial on CodeProject that covers dragging with ASP.NET and jQuery:
http://www.codeproject.com/KB/webforms/JQueryPersistantDragDrop.aspx
if you want to do this and PostBack instead of using AJAX to update your data based on from fields you'll need to get creative about what types of controls you use. Page validation will complain about ASP controls like dropdownlists, listboxes, etc. if they contain selected items that weren't in the list when it was rendered.
Better to use AJAX to send back your updates or use HTML controls like unordered lists or select added via javascript and stuff the selected data in another control that doesn't complain (hiddenfield) on PostBack. The alternative is turning off page validation and I don't think that's a good idea.
You can also might look at YUI Library, I'd say it implements Drag & Drop in a very simple and flexible way:
http://yuilibrary.com/yui/docs/dd/
There are a lot of examples etc...

Categories

Resources