In My asp.net application (not MVC, conventional asp.net 4.0)..
I have a nested list object. The structure is
plantDTO = new PlantDTO();
plantDTO.LstTuningForks = new List<TuningForkDTO>();
tuningDTO = new TuningForkDTO();
tuningDTO.LstModule = new List<ModuleDTO>();
modDTO = new ModuleDTO();
modDTO.LstResourceTypes = new List<ResourceTypeDTO>();
restypeDTO = new ResourceTypeDTO();
restypeDTO.LstResource = new List<ResourceDTO>();
resDTO = new ResourceDTO();
restypeDTO.LstResource.Add(resDTO);
modDTO.LstResourceTypes.Add(restypeDTO);
tuningDTO.LstModule.Add(modDTO);
plantDTO.LstTuningForks.Add(tuningDTO);
I have values loaded in all these objects. the values are fetched from database and popuated. the idea is one plant may have multiple tuningfork, one tuningfork may have multiple modules, one module have multiple resource types and so on..
Now my requirement is i want to load 5 drop downs for
Plant, tuningfork, module, resourcetype, resource
in a cascading fashion.
i.e if one plant is selected then only its correponding tuningforks has to be loaded in tuningforks drop down,
again based on the selected tuningforks the module drop down has to reload with the respective data an so on
the values are available in the list object and i dont want to hit db
again
I require to do it using jquery as i dont want the page to post back
on selected index changed. More over i require to do it without using
[web method] attribute in my code behind.. Please let me know how to
achieve it..
I know you said you have requirements not to perform postbacks and not to use web methods. Why the arbitrary requirements? Because otherwise, the CascadingDropDown from the Ajax Control Toolkit fits your needs.
CascadingDropDown is an ASP.NET AJAX extender that can be attached to
an ASP.NET DropDownList control to get automatic population of a set
of DropDownList controls. Each time the selection of one the
DropDownList controls changes, the CascadingDropDown makes a call to a
specified web service to retrieve the list of values for the next
DropDownList in the set.
When the page initially loads, embed the hierarchy in your page's HTML as some form of data structure. Then have JavaScript that populates the drop downs according to the hierarchy, and JavaScript functions that handle the repopulating the other drop downs if there's a change.
Related
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.
I am using razor view engine(cshtml) outside of mvc framework. i.e only view is converted to cshtml format.
I make all database calls using webmatrix and construct cshtml view.
Although, now i want to fire dropdown list selected change event which will set or fill contents of another dropdown list on the same page.
Currently I use dropdown list using
#HTML.DropdownList("ID",List)
on the selectedindex change of dropdown, i wish to check it's value and then decide on whether or not to populate second dropdown.
How can I do it in this scenario? Remember, no mvc framework, hence no access to models or mvc specific methods.
when the dropdown list is rendered in the browser, it simply becomes a HTML tag and you can use vanilla javascript or frameworks like jQuery to check the item selected and load the next dropdown.
Sample:
$( "#myselect option:selected" ).text();
I have several web grids in a single view all working perfectly, except I now need to make one grid dynamic. It will populate once the user makes certain selections in ddl filters. The grid will not have a data source on pageload, I will need to send a json request to the controller but how do i create a placeholder for the grid? I can't use
#grid.GetHTML(...)
because it throws an error wanting a datasource. I was declaring the grid with a model initially:
var gridHistory = new WebGrid(
Commissions.Models.CommissionHistoryModel.getCommissionHistory());
But now that I don't know the data I need until after the user makes selections, I was going to try to do something like this (which throws an error since I'm not supplying a datasource):
var gridHistory = new WebGrid();
How can I supply a datasource when I don't have it at runtime?
you can create partial action (with httpget attribute) returning PartialView which contains your dynamic WebGrid. Each time user make changes to ddl you should render you partial via $.ajax to some placeholder in main view.
I believe the WebGrid has a shortcoming of not doing database level paging. If you have large amounts of data you will have some performance problems.
You might be interested in Dynamic MVC (http://dynamicmvc.com). It will perform dynamic database level sorting, filtering, and paging. It also exposes the the html in partial views so you can customize the html directly in more of an mvc style instead of a webforms control style.
How can I create a dynamic drop down list without using AutoPostBack. I ask because I just want to change the value of what the second drop down list displays and then the user clicks a button and it submits. But If I use AutoPostBack then it postbacks to page and runs code that shouldn't be run until that final box has been selected. (I use Postback in the other part of my program so using !IsPostBack isnt a option.) I looked at Javascript but ASP generates all of its controls names at runtime. What can I do? I have looked at the Ajax CascadingDropDown control but my problem with that is it contained in a XML file or a Database, I need this to be contained inside my Page. Any Ideas?
You can use the CascadingDropDown control from the AJAX Control Toolkit
Maybe this example will help? It's part of the ASP.NET AJAX Control Toolkit available here.
You can use AJAX to get the values for the second drop down list, based on the selected value of the first. Add a onchange event handler on the client-side to the first drop down list that makes the AJAX call and fills the second on success.
I have a page index.aspx this page has two Web user Controls, list.ascx and display.acsx basically list.ascx shows all the lists that are available on that SharePoint site into a dropdown box. The second web user control, displays a list of all the files in the list selected. But there's where I run into the problem my question is how do I transfer the value of the dropdown box from the first web user control into the second one.
thanks
Given that you are using custom web controls, it's a bad idea I find, to intrinsically link two different controls together as dependents. Instead:
Define an event on the first control that is raised appropriately with event arguments containing the data.
Have the encompassing index.aspx page have a handler for this event.
Within this handler, set an appropriate property on the second control, passing the data from the event argument.
This is much cleaner, achieves what you want and de-couples the two controls from one another.
Your list.ascx needs to postback the ListId to the server when the value is changed
<select onchange="PostBackWithListId();" >
<option value="SomeListId">
</select>
jQuery could help here, or you could do it server side with OnSelectedIndexChanged and AutoPostBack.
Then your display.acsx, just needs to read the ListId from the request.
If you just want to pass the data once brutally, no strings attached:
make a class with a static member of the type of data you want to pass.
set the value in one ascx file and read in the second ascx file..