I'm creating a search page, the page has a form that is being submitted using Ajax, after the search is performed I want to display a grid with the results.
My question is, should I create the grid when the page loads and then fill it with the data after the search is performed, or create the grid on the server when the search is performed and then just append the grid to the page.
I was thinking on creating a helper method to render the grid and invoking it from the controller after it gets the results, then returning the result of the helper method and appending it to the page, but this might be against MVC architecture (I'm defining UI on the controller).
What approach should I take?
Thanks
for the grid creation, you can have a look at MVCContrib grid helper
You could use jqGrid (http://www.trirand.com/blog/) or Flexigrid (http://www.flexigrid.info/) and load data with ajax and json. You submit search form with ajax, controller returns JsonResult, and then you load it into grid in callback. It is easy to implement and gives you additional functionalities (sorting and much, much more). Here you have some demos:
http://trirand.com/jqgrid/jqgrid.html
Related
i am new in mvc...now learning but for a long time i am attach with asp.net web form technology. many way we can load user control in webform.
1) suppose when user click any button then a postback occur and a server side method call. from that server side method we can instantiate user control or load user control and add it to page from code behind.
2) another way we can load user control dynamically by jquery. we can call server side function by jquery. and from that function we can load user control and get the user control html and send that html of the usercontrol to jquery function as return result.
so i believe the same thing can be done in mvc too. so discuss all the possible way to load partial view dynamically at client side from action method and also jquery.
how to get the html of partial view here from action method ? please discuss point wise and with sample code.....because i want to learn all good tricks.
Depending on your requirements there are a few scenarios available to you:
1) Utilize a combination of Javascript and jQuery to do an ajax call, get a JSON result, and then reneder the control from a call to a partial method and $("#element").html({jsondata}).
2) Utilize the AJAXForm object to present a form that will be replaced on submission with your desired user control (called from a partial).
3) Pre-render the partial but have it hidden and on successful submission display the hidden control, or update and show depending on your needs.
Can we cache Model in Partial View if not NULL.
So that if my page make a round trip it will still have values in model.
Because i have an action that returns a list of records based on search parameters.
and that list is bound to the grid.
This grid has paging.
so when i click on 2nd page, this grid is making a round trip to the partial view and second time the model in that partial view is empty.
Can any one suggest a best approach to not to loose data in model.
here i can't do output cache for the Action that returns result list.
any idea would be greatly appreciated.
thanks
You can add the Cache attribute to your controller, it works a treat.
[OutputCache(Duration=60,VaryByParam="ParamA;ParamB;")]
public PartialViewResult CachableAction(string SomeParameter)
{
...
}
MVC is a RESTful architecture, you have to provide the data/Model to your View from the Controller on each request.
If you decide to use OutputCache or other mechanisms, make sure your application can fall back and get the real resources. Cache in general can get removed by the server for various reasons and should not be relied in order for your functionality to work. Caching should be used for performance and scalability.
Take a look at the PagedList.
I'm new to Ajax, but I think I know how to reasonably use MVC + model binding.
What I'm trying to do is to create an Add button (or Ajax.ActionLink) to add a new row in my grid for data entry. Example: Think of a typical Order entry system with Order (header) and Product (items). My OrderViewModel contains an "Order" object, and the Order object contains a collection List.
The way I plan to do this is that my View render the grid in a PartialView, and the PartialView is a simple for-loop to create the table tags from the List. I will use the default model binder (for collections).
Anyone have suggestions on how to do this?
I've already figured out how to do this using jQuery, but I want (i think I want) to try and use Ajax so that I can add my custom business logic (e.g. like setting defaults, translations, etc.)as opposed to do this client-side.
In other words, I want to do do something similar to what the Telerik grid does with its Ajax Editing with the Add/Remove link/buttons.
Tips and sample code would be greatly appreciated.
One of my challenges, and not sure if I'm going down the wrong way, is that I don't know how to pass back the model back to the Controller Action from the Ajax submit. When I look at Telerik's code, it looks like they store the persisted items in HttpContext.Session, and this is exactly the reason why I don't want to use their grid.
Thanks.
They might choose the session repository storage for demonstration purposes. If you transform the logic from their SessionProductRepository class for your model and implement identical Update/Insert/Delete methods for it, you'll probably get what you want.
What is the best ASP.NET MVC pattern for paging data when the data is filtered by form criteria?
This question is similar to: Preserve data in .net mvc but surely there is a better answer?
Currently, when I click the search button this action is called:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Search(MemberSearchForm formSp, int? pageIndex, string sortExpression)
{}
That is perfect for the initial display of the results in the table.
But I want to have page number links or sort expression links re-post the current form data (the user entered it the first time - persisted because it is returned as viewdata), along with extra route params 'pageIndex' or 'sortExpression',
Can an ActionLink or RouteLink (which I would use for page numbers) post the form to the url they specify?
<%= Html.RouteLink("page 2", "MemberSearch", new { pageIndex = 1 })%>
At the moment they just do a basic redirect and do not post the form values so the search page loads fresh.
In regular old web forms I used to persist the search params (MemberSearchForm) in the ViewState and have a GridView paging or sorting event reuse it.
One possible solution is to attach a javascript click handler to the pager links that will submit the form by updating a hidden field containing the page number. This way you will get all the search criteria in the controller action.
Another possibility is to transform those pager links into submit buttons and place them inside the form.
A third possibility is to use the Session to persist search criteria.
You could perform a GET instead of a POST. if your request is to return search results, a GET might make more sense anyway. The benifit would be that all of your search fields are encoded into the URL. So, when you perform a page or sort on th exisiting URL, your data is perserved.
I have an example that using the MvcContrib Grid and Pager here:
http://weblogs.asp.net/rajbk/archive/2010/05/08/asp-net-mvc-paging-sorting-filtering-using-the-mvccontrib-grid-and-pager.aspx
I have existing ASP.NET MVC View pages and View user controls which I currently use in normal straightforward ASP.NET MVC fashion, sometimes I use RenderPartialView or RenderAction, etc.
By themselves they include tag. I would like to dynamically load either Views or ViewUserControl based on the selection in a dropdown list.
I'm having trouble deciding should I remove from Views and controls and put it just into the one View that will do dynamic rendering or to leave it there and leave outside of the .
What do you think and how would you go about it?
I would probably try to load the contents of a div after doing an AJAX call to get the contents. See the AJAX get call in the jQuery docs.
Or are the possibilities of what control to load so small you could just hide/show div's that are already in the page?
You can use JQuery to get the HTML from your Partial views and substitute it in the div. It could be something like this:
$.get('/Controller/Action',function(data){
$('div').innerHtml(data);
});
I did it this way and it works. /Controller/Action can be a partial view which returns HTML.