I am getting one issue in MVC project that when I load the page at that time view design is perfect but after the click event time when I called the same view at that time it changed the design.
I used one partial view, one view and one controller.
Now when call the index event at load event time the theme of website showing perfect. Here is the image:
Here is my controller code of index event:
public ActionResult Index()
{
try
{
var getYear = db.yearMaster.OrderBy(y => y.Year).ToList();
SelectList yearList = new SelectList(getYear, "YearID", "Year");
ViewBag.YearListName = yearList;
var getEvent = db.eventMaster.OrderBy(y => y.Event).ToList();
SelectList eventList = new SelectList(getEvent, "EventID", "Event");
ViewBag.EventListName = eventList;
var getBranch = db.branch.OrderBy(y => y.Branch).ToList();
SelectList branchList = new SelectList(getBranch, "BranchID", "Branch");
ViewBag.BranchListName = branchList;
var content = db.eventRegistration.Select(s => new
{
s.EventRegistrationID,
s.Image,
s.IsActive
}).Where(c => c.IsActive == true).Take(15).ToList();
List<EventRegistrationViewModel> contentModel = content.Select(item => new EventRegistrationViewModel()
{
EventRegistrationID = item.EventRegistrationID,
Image = item.Image,
IsActive = item.IsActive
}).ToList();
return View(contentModel);
}
catch (Exception ex)
{
return View();
}
}
Here is the view named index.cshtml:
@model IEnumerable<SchoolWebApplication.ViewModel.EventRegistrationViewModel>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_PublicLayout.cshtml";
}
@*<script src="~/Scripts/jquery-1.8.2.min.js"></script>*@
<script src="~/js/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="~/js/jquery.fancybox.js?v=2.1.3"></script>
<link href="~/Context/jquery.fancybox.css?v=2.1.2" rel="stylesheet" media="screen" />
<link href="~/js/jquery.fancybox.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#ShowImage").fancybox({
helpers:
{
title:
{
type: 'float'
}
}
});
});
</script>
<style type="text/css">
.imgBox
{
width: 200px;
height: 200px;
opacity: 1.0;
filter: alpha(opacity=100);
}
.imgBox:hover
{
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
@using (Html.BeginForm("FilterImage", "Glimpses", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<script>
$(function () {
$("#YearList").change(function () {
$("#yearID").val($(this).val());
});
$("#eventList").change(function () {
$("#eventID").val($(this).val());
});
$("#branchList").change(function () {
$("#branchID").val($(this).val());
});
});
</script>
<fieldset>
<legend>
<div class="row">
<div class="col-sm-2" style="margin-left: 38px; width:149px">
@Html.DropDownList("YearList", ViewBag.YearListName as SelectList, "Select Year")
</div>
<div class="col-sm-2">
@Html.DropDownList("eventList", ViewBag.EventListName as SelectList, "Select Event")
</div>
<div class="col-sm-5">
@Html.DropDownList("branchList", ViewBag.BranchListName as SelectList, "Select Branch")
</div>
<div class="col-sm-1">
<input type="submit" value="Get Image" id="btn_searchimage" />
</div>
</div>
</legend>
</fieldset>
<div style="height:600px; margin-left: 25px;">
<div style="border-bottom:1px solid Red;"></div>
<div class="row-fluid">
<div class="span2">
<div class="item">
@foreach (var item in Model)
{
<script>
alert();
</script>
<div style=" margin:10px; float:left; height:200px; overflow:hidden; width:200px;">
<a id="ShowImage" class="fancybox-button" data-rel="fancybox-button"
href="#">
<div class="zoom">
<img src='/Glimpses/RetrieveEventImage/@item.EventRegistrationID' alt="No Image" class="imgBox"/>
<div class="zoom-icon"></div>
</div>
</a>
</div>
}
</div>
</div>
</div>
</div>
}
Now, up to this there is no problem but if I filter the data as seen in image and call the view, at that time the design is changed.
Here is the image of the changed image:
Here is the filterimage event code in the same controller:
public ActionResult FilterImage(EventRegistrationViewModel eventRegistrationViewModel, int yearList, int eventList, int branchList) //
{
try
{
var getYear = db.yearMaster.OrderBy(y => y.Year).ToList();
SelectList abc = new SelectList(getYear, "YearID", "Year");
ViewBag.YearListName = abc;
var getEvent = db.eventMaster.OrderBy(y => y.Event).ToList();
SelectList def = new SelectList(getEvent, "EventID", "Event");
ViewBag.EventListName = def;
var getBranch = db.branch.OrderBy(y => y.Branch).ToList();
SelectList ijk = new SelectList(getBranch, "BranchID", "Branch");
ViewBag.BranchListName = ijk;
var content = db.eventRegistration.Select(s => new
{
s.EventRegistrationID,
s.EventID,
s.Image,
s.IsActive,
s.YearID,
s.BranchID
}).Where(c => c.IsActive == true && c.YearID == yearList && c.BranchID == branchList && c.EventID == eventList).ToList();
List<EventRegistrationViewModel> contentModel = content.Select(item => new EventRegistrationViewModel()
{
EventRegistrationID = item.EventRegistrationID,
Image = item.Image,
IsActive = item.IsActive,
YearID = yearList,
BranchID = branchList
}).ToList();
return View("index",contentModel);
}
catch (Exception ex)
{
return View();
}
}
