3

I am implementing a page which has two navigation hyperlinks: Previous and next.

First problem, Every time I click on a hyperlink, it calls the action for the first time. Second time onwards, it stops calling the action method on the controller. I know that browser caches the link. So i used the code OutputCache... but it still does not work.

Second problem is that the action method gets called twice on one click of the hyperlink .

Could someone tell me what am I missing here? It seems pretty simple for folks who have worked in Asp.net a lot. I have put down the code I am using. Please help.

Controller code:

 [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*", Location = OutputCacheLocation.None)]
    public string PreviousPage(int currentPage, int blogId){
      List<Blog> blogs = db.Blogs.ToList();
            List<Profile> profiles = db.Profiles.ToList();
            var blog = blogs.FirstOrDefault(b => b.Id == blogId);
            var detailsCount = blog.BlogDetails.Count();
            if (currentPage == 0)
            {
                ViewBag.currentPage = Session["currentPage"]= currentPage;
            }
            else
            {
                ViewBag.currentPage =Session["currentPage"]= currentPage - 1;
            }
            ViewBag.blogId = Session["blogId"] = blogId;
            ViewBag.blogTitle = Session["blogTitle"] = blog.Title;
            if (blog.BlogDetails.Any())
            {
                return blog.BlogDetails[ViewBag.currentPage].BlogPage;
            }
            else {
                return " ";
            }
     }




 [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*", Location = OutputCacheLocation.None)]
 public string NextPage(int currentPage, int blogId){
     List<Blog> blogs = db.Blogs.ToList();
     List<Profile> profiles = db.Profiles.ToList();
     var blog = blogs.FirstOrDefault(b => b.Id == blogId);
     var detailsCount = blog.BlogDetails.Count();
     if (currentPage == detailsCount - 1)
     {
         ViewBag.currentPage = Session["currentPage"] = currentPage;
     }
     else
     {
         ViewBag.currentPage = Session["currentPage"] = currentPage + 1;
     }
     ViewBag.blogId = blogId;
     Session["blogTitle"] = blog.Title;
     if (blog.BlogDetails.Any())
     {
         return blog.BlogDetails[ViewBag.currentPage].BlogPage;
     }
     else
     {
         return " ";
     }
 }



[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public JsonResult UpdateTitleServer(){
    var title = Session["blogTitle"];
    int blogId = (int)Session["blogId"];
    var currentPage = (int)Session["currentPage"];
    var result = new {
        Title = title.ToString(),
        BlogPrevLink = string.Format("/BloggerHome/PreviousPage?currentPage={0}&amp;blogId={1}",currentPage,blogId),
        BlogNextLink = string.Format("/BloggerHome/NextPage?currentPage={0}&amp;blogId={1}",currentPage,blogId)
    };
    return Json(result,JsonRequestBehavior.AllowGet);
}

View code:

@Ajax.ActionLink("<----", "PreviousPage","BloggerHome", new { currentPage = ViewBag.currentPage, blogId = ViewBag.blogId }, new AjaxOptions() {HttpMethod="Post", OnComplete="UpdateTitleClient", UpdateTargetId = "contentPanel" }, new {Id="PrevPage"})

@Ajax.ActionLink("---->", "NextPage","BloggerHome", new { currentPage = ViewBag.currentPage, blogId = ViewBag.blogId }, new AjaxOptions() {HttpMethod="Post",OnComplete="UpdateTitleClient",UpdateTargetId="contentPanel" },new {Id="NextPage"});

JavaScript method:

function UpdateTitleClient() {
     $.getJSON("BloggerHome/UpdateTitleServer", function (data) {
         $("#blogTitle").html(data.Title);
         $("#PrevPage").attr("href", data.BlogPrevLink);
         $("#NextPage").attr("href", data.BlogNextLink);
     });
}
4

3 回答 3

0

Remember that getJSON() is an async method so the sequence of events may not be very predictable if you are stepping through the code using a debugger.

getJSON() doesnt have a async:false setting so just use ajax instead set async to false and dataType to json. Something like below:

 $.ajax({
      dataType: "json",
      url: yoururl,
      async: false,
      data: data,
      success: function (data) {
             $("#blogTitle").html(data.Title);
             $("#PrevPage").attr("href", data.BlogPrevLink);
             $("#NextPage").attr("href", data.BlogNextLink);
         }

});
于 2013-09-02T02:28:08.707 回答
0

The line @Scripts.Render("~/bundles/jqueryval") , Jquery validation script inclusion is causing the controller methods to call twice. I am not sure why this is causing the problem .Once this line was removed, it calls the controller method once only.

This is how my script header looked like before

<head>
        <meta charset="utf-8" />
        <title>Test</title>

        <meta name="viewport" content="width=device-width" />
        <script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js" ></script>
        <script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.js" ></script>
        <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        **@Scripts.Render("~/bundles/jqueryval") // Removed this line**
    </head>
于 2013-09-02T22:12:24.450 回答
0

This issue is due to jquery references being added twice.

First reference was :

 **<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"</script>**

Second Reference was due to the line :

 @Scripts.Render("~/bundles/jqueryval")

The above line adds three scripts to the web page 

**<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>**
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

The two highlighted script tags are duplicates which caused the controller methods to be called twice . I removed one of them and it works fine now.

于 2013-09-09T03:24:22.893 回答