I am in the process of learning and understanding asp.net MVC and google maps.. Just came across one of the examples while googling and got a doubt.
Here's what I am trying to do...
in the form there are 3 things... a dynamic texbox, a submit button and "my location" button which I am trying to add.
on clicking the "my location" button,( I have the javascript to get the lat, long of my coordinates) it should display it on the textbox, just wanted to see whether it has picked up properly and then i will click on the submit button.
I saw in the code referred as <%html.texbox('addr')%> I presume it is dynamic texbox...
Is this possible ? I think it should be, but I'm not sure how.
what do you mean by Dynamic Textbox? a textbox every time a user clicks the button?
<%html.texbox('addr')%> syntax is something which is used to render a textbox and this aint a dynamic one. this is rendered only once when the complete view is being rendered. You can read more about input extentions in asp.net MVC view engines here http://msdn.microsoft.com/en-us/library/system.web.mvc.html.inputextensions.textbox.aspx
i you want to really insert a dynamic textbox whenver you click the button you can just use Jquery(already present in a new MVC project made by VS). and do something like
$('#divId').append($('<input type="text"/>'))
you can do smthing like
var $tb = $('<input type="text" value="SOme_Value_Lat,LON"/>');
$('#divId').append($tb);
Related
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
I am new to MVC . I am creating a bookstore webpage application using aspx, and mvc. I have a database of books that says available or sold out. When a user clicks a dropdownlist they choose a book, it shows an image next to the book that is either supposed to show a green check mark if it is available or a red X if its not available. That information is all pulled from a database. My question is how do I change the image once a book becomes available. By the way my images are stored in my Content folder under imgs.
I have been searching for a while and haven't found a good answer. Any help or any websites you can suggest would be great thanks.
My image says this
<asp: Image ID = "Book_Availability" runat = "server" />
-----------Update----
When I mean change, I mean change the ImageURL so that it points to a different picture. On the server side I have value of 0 or 1. When I get a 1 i want to update the image URL to point to a different ImageURL from the controller, so that its from a X to a check mark. I am not sure how to accomplish this using MVC
Check out this link on Razor syntax. You could achieve what describe with something like:
#{
string availableImage = Url.Content("~/Images/availableImage");
string unavailableImage = Url.Content("~/Images/unavailableImage");
}
<img src= "#(Model.IsAvailable ? availableImage : unavailableImage)" alt="" />
You could perhaps add an click event handler onto the dropdown using jQuery. This could in turn do a $("#myimagewrapperexample").load() event against an action on some controller i.e BooksController
The action could return a partial view containing the books current image for example. Or it could return true, false depending on the books availability and you toggle the image in your javascript. All the action would need to be passed would be the id of the book and you could then look it up to determine it's status.
I've never used asp tags in a MVC project so can't comment on your usage there. AlexC suggestion of looking into the Razor syntax if your using MVC 3 is a good idea. Otherwise you might want to look into creating views using MVC 2. This Microsoft link might help you out on that front.
I am looking for the best way to create ajax enabled subforms from items in a list with MVC 3. A static list of values should be generated, but with an "edit" link/button next to every item, to toggle inline edits.
I did follow the tutorial at this link
http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation [1]
However it is based on the form edit fields always being visible
I'd like to show a static list with field values, but let the user activate an edit field by clicking "edit" (e.g. button)
I did modify the example at [1] by creating a default partial view with a form with submit button only. When posting the data by ajax the edit form will show. It looks like it is working, (I only need to hide validation errors on the first POST - which does not send real data).
Update:
An even better solution would probably be to leave out all forms in the static view, just have a single css class button/link next to each item, and let jquery fetch the relevant view for the clicked item. I am not sure how to do that with MVC 3+jQuery though.
Another update:
I discovered Ajax.Actionlink, which did exactly what I wanted!
I found out how to do it, and it turned out to be real simple!
I created two partial views.
One for rendering each static item. I used used Ajax.ActionLink with InsertionMode "replace", and set the parent of the item as the target
The second for rendering the form. Here I used Ajax.Beginform with similar options.
On successfully saved data, I returned the static view, on failure, I returned the partial view with the ajax form again.
I'm happy I found a MVC-centric way to do it (although it is fun creating custom stuff with jQuery)
It sounds like you need an inline editing plugin for jQuery. I would try jEditable. I have not used it myself but appears to have extensive docs.
this entry might help: code + video + explanation ;)
http://ricardocovo.wordpress.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/
-covo
I know this sounds silly but i forgot how to code non-ajax.
Specifically:
I am in MVC
I have a dropdown list with languages.
When a language is chosen i want to reload the whole page with the new language.
This all works but I have to manually refresh the page.
I mean I could call window.location.refresh after i return from the action but i feel like i should be able to do a full refresh. Am i suppose to call submit on a form?
I really feel like i am missing osme extremely easy right in front of my face thing.
I have been doing so many partial ajax updates in my life,i lost my plain old post and reload.
Yea you have to do a form submit, but whats wrong with window.location.refresh?
Normally selecting language for a site is independent of other form submissions, and you can get away with a GET instead of POST. So, in the onchange attribute of your select, you can put:
var lang = ...//get selected language value here
document.location = 'http://mysite.com/' + lang //or whatever your URL scheme is
I'm building a grid in ASP.NET MVC and I have the following issue:
Above the grid i have a column selector which lets people customize the columns being shown. This is a form with a submit button so that people can add/remove multiple columns at once without going trough multiple postbacks.
Below the grid I have paging. This is paging trough actionlinks (a href's).
alt text http://thomasstock.net/mvcget.jpg
What happens when a user add/removes columns is that the form gets submitted to http://localhost:56156/?columnsToDisplay=EmployeeId and ofcourse the grid jumps back to page 1. I'd like to keep the grid on the page the user was currently on. So I need a way to include the current querystring parameters into the form's action attribute.
The other way around too: I need a way to do the same with actionlinks. But this is less necessary as I could always replace the a href's with buttons and put them in a form. But I'd rather not do that.
I'm looking for a solution without javascript! I can do it myself in javascript, but I'd like my grid to work perfectly on javascript-disabled browsers.
Any help is appreciated.
Edit:
Oh yeah, to make it a bit harder, I'm also looking for a solution without cookies/session variables. :-)
You need to add the line below into your column selector form
<input type="hidden" name="page" value="<%=Request.QueryString["page"]%>" />