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.
Related
I am trying to implement two pages. The first page being a selection of the items I want to show on the second page.
On my first page, I have done a selection of the items which I want to render.
On click of a button, 1. the ids of these items will be placed in an array and 2. the user will be redirected to a new page through:
window.location.replace("/schedule");
Right now, I want to achieve the following:
Do an ajax call through rails to get each of the array items. i.e. make an ajax calls to the urls of myclass/[id]. The id belonging to the items in the array.
I am not sure how I could get my array items from the current page to the next page or if there is a better way of achieving this. Any advice or suggestion will be greatly appreciated.
Add :remote => true to your form. Then, app will render your action_name.js.erb view instead of action_name.html.erb. In js file you can put code, which will repleace div without redirection, f.e.
$('#div_id').html('<%= escape_javascript render(your_partial_name) %>');
You don't need to do anything special in partial and controller action, its all the same.
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 an Index method that does double duty as showing a list of posts and a queried list of posts and can also have pages so you get urls like /News/Page/1 or /News?query=test
When a user clicks through to a post at say News/Details/1 they get a simple ActionLink that takes them back to the list. BUT I want this link to take them back to the actual page they were on in terms of the paging or the query. How could I do this? I don't want to use the JavaScript history method. Here is my current ActionLink: <%=Html.ActionLink("<< Back to News List", "Index")%> and this is an example of the paging links: <%= Html.RouteLink("<< First Page", "NewsPaging", new { query = ViewData["query"], page = 0 })%>
Thanks
It would probably be easier to just use javascript to send them back to the last page in their history (without creating a link to the specific page).
history.go(-1)
I will go for a ActionLink like
<%=Html.ActionLink("<< Back to News List", "Index")%>
because user can access News/Details/1 directly and if then you have a link that uses history.go(-1) or history.back() function it will not redirect it to the Index action
Another way to do this is to create the link in the controller and assign it to a property of the model or a simple ViewBag variable (up to you). For this example, I'm just going to use ViewBag.
So in your example, going from /News/Details/1 back to /News/Page/1?some-querystring, you can do the following:
In your controller (assuming '1' is the 'id'):
ViewBag.BackButton = String.Format("/News/Page/{0}{1}", id.ToString(), Request.Url.Query);
In your view:
< Back
One draw back to this is that you must know what the previous page was/could be. In your case, you want your back button to go back to your list, so this technique should be fine.
I'm using ASP.NET MVC 2 for the first time on a project at work and am feeling like a bit of a noob.
I have a page with a customer search control/partial view. The control is a textbox and a button. You enter a customer id into the textbox and hit search. The page then "refreshes" and shows the customer details on the same page. In other words, the customer details appear below the customer search control.
This is so that if the customer isn't the right one, the user can search again without hitting back in the browser. Or, perhaps they mistyped the customer id and need to try again.
I want the URL to look like this:
/Customer/Search/1
Obviously, this follows the default route in the project.
Now, if I type the URL above directly into my browser, it works fine. However, when I then use the search control on that page to search for say customer 2, the page refreshes with the correct customer details but the URL does not change! It stays as
/Customer/Search/1
When I want it to be
/Customer/Search/2
How can I get it to change to the correct URL?
I am only using the default route in Global.asax.
My Search method looks like this:
<AcceptVerbs(HttpVerbs.Get)> _
Function Search(ByVal id As String) As ActionResult
Dim customer As Customer = New CustomerRepository().GetById(id)
Return View("SearchResult", customer)
End Function
A good place to start might be NerdDinner if you havn't already.
In the mean time though The approach I'd use is to have a page that has my search box on it.
Then I'd have a <div> that I name "SearchResults". This will ultimately hold my results to the search.
I then have a PartialView which takes a model that has all the search results and renders them.
So when I click the button I do a call out to a jQuery action that takes the search parameter, performs the search and then returns my PartialView as rendered HTML.
Back in the client side I take that rendered HTML and replace the contents of my div with the HTML.
The keywords to google, or SO, are RenderPartial. This is back end code to render a partial view and give you html.
Also jQuery postbacks so that you can call an action in your controller.
use RedirectToRoute action result
link
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.