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.
Related
Here's my scenario:
I need to create a page such that I have a view containing a DropDownList, then another (partial?) view beneath it that changes depending on what was selected in the DropDownList. I know how to code the DropDownList and make it work with the controllers, but I'm pretty stumped on how to achieve my goal.
The view that will change based on the DropDown has its own controller with CRUD operations (they contain grids). I should add that i'm using a shared view that contains a sort of template for a grid. There's lots of grids, but one view, and a controller for each grid. So I can't just call in the view as a partial view, as it would have no data. I'm essentially needing to call the controller for each grid, which then renders the view containing the grid.
So how can I do this?
you can use partial views to render your views, hence you can use Ajax to update the contents of any element or part of the rendered views dynamically.
you may use jquery to get the selected item value from the drop down list
The thing my employer asked for is a razor search form for items that has optional filters that show per filter value how many items there are. For example, filter option "fruits" has option "oranges" and behind "oranges" you can see the amount of oranges. Every time a filter value is chosen, the entire content must change and the number of items behind every filter value must change because the number of items that have that value and the value of the applied filter will be less. Per filter, it must be possible to pick several values. The data has to be gained from an ASP.NET API which I also have to make. It may not be directly from the database because we want to use this API functionality for other applications as well.
An example of what I mean can be seen on this website.
All of this has to be made in ASP.NET and with an ASP.NET API.
Let me know if any clarification is needed. Thanks in advance.
Break out the dynamic content in a partial view. And create an action method on the server that takes filter parameters as input and then returns the partial view with the results. On page load use AJAX to pass the selected filter parameters and load the resulting content as a partial view. ON change of filter call the AJAX method again. Whatever HTML content is returned by the partial view, place it on the page.
I am new to MVC and i was trying to covert one of my webform project.
I have a request page, depending on drop down i select, controls get populated.
There are 10 request types, so i considered using partial view. I will make an ajax request on select change event, and depending on what is selected, i will return the partial view, but when i submit the main page, how will i retrieve the model for partial view, can i retrieve model separately for main page and partial page.
Yu have no way to pass a model from the client side to the server for rendering a partial view. So, no, that's not possible.
As you want to deliver a different partial view depending on the selected item, you need to pass this information to the browser, so that it can decide which action has to invoke to render the view correspondeing to the selected item. To do so, you can add this information as the value of each element int the drop down list. This value can be something as simple as an id or as complex as a whole url with parameters which invoke the required view. (If you choose the url option, you can render it using the Url.Action url helper extension).
Then, in the code that handles the change event, you can recover the value of the selected item, and use it as a parameter for making the ajax call that will render the required partial view. (For example, if it's the url, you can use jQuery.get() or any of the other jQuery ajax methods with that url).
The ideal situation is that you can render the partial view without depending on the previous rednering of the main view. I.e. the ideal is that you can build the model for the partial by using the action and parameters received in the ajax call.
But, if you need some information that must be generated when rendering the main view, you can use can use TempData to store it when rendering the main view, and to retrieve it when the partial is rendered. (TempData or Session depenging on what yu exactly want to do).
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
I have an asp.net webforms site with a rather large GridView. The GridView is rendered from a filtered list of data objects.
Some of the data objects have children of the same type.
In my GridView, I'm initially only showing the parent objects. I want to be able to expand the parent to show the child objects, via an Ajax call, and insert the new rows under the parent.
The catch is, they need to follow the same formatting and rendering rules as the parent, and fit in with all the rest of the existing rows. This means that all columns of the new child needs to fit in the columns of the rest of the rendered grid.
I would also like to re-use the existing GridView rendering methods if possible, so I don't have to maintain duplicate code that essentially does the same thing.
I can easily use the DynamicPopulateExtender from the AjaxControlToolkit to call a web service to get the child rows, but that wouldn't easily give me the rendered and formatted HTML that would fit into the already rendered GridView table.
Is there a way to get this to work properly, or is there a different way I should approach this?
Make your Ajax calls and insert the data with jQuery perhaps using a templating engine like jsRender to merge the data. Use the same css classes for the gridview and template to keep the uniform look you want.