asp.net mvc3 - Loading a view always in a div - asp.net

Question

I am working on a mvc3 controller which loads a page on search. In the main index page, there is a search button and that loads another (details list) page in the given div.
I have incorporated pagination to the child view (details list). So, upon clicking on the "Next" link, it loads the next page.
cshtml of the index page: The flat id refers to where the details list loads.
<div id='FlatDetailcontainer'>Select a Project for Flat Details.. Loading...</div>
<script type="text/javascript" language="javascript">
// $(document).ready(function () {
function login() {
var check = document.getElementById("rad").value;
$("input[name=selectproj][value="+check+"]").attr('checked', true);
//document.getElementById("selectproj").checked = document.getElementById("rad").value;
if (check != "") {
handleprojselect(check);
}
}
function handleprojselect(myRadio) {
// document.getElementById("rad").value = myobj["proj"];
$.get('#Url.Action("Details", "ProjectDetails")?id=' + myRadio,
function (viewResult) {
$("#FlatDetailcontainer").html(viewResult);
});
}
function createproj() {
var url = '#Url.Action("Create")';
window.location.href = url;
}
</script>
The details page has the links of next and url action is as follows:
#if (Model.HasNextPage)
{
#Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1 })
#Html.Raw(" ");
#Html.ActionLink(">>", "Details", new { page = Model.PageCount })
}
else
{
#:Next >
#Html.Raw(" ")
#:>>
}
However, this link always loads on a fresh page as there is no reference to the main Index page's div id. Please can someone suggest how to go ahead with this?

Answer 1

As far as you are loading part of the page via AJAX call you should also use AJAX to handle your pagination. You should create JS function like the following:
function nextPageClick(e)
{
e.preventDefault();
$.get($(this).attr("href"), //getting the URL from your link and loading the content via AJAX
function (viewResult) {
$("#FlatDetailcontainer").html(viewResult);
});
}
and bind it to the paging links on page load:
$(function (){
$('.nextPageLink').live('click', nextPageClick);
})
Notice that "live" jQuery method assigns click handler to the dynamically loaded content as well as on existing static content, so you have no need to reassing handler after each data reload.
You shoud add CSS class to your link to be able to locate it:
#Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1, #class="nextPageLink" })
Of course you may use IDs or any other way to uniquely identify your pagination links.