i just started building a small test app to help me learn MVC. i have a view that displays user comments. Under each comment i would like to have a reply action link. Clicking on the link should return a small form for adding a comment directly above the reply link.
What is the general approach for this? I'm imaging the form would be a partial view that i can somehow return using the reply link. Thanks for any help!
Using jQuery to retrieve and post the forms in partial views is how I would do it.
Just return partial view to be loaded by jQuery load:
$('#comment').load('/MyController/ActionReturnsPartial');
You should not have to retrieve anything from the server if the user is not providing any extra information along with the retrieval.
Instead of retrieving the form when the user clicks, just let the page render a form below each comment. Put the form in a div with style="display: none;". Then, when the user cliks the link, use jQuery to show the form. Something like
$('.commentlink').click(function(){
$(this).closest('div').find('.formdiv').show();
});
You may also be able to use jQuery's .toggle() method.
Related
I currently have a product list that includes reviews from users where you can navigate trough the reviews with next and previous button. But currently it goes to a hole new page url like pageid=2, I'd like to have a script that doesn't need to go to a new url but just loads the new page of reviews in the current page. Could someone share a code snippet for this? Because i have no idea how i could make this as i don't have experience with javascript/jquery.
Thanks for your help!
Create a partial view called Reviews, make an Ajax post/get request to your action within your controller that returns your partial view, within the success method of your jquery Ajax request, you will need to place the rendered HTML into a div container, ie, $('#mydiv').html(data).
http://api.jquery.com/jQuery.get/
Suppose you have anchor tags with class set as "paging"
1
2
.
.
$(".paging").click(function(){
var PageID=$(this).text();
$.get("Review/GetReview/"+ PageID ,function(data,status){
$("#ReviewContainer").html(data);
});
});
This will call your Action Method "GetReview" from controller "Review" with parameter as ID.
And set the html content.
Hope this will help you!
Thanks.
I have a form with a country select. The form should be extended with new input fields depending on the selected country.
Most of the tutorials i found on google are for ajax submits after filling a forum.
Can somebody recommend a tutorial/howto on howto extend a form via ajax on a select change?
Use something like this. Of cousre url, country_data, and custom_part must be handled according your app. And the returned data comes from your app, better without layout, only the part what you want to add.
$.get("url", country_data, function(returned_data){ $(".custom_part").html(returned_data) })
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 have MVC 1.0 app on VS2008.
I have webpage that has a search form fields and then when search button clicked uses
Ajax.BeginForm to load results in a div. Works great!
But the results have a pager that just uses an anchor with href passing in page index to controller action.
Of course the same action that is used when the search button is clicked.
So what happens is the results are displayed in new page by themselves. Because the links
are not called using Ajax.
So how can I structure my views and actions so that when a link is clicked in the pager
that the form is submitted to the action as well as the page index for the results??
Do you understand me??
Malcolm
I think I understand what you are saying.
Currently, you're using Ajax to dynamically update your results to a div. Kewl.
The trick here is to make sure each 'page' in the pager has a similar javascript function defined on the onclick event. This way, the pager doesn't do a 'postback' to the server, but the javascript method is ran ... which calls some ajax.
here's some sample html...
<a href="#" onclick="DoPagedSearch(1)>1</a> |
<a href="#" onclick="DoPagedSearch(2)>2</a> .. etc
does this make sence? make sure the pager is NOT inside a form AND notice the '#' characters? that makes sure that when u click on the text, it doesn't try and goto another HTML page, elsewhere.
Do you know how to wire up any javascript to an html element? How do u create the html code for the pager?
try that and keep us posted.
Use jquery to have the page anchors make an ajax call to the controller. Return the results as JSON or xhtml or whatever format makes you feel happy and use that to replace the content of the div, or build up and replace the contents if JSON.
If you haven't dug into jquery, I highly recommend it. The documentation is rather excellent. Let me provide you a few useful links for this:
JSON.net serializer
jQuery Documentation
fair example of using jquery for paging
The example uses an rss feed (xml) as the source, but It should get you going.
I have a HTML form, and I have a Controller Action that accepts the POST request. Everything works with a regular submit button, but I would like to submit the form with a link (<a>-tag) instead, to be able to further control the formatting. Is there any way of doing this nicely built into the ASP.NET MVC Framework, or should I write my own extension method? Is it even possible to do this without javascript (I will use AJAX in the future, but it has to work without).
Here is a complete example. Note that this particular example does something fairly important: it has a fallback for browsers with JavaScript disabled.
If javascript and jQuery is enabled this effectively replaces all submit-buttons with links:
$("input:submit").hide().each(function (index, Element) {
var elm = $(Element);
elm.after($("<a href=#>" + elm.val() + "</a>")
.click(function () { elm.click(); })
);
});
Based on post linked to in the accepted answer.
I'm not aware of a helper and as far as I know it is impossible to submit a form using an anchor tag without using javascript.
You cannot 'submit a form' using a link (<a> tag) without Javascript. The javascript is going to generate a standard POST request (same as clicking a submit form button) behind the scenes.
There are other workarounds for those with JS disabled, look at what #Craig Stuntz submitted.