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