How to use Update panel to Refresh Partial view with Timer in Mvc4 and Asp.Net

MVC4 Update panel to Refresh Partial View Using Jquery Timer

Introduction : This tutorial explain how to update partial view  data whithout the reloading all page content. here we are using the jquery timer to refresh the partial view with regular time interval without reloading the page content this is posible by using the ajax form. here also explain the Ajax form to refresh partial view by selecting the  div id as following.

Step 1: Create MVC4 web application and create database

Step 2 : create model as following

 public class DAL
    {
        public int id { get; set; }
        [Required]
        public string Name { get; set; }
        public string City { get; set; }
        public string Education { get; set; }

        public SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\v11.0;AttachDbFilename=D:\MVC_Project\MvcGridview\MvcApplication1\App_Data\Database1.mdf;Integrated Security=True;MultipleActiveResultSets=True;Application Name=EntityFramework");

        public void Insert_data(DAL da)
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("insert into tbl_user values('" + da.Name + "','" + da.City + "','" + da.Education + "')", con);
            cmd.ExecuteNonQuery();
            con.Close();

        }

---

Step 3:   Now add controller in BBC   and add  contoller method as following.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class BBCController : Controller
    {
        //
        // GET: /BBC/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult PartialInsert(DAL da)
        {
            da.Insert_data(da);
            return View();
        }

    }
}

---

Step 4 : Now Create  Partial view  called name PartialInsert.cshtml 

@model MvcApplication1.Models.DAL

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>DAL</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Education)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Education)
            @Html.ValidationMessageFor(model => model.Education)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

---

In Above source we creare partial view.  and this  View we can Display inside the partial view as following
 as following source.

Here, Now create the Main View  and Diaplay partial view inside it as below. here main view name is Index.cshtml

@model MvcApplication1.Models.DAL

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script type="text/javascript">

setInterval(function () {
    $.post('@Url.Action("PartialInsert")', function (data) {
        $('#div1').html(data);
    }
    );
}, 2000);

</script>

  @using(Ajax.BeginForm("Index", "Master", new AjaxOptions() {
  UpdateTargetId = "div1",
  HttpMethod = "Post", InsertionMode = InsertionMode.Replace
  }))
     {
   
    <div id="div1">
     
         @Html.Partial("PartialInsert")
</div>
}

Here we can refresh the partial view at regular time interval  in  this div  <div id="div1">  by jquery  and using the ajax form to update the perticulat div by selecting the div id. thus partial view can refresh at regular time interval without reloading the all page content .

If you  have any Query or Problem Regarding above solution then comment below

See Other Tutorial :

*  AngularJS Crude With ASP.NET MVC

*  Convert Rows to columns using 'Pivot' in SQL Server

*  Mvc Registration page With user exist using Ajax method

*  MVC 4 How to Perform Insert Update Delete Edit Select Operation

*  MVC4 Edit,update,Delete,cancel inside gridview using sql database

*  MVC 4 Gridview To Display Data Using SQL Server Database With Simple code 

*  Login page in asp.net Mvc4 Web application

*  Mvc4 How to bind Dropdown List using Sql Database

* Gridview find control in asp.net

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email