MVC Retaining Model binding with simple Datatable client side pageination - model-view-controller

I have a model which contains a list of items.
The list will have no more than 100 items.
Hence, I grab this list in one hit when I grab the model.
I want to be able to create / edit this model in a view that has pageination on it.
If I have for instance 20 items in my list and a page size of 5 I see 4 pages. I find that when editting on any page other than 1 my models list comes though to the Action as null.
If I am on page 1, the models list only has 5 items.
I understand why this is, but I cannot figure out how to get round this without posting my model in chunks.
Is there a way I can do what I want, which is to post the model in 1 hit from a view that has pageination on it?

Not sure on the downvote - but I seem to have got there in the end.
I call this function to expand the table to show all rows before submitting.....
function expandTable() {
var oTable = $('#tblCategories').DataTable();
oTable.page.len(250).draw();
};
.....my model makes it through to the action intact with ALL of the list items present.

Related

Laravel Pagination + Livewire: How to retain number of data per page

Wanted to get an idea on how to perform this task or my question.
I wanted to have a datatable where it retains the number of data per page and doesn't move data whenever there's changes.
Let's say I got 50 per page then I deleted two data on the first page which makes it 48. I clicked on page 2, the original first 2 data of page 2 was moved to the first page because of what I've deleted. What I wanted is that it shouldn't move and should stay on page 2. Then if I click on other pages, it should still retain first page 48, second page 50.
Hope you get my question.
Thank you in advance. :)
I don't know if it's possible to achieve that result, I wouldn't know how. But I suggest as a workaround that you set a property on each item, and then hide or show the item according to that property. This way the pagination counter remains the same.
In your controller:
$my_query_results = $query->paginate(50);
$my_query_results->each(function ($item) {
$item->visible = true||false; //check a condition here
});

Returning multiple partial views on single AJAX call

I know this question has been asked many time before, but I believe my scenario is a little different and I am just looking for the best way to handle it.
I have 3 Partial Views and 3 corresponding ViewModels. One for Category, Division and Product.
A Category contains a collection of Divisions.. and a Division contains a collection of Products.
In my main view, I call RenderPartial on the 3 partial views...
#{ Html.RenderPartial("_Categories", Model.Categories); }
#{ Html.RenderPartial("_Divisions", Model.Divisions); }
#{ Html.RenderPartial("_Products", Model.Products); }
and I use jQuery to update the respective partial views as the selected category, division and product change.
Now here is where the problem is... When I select a category, I update the divisions section with the divisions for that category.. But what I would also like to do is to update the products section based on the first division in the collection since initially no division is selected.
I came up with a few different options to handle this, and I am not sure what is the best approach...
I could wait until my first AJAX call returns with the collection of divisions, and then do a second AJAX call to update the products.. I do not want to do this however for obvious performance considerations
I could structure my partial views such that, the Category partial view, contains the Division partial view, and the Division partial view contains the Products partial view. This way when my category changes, I can update the Products with one AJAX call. The problem that I have with this is that.. all the static HTML that will be defined in between my divisions and products partial views will be passed on every AJAX call.
I could modify my AJAX call to return a JSON object containing all the models and update the views client side.. however, I quite like the flexibility of being able to modify how the views are rendered in the server.. rather than concatenating a bunch of html on the client side.
If I could return multiple partial views via one AJAX call, then this would solve my problem. However, if there is something that I am doing wrong architecturally, I would gladly change it. Any advice? Thanks!!
A 4th option is to return a razor view with the ContentType set to text/javascript as the response. Razor will render the partial views, but then the browser will execute the javascript to update the DOM.
You'll have to make sure your ajax call is done correctly so that it executes the response.
$("#Categories").html('#Html.RenderPartial("_Categories", Model.Categories)')
$("#Divisions").html('#Html.RenderPartial("_Divisions", Model.Divisions)')
$("#Products").html('#Html.RednerPartial("_Products", Model.Products)')

How to pass rows added client-side in MVC3 webgrid back to controller?

I have a Model that contains some string fields and a List. In the view I use EditFor for the fields, and want to use WebGrid for the List.
Display works fine. But then I use jQuery client-side to let the user add rows to the table generated by the webgrid, which also show up fine on the UI.
However these rows don't appear to be tied back to my model's List upon a submit. In the controller I see that the posted model's string fields contain whatever was entered by the user. But the model's List is empty - it doesn't contain the original values nor the newly added values.
How can I cause the model posted back to the controller to be fully populated, including whatever the webgrid-generated table looks like now, just like fields are?
I see several other questions like this for webgrid on the forum, but none with an answer.
I suppose you are comming from WebForms world. Well this is different in MVC. Here you are back to plain old html and its input fields. No viewstate to hold your rows. Check this link: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx.
Basically you need have consecutive index (or ID) for each row.

Update partial view after rebinding Telerik grid

I have a MVC3 view that has a Telerik grid with Person information. This grid will be "rebinded" when adding/changing/deleting a person via ajax.
On the same page is a user control with a partial view that contains 3 dropdown lists. How can I refresh the partial view and thereby the dropdownlists as a result from the rebind of the Telerik grid?
Many thanks, it looks to be going in the direction I want, but not the whole way. I tried to incorporate your tips, but didn't manage to get it work. Here are a little more details:This model contains, amongst others, a list of employees in a company and 2 lists of persons created on the bases of some condition based on the employees from the company.
Like this:
employee list = Person1, Person2, Person 3
Projectmanagers = Person1, Person2
Developers = Person1, Person3
The list with employees are shown in a Telerikgrid that can be used to Add, Update or Delete employees.
The sublists are displayed are displayed by meanse of a partial view and has 2 dropdownlists.
When I make a change to the one of the employees (via the Telerik grid) I want this change reflected in the dropdownlists. For instance, when I add a new employee
to the company, say Person4. I want this new employee to be available in the list with projectmanagers (when it fullfills the condion to be a project manager) or in the
developer list when it is a developer.
The Telerikgrid will be updated via Ajax.Now I also want to update the dropdownlists with Ajax after the Telerikgrid has been rebound (.ClientEvents(events => events.OnDataBound("Grid_onDataBound"))).
How to solve this??
You need to get the updated HTML for your partial view after the grid is bound. You can use the OnDataBound event of the grid and $.ajax to request an action method which will render the partial view. Here is a blog post showing how to do that.

MVC and Model collection

I am a patterns newbie so please excuse this question if it sounds too silly.
I am modelling an application which requires a list of identical structures, named CityData, and only one of these structures should be displayed at a time. The view will allow the user to scroll among the various CityData.
Now my problem is: should I have a single model, containing a CityData list and the current displayed index, or should CityData be the model, and a list of it should be included into the controller, which in turn would handle events from the view and update the current displayed item?
I would go for the first one, but the idea of keeping the current displayed index information inside the model just doesn't sound completely correct to me...
How about keeping the list in the Model but the Index of the currently viewed item in the Controller. In sequence the controller would ask the Model how many CityData objects are available, then get the first CityData object and let the View show the object. The Controller can then handle requests from the user to view other CityData objects, getting them from the Model and in turn letting the View display them.

Resources