Hi nauna,
Using this article i have created the example.
Display (Show) Loading Progress GIF Image when Page Loads in ASP.Net MVC
Check this example. Now please take its reference and correct your code.
Model
public class HobbyModel
{
public bool IsSelected { get; set; }
public int Id { get; set; }
public string Name { get; set; }
}
Namespaces
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
List<HobbyModel> hobbies = GetHobbies();
return View(hobbies);
}
private static List<HobbyModel> GetHobbies()
{
List<HobbyModel> hobbies = new List<HobbyModel>();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
string query = "SELECT HobbyId,Hobby,IsSelected FROM Hobbies";
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
hobbies.Add(new HobbyModel
{
Id = Convert.ToInt32(sdr["HobbyId"]),
Name = sdr["Hobby"].ToString(),
IsSelected = Convert.ToBoolean(sdr["IsSelected"])
});
}
}
con.Close();
}
}
return hobbies;
}
[HttpPost]
public ActionResult Save(List<HobbyModel> selected)
{
System.Threading.Thread.Sleep(500);
string _searches = "";
foreach (HobbyModel hobby in selected)
{
if (hobby.IsSelected)
{
_searches += hobby.Id.ToString() + ",";
}
}
string url = string.Format("/Home/Search?search={0}", _searches);
return Redirect(url);
}
public ActionResult Search()
{
List<HobbyModel> hobbies = GetHobbies();
string[] checkedHobbyId = Request.QueryString["search"].Split(',');
for (int i = 0; i < hobbies.Count; i++)
{
HobbyModel hobby = hobbies[i];
for (int j = 0; j < checkedHobbyId.Length - 1; j++)
{
if (hobby.Id == Convert.ToInt32(checkedHobbyId[j]))
{
hobby.IsSelected = true;
break;
}
}
}
return View(hobbies);
}
}
View
Index
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<HobbyModel>>" %>
<%@ Import Namespace="_Loading_Pregress_CheckBox_Check.Models" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 100);
}
</script>
</head>
<body>
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="../../Images/progress.gif" alt="" />
</div>
<%using (Html.BeginForm("Save", "Home", FormMethod.Post))
{%>
<table>
<%for (int i = 0; i < Model.Count(); i++)
{%>
<tr>
<td>
<%:Html.HiddenFor(m => ((List<HobbyModel>)Model)[i].Id)%>
<%:Html.CheckBoxFor(m => ((List<HobbyModel>)Model)[i].IsSelected, new { onclick = "this.form.submit();ShowProgress();" })%>
<%:Html.DisplayFor(m => ((List<HobbyModel>)Model)[i].Name)%>
</td>
</tr>
<%}%>
</table>
<%} %>
</body>
</html>
Search
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<HobbyModel>>" %>
<%@ Import Namespace="_Loading_Pregress_CheckBox_Check.Models" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Search</title>
</head>
<body>
<table>
<%for (int i = 0; i < Model.Count(); i++)
{%>
<tr>
<td>
<%:Html.HiddenFor(m => ((List<HobbyModel>)Model)[i].Id)%>
<%:Html.CheckBoxFor(m => ((List<HobbyModel>)Model)[i].IsSelected)%>
<%:Html.DisplayFor(m => ((List<HobbyModel>)Model)[i].Name)%>
</td>
</tr>
<%}%>
</table>
</body>
</html>
Screenshot
