Sometimes a partial view in ASP.Net MVC needs to refreshed on every particular interval or specified period of time. This article demonstrates that how to Auto Refresh Partial View in ASP.NET MVC by using razor view engine
In this tutorial we are using the jquery timer to refresh the partial view with regular time interval without reloading the page content this is possible by using the ajax form. here also explain the Ajax form to refresh partial view
Step 1: Create MVC 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\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.
public class BBCController : Controller
{
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>
Here, Now create the Main View called Index.cshtml and inside this main view we have called partialview.cshtml at specific time interval using ajax call.
@model MvcApplication1.Models.DAL
@{
ViewBag.Title = “Index”;
}
<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>
}
SEE MORE
- Auto Refresh Partial View in ASP.NET MVC
- What is ASP.NET Core
- Difference between TempData keep() And Peek() in Asp.Net MVC
- Difference between viewbag,viewdata and tempdata in asp.net mvc
- ASP.NET MVC With AngularJS
- Retrieving Data Using Form Collection and Inserting Into ASP.Net MVC
- MVC CRUD Operations Using Entity Framework
- Search Functionality in ASP.NET MVC
- How to create a User Registration page using asp.net mvc
- Store Multiple Checkbox state from cookie using Jquery
- Cascading Dropdownlist using Ajax in Asp.Net Mvc with city state country
- Insert, Update, Delete In GridView Using ASP.Net C#
- Binding Dropdownlist With Database In Asp.Net MVC
- Search and Filter data in Gridview using Asp.net MVC
- Select Insert, Update And Delete With ASP.NET MVC
- Display Data in GridView Using Asp.net MVC
- Validation in ASP.NET MVC Razor view
- CRUD Operation Using 3-Tier Architecture In ASP.NET
- How to get Connection String from Web.Config in Asp.Net C#
- Login page using 3-Tier Architecture in ASP.Net
- Asp.Net Image Upload in 3-Tier Architecture and store in sql database
29 Comments