Automatically load div using JQuery

             In this tutorial we are going to see how to automatically call the  MVC action method in certain time interval.First create an Controller and name it as "MyController and rewrite an Index method as following. and one more public method _Index

 namespace MyController.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; 
            return View();
        }
        public string  _Index(int? count)
        {
            count = count ?? 1;
            string str = string.Empty;
            if (count == 1)
                str = "It load at first time";
            else if (count == 2)
                str = "It load at secound time";
            else
                str = "It load at " + count + "th time";
            return str;
        }
    }
} 


     Right click the index method and and select Create view and rewrite the view with following
 

 <div id="dibAutocontent">
        @ViewBag.Message
</div>
<div id="divcontentloading">
      Request is send to Server 
</div> 

 now see how to load the div in page load and reload the div in every 5 min with out any user interaction using Jquery. for that u have to copy the following the following script and past it in view.
 <script type="text/javascript">
  (function ($) {
    $(document).ready(function () {
    $('#divcontentloading').hide();
    $.ajaxSetup(
    {
      cache: false,
       beforeSend: function () {
                $('#dibAutocontent').hide();
                $('#divcontentloading').show();
       },
       complete: function () {
                $('#divcontentloading').hide();
                $('#dibAutocontent').show();
       },
       success: function () {
                $('#divcontentloading').hide();
                $('#dibAutocontent').show();
      }
      });
     var $container = $("#dibAutocontent");
     var count = 1;
     var _url ='@Url.Action("_Index", "Home")?count=' + count
     $container.load(_url);
     setInterval(function () {
          count =  count + 1;
          $container.load(_url);
     }, 5000);
  });
})(jQuery);
</script>

No comments:

Post a Comment