Hi,
I’m working on a MVC3 web appl, with c#, Razor view. On 1 long view page, for a certain section, there is a
@Html.Action(….) where a PartialView will be displayed.
Now, a new requirement is raised to add paging to this PartialView; so that the height of this section is fixed, and won’t grow indefinitely.
What I did is: in the controller action, I write the data into a ViewModel, and use PagedList in this PartialView to add paging.
The 1st page works great; but when I click the "next" link at the bottom of this section, to go to the 2nd page, it goes to a TOTALLY NEW page, in a new browser windnow – I need the 2nd, 3rd and all the rest of the pages to stay in the SAME section; so when
I click "Next", the content for the next page will show up in the same <div>, while the rest of the page remains the same.
Is there a simple way to do this?
Thanks,
Claudia
specify the div id to the webgrid
new WebGrid(..., ajaxUpdateContainerId: "divid"............
Thanks for the suggestion.
Actually my Viewmodel is a bit complicated…it has some info to be presented in a table; the rest are either in a list, o just plain text (not in a table or list).
The WebGrid idea seems to put everydata in the ViewModel into a table….correct?
If so, it does not work for my situation. I’ve looked into jQuery DataTables as well – it does not work for the same reason: the data from my ViewModel here requires more than a table.
I just need to automatically update this 1 <div>; and keep displaying all data here in this 1 div, with paging — is there a similar idea to use for a <div>, not WebGrid div, but with the ‘ajaxUpdateCOntainerID = "myDiv"? I’ve looked around, but did not
find any attribute for <div>….
Here is my current code:
<div id="result">
@Html.Action("ResultPartial", "MyController", new { id = id } );
</div>
And in "ResultPartial" view page, I use "PagedList" to add pagination. In the controller action for "ResultPartial", I aggregate the data and write them into a ViewModel.
I’m trying to use something like this (see below), but have not found a way to make it work for @Html.Action:
new AjaxOptions{ HttpMethod = "GET",
UpdateTargetId = "result",
InsertionMode = InsertionMode.Replace }
Thanks,
Claudia
Update – I searched around and tried more. I think I found the core issue: it is in the bottom "Pagination links", the code comes with the PagedList – when I click "Next" or "Prev", which is an @Html.ActionLink, I want it to stay on the same page, however,
it went off to a new page.
This is the code for it right now:
@Html.ActionLink("Next", "ShowResultPartial", new { page = Model.PageNumber + 1, sortOrder = Viewbag.CurrentSort, currentFilter = ViewBag.CurrentFilter,
UpdateTargetId = "result" }, new {@class = "paging_link"})
Note: I added the bold part UpdatetargetId = "result" – but this does not work.
Note: I tried to use @Ajax.ActionLink("Show Result",
"ShowResultPartial",
new AjaxOptions{UpdateTargetId="statusresult" }) – which has the "UpdateTargetId" attribute; however, with Ajax.ActionLink, I can not write all other attribute such as "page", "sortOrder"…
So – I really need a combination here – I need to use either 1) @Html.ActionLink but add "UpdateTargetId" and make it work; or
2) use @Ajax.ActionLink but be able to add all other attributes for pagination.
Anyone has a suggestion?
I have spent quite some time on this already, and have a deadline tomorrow … any advice will be much appreciated!
Thanks a lot,
Claudia
Hi Claudia,
You could specify the additional data in the Ajax.ActionLink, please use this override method:
# AjaxExtensions.ActionLink Method (AjaxHelper, String, String, Object, AjaxOptions)
http://msdn.microsoft.com/en-us/library/dd470364(v=vs.118).aspx
Best Regards
Starain
Hi Starain,
Thanks for the suggestion. Can you provide some sample code using @AjaxExtensions.ActionLink(…)? I read the MSDN article but still not sure how to use it; plus, all the examples I found are using @Ajax.ActionLink(….)…
Thanks,
Claudia
Hi Claudia,
Please refer to this code below:
@Ajax.ActionLink("linkText", "ActionName", new { page = 2, sortOrder = "desc" }, new AjaxOptions { UpdateTargetId = "statusresult" })
Best Regards
Starain
Hi Starain,
I tried this code….however, it still does not work yet. HEre is my situation:
I have a main page, "ShowResult.cshtml". On this page, there are 3 sections:
<div id="top">
….
</div>
<div id="result">
@Html.Action("ShowResultPartial", "MyController", new { id = id }) // this will call an action which generates a partialview, with paging at the bottom
</div>
<div id="bottom">
…
</div>
Now, in the partialview "ShowResultPartial.cshtml", I used the @Ajax.ActionLink code you suggested. it is for the pagination; I use PagedList for this page:
@model PagedList.IPagedList<MyModel.ViewModels.ShowResult>
….
@Ajax.ActionLink("Next", "ShowResultPartial", new { page = Model.PageNumber + 1, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions { UpdateTagetId = "result" })
Now, the main page "ShowResult.cshmtl" displays everything right, with the 1st page of ShowResultPartial.cshtml; BUT, when I click on "Next", the 2nd page of "ShowResultPartial.cshtml" now REPLACED the main "ShowResult.cshtml" page – and this is NOT what
I want to achieve.
What I want to achieve is: the main page, ShowResult.cshtml, REMAINS the same. And the pagination is only for the <div id="result"> section, not for the whole page (that is why I used the PartialView for that part of the content); so only in this div, in
the middle section of the ShowResult.cshtml page, there will be the content generated from ShowResultPartial.cshtml, with pagination at the bottom of this section; and when I click on "Next", ONLY this section or <div id="result"> should be updated with the
content for the next page; the other parts of the ShowResult.cshtml page should not move or change; nor should the url of this page be changed either.
I hope that I’m clear on the description of my issue….
Please let me know if you have any creative ideas to make this happen?
Thanks,
Claudia
I think Partial view doesnt use _Layout page, So what you can do is you can use use ajax for calling the controller action for paging . I don’t want to go in detail about how to use ajax for paging, i hope you are well aware of this.
Update – I have solved this issue.
Thanks everyone for helping,
Claudia