I have an MVC application. In which i have a textbox according to the textbox values I want to list search items from database to grid in view without postback. I am new to MVC if this question is wrong, kindly correct me.
If your new to ASP.NET MVC i suggest these tutorials, they are free.
http://www.asp.net/mvc/pluralsight
To answer your question you will need to do the following (high level)
write some JavaScript / JQuery that makes an Ajax request sending the textbox value, this should fire on the KeyUp event after a little delay, also after x amount characters have been entered to get some meaningful results.
This Ajax request will call a Controller Action where you can do the Database Lookup, this will return JSON.
Your Javascript should render the results so the user can select a result and this will populate the textbox, the user can then click the search button to do the search
http://jqueryui.com/autocomplete is a plugin that can do most of the client side functionality that I mentioned above.
This is a nice ASP.NET MVC AJAX tutorial:
http://pluralsight.com/training/players/PSODPlayer?author=scott-allen&name=mvc3-building-ajax&mode=live&clip=0&course=aspdotnet-mvc3-intro
UPDATE
Your Javascript should render the results so the user can select a result and this will populate the textbox, the user can then click the search button or this could be fired without the last click, anyhow you will have to re-bind / render your grid with the selected filter applied, this would have to be another AJAX request.
You may want to consider using one of these to help with the data binding and AJAX calls
Flexigrid: http://flexigrid.info/
jQuery Grid: http://www.trirand.com/blog/
jqGridView: http://plugins.jquery.com/project/jqGridView
Ingrid: http://reconstrukt.com/ingrid/
SlickGrid http://github.com/mleibman/SlickGrid
DataTables http://www.datatables.net/index
Related
I have an ASP.NET MVC application with a page that displays a large table of rows & columns of information.
I have a textbox at the top of the page allowing a user to filter the results in the table. I want the user to be able to start typing a word in the textbox and with each keypress, the results in the table to be updated based on the users filter text.
I've done similar things where I simply return a JsonResult response from my Controller, with a couple of small bits of data, but am not sure of the recommended approach if I want to essentially re-render my whole table (with the new data within it) upon each keypress?
I should also mention that the ViewModel I intend to use when the page is first loaded (prior to any ajax stuff happening) contains an IPagedList, as the table data needs to be paginated and sortable.
What I would do is to work with JQuery ajax API and also with partial views.
Have a look at following article. It displays how you can be able to manipulate your html seamlessly on ASP.NET MVC :
Working With JQuery Ajax API on ASP.NET MVC 3.0 - Power of JSON, JQuery and ASP.NET MVC Partial Views
http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views
Also, following question might help :
How to pass an array through in JQuery Ajax and how to concieve it in server side?
You can use the templates to render the html.
i.e Parametrized html + json = to be rendered html
MicroTemplates
Have a look at http://knockoutjs.com/ it could be a very good fit for you
Take a look at the DataTables plug-in for jQuery. It may match your requirements and provide exactly what you need.
Before I start work I would like to get some ideas. What I have is an MVC3 page that I currently use to display rows of data. There are many rows so I would like to filter them. Ideally at the top of my page I would like to have a select drop down box and a refresh button with rows of data appearing below when the refresh button is clicked.
I can imagine doing this with Ajax and then having the data from my controller populate new HTML text between a DIV.
Does this sound like the best approach? I am not looking for a person to write code for me. Just want to be sure my solution sounds like a good way to go.
thank you
i recommend this approach:
http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx
You can 'enchance' it with AJAX of course, but do not forget about users with disabled javascript. Make it work without client scripting, then enchance it, when its working.
I also think that you can simply create controller action, that is accepting parameters like pageNumber and amountOfItems. Then in your controls at page, you can just change values (number of page etc..) and use them in call for your controller action at form submit.
Before starting, I do have a very particular question and if you want to answer it go straight to the end. But I do welcome comments and advices hence the lengthy post.
OK, we deal with a lot of forms and some of these forms are quite lengthy and have many fields. We also have a requirement - in addition to top level fields - to be able to have variable number of repating rows - as we call them. For example, let's think of a customer which has name, surname and age while it can have zero or many addresses (say 0 to 10) so the user must be able to add or remove contacts from the form while filling it in. So typically user gets and "Add" button to add more addresses and next to each address, a delete button. Potentially there could be more than one repeating section in the same form but I am not going there. The point is, because of legal and historical reasons, all the forms must be saved at once so while the forms can be edited, we cannot accept a half-filled form and have another page for users to add and remove addresses, e.g.
I am using ASP NET MVC 2 (strongly typed views with a single generic controller) with client side validation and heavy jquery scripting for flashy features. We are probably going to migrate to ASP NET MVC 3 very soon and I am already playing with 3 for finding a good solution. These addresses are defined on the Model as List<Address>, e.g.
I currently have a working solution for this issue but I am not satisfied with it: I have an HTML Helper that names the add or delete buttons and a bit of JavaScript to disable validation and allow the form to be posted back (even invalid) and since I can find out the name of the button that was clicked, I have all the necessary logic to handle add or delete and works really well.
But I am posting back and the form is reloaded and I am looking for an aletrnative solution. Here are what I can do:
Do everything in the client side. "Add" button will clone one of such addresses and "Delete" button will remove() the element. I only have to rename the indexes which I have done. We were using jquery calendar and it was breaking on the new elements which I have also fixed. But the validation is not working which can probably work with ASP NET MVC but this solution looks like a very brittle one - a house of card which looks great before you add another card.
Post the whole page usin Ajax and then load it back again: This is probably better than my current solution but only slightly.
Use ajax to post the form and get back JSON and use the data to build the elements or remove them: Again a house of card because of extensive client side scripting
Serialize the form and post using Ajax to a particular action and get back only the repating section (as a partial view). The action on the controller can be reused and called from the view itself to return the partial view
OK last one is the one I am working on but there is an issue. ASP NET MVC 3 with unobtrusive validation works only if the form is engulfed in a BeginForm() while my top level view has a BeginForm() but not my partial view. It works well when I call it from the view but not on the ajax call to get just the repeating section.
(Question)
So is there a way to tell ASP NET MVC 3 to spit out validation data atttributes regardless being in a BeginForm() block?? To be honest if this is not a bug, this is definitely an important feature request. I have in fact used reflector to disassemble the code and the condition seems to be there.
Short Answer:
Add this to the partial view:
if (ViewContext.FormContext == null)
{
ViewContext.FormContext = new FormContext();
}
I don't think it is possible using the default unobtrusive libraries supplied. If you look at jquery.validate.js and jquery.validate.unobtrusive.js it looks like it only validates what is inside the form.
There's a few posts about it if Googled and a few work arounds.
I had a similar issue (although much simpler) where I had a validation summary at the top of the page and multiple forms but the unobtrusive javascript would only populate the view summary if its inside the form (jquery.validate.unobtrusive.js line 39 if interested...).
I'm not sure if the validation library is extendible but most things in jquery are so that might be an option if you want to go down that road.
As far a possible solution to your problem I'll put in my 2 cents for whats its worth.
You could have two actions that are posted to. The first action is you post your model with no js validation and all validation is handled in the code - this will catch all user with javascript turned off.
Your second action is you serialized the model. In mvc 3 using the Ajax.BeginForm has an AjaxOption for Url where you can specify an action for the jquery to call (where it serializes the form form you and you can decorate your action with your strongly typed model). Here you can check the model and return a json result and handle this in the javascript.
I've got an ajax form in an MVC 2 application. I cannot find the proper way to access the form elements within the Ajax form decleration. I can access the name of the elements with Request.Form.Keys but I can't access the actual values. I've read numerous examples of posting forms with jQuery but my form has elements created dynamically based on route values (sometimes it could be 2 text boxes sometimes 10, given unique names like so: <%= Html.TextBox("Evaluation"+Model.EvaluationId.ToString())) so I couldn't find a way to make that work with jQuery.
Is there another way that I for elements can be accessed?
This same question was asked not two hours ago: Add controls dynamically on button click in asp.net mvc
That OP's accepted answer: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
I have a Todo List (an ASP.MVC UserControl) that for each row has the name of the task (that can be clicked to toggle between done/outstanding) and a delete button for removing the task - Both are created using Ajax.ActionLink to query the server.
When creating a new row I need the task text and delete button to be ActionLinks, how would I do this from the client side? Is there an Ajax.ActionLink equivalent in the Microsoft Ajax JS libraries?
Take a look at the code that is being generated using View Source. All you need to do is add the same markup and add the correct click handler via javascript. You may find it actually easier to do this with jQuery for all elements and add the jQuery code in your UserControl. At least that way you control the code and if Microsoft decides to change the way their ActionLink works, you won't get caught short.