Auto Refresh Partial View in ASP.NET MVC

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

25 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *