Hi AliYilmaz,
Check this example. Now please take its reference and correct your code.
In page load all the Projects data display in the page and on button click respective Category Projects will be displayed.
SQL
CREATE TABLE T_ProjeCategory
(
ID int primary key IDENTITY(1,1) NOT NULL,
KategoriAd nvarchar(100)
)
CREATE TABLE T_Projects
(
ID int primary key IDENTITY(1,1) NOT NULL,
Baslik nvarchar(150),
Icerik nvarchar(500),
ResimYolu nvarchar(255),
CatID int references T_ProjeCategory(ID)
)
INSERT INTO T_ProjeCategory ([KategoriAd])VALUES('Web Site')
INSERT INTO T_ProjeCategory ([KategoriAd])VALUES('Mobil Uygulama')
INSERT INTO T_Projects ([Baslik],[Icerik],[ResimYolu],[CatID])VALUES('Yeni Proje','Açıklama','jsakj.jpg','1')
INSERT INTO T_Projects ([Baslik],[Icerik],[ResimYolu],[CatID])VALUES('Eski Proje','Açıklama','jak.png','1')
INSERT INTO T_Projects ([Baslik],[Icerik],[ResimYolu],[CatID])VALUES('Ahsısı','Açıklama','akkll.jpg','2')
SELECT * FROM T_ProjeCategory
SELECT * FROM T_Projects
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
using (PortfoliosContext port = new PortfoliosContext())
{
TempData["Pcat"] = port.TProjeCategories.AsQueryable().ToList();
TempData["Proje"] = port.TProjects.AsQueryable().ToList();
}
return View();
}
public JsonResult GetProje(string id)
{
using (PortfoliosContext port = new PortfoliosContext())
{
if (id != "all")
{
int i = Convert.ToInt32(id);
var projes = (from v in port.TProjects
where v.CatID == i
select new
{
v.CatID,
v.Baslik,
v.ResimYolu,
v.Icerik
}).ToList();
return Json(projes, JsonRequestBehavior.AllowGet);
}
else
{
var projes = (from v in port.TProjects
select new
{
v.CatID,
v.Baslik,
v.ResimYolu,
v.Icerik
}).ToList();
return Json(projes, JsonRequestBehavior.AllowGet);
}
}
}
}
View
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".but").click(function () {
$("#ids").val($(this).attr('data-id'));
$.ajax({
type: 'GET',
url: '/Home/GetProje/',
data: { id: $("#ids").val() },
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (data) {
$('#Projeler .row').show();
var projeler = $('#Projeler .row #catid:last-child').clone(true);
$("#Projeler #catid").remove();
$.each(data, function (i, item) {
$(projeler).removeClass().addClass('mix col-lg-4 col-md-4 col-sm-12 col-12 ' + item.CatID);
$(projeler).find("#catresim").attr('href', 'resimler/' + item.ResimYolu);
$(projeler).find("#catresim").find('img').attr('src', 'resimler/' + item.ResimYolu);
$(projeler).find("#catitem").parent().attr('href', 'resimler/' + item.ResimYolu);
$(projeler).find("#catitem").html(item.Baslik);
$(projeler).find("#catname").html(item.Icerik);
$('#Projeler .row').append(projeler);
projeler = $("#Projeler .row #catid:last-child").clone(true);
});
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
<section id="td_work" class="td-work">
<div class="container">
<div class="d-flex justify-content-between mb-60">
<h2 class="section-title color-1 mb-0">Biten <span>Projeler</span></h2>
<div class="controls">
<button type="button" class="control but" data-id="all" data-filter="all">Hepsi</button>
<input id="ids" type="text" name="id" />
<%foreach (var item in (List<TProjeCategory>)TempData["Pcat"])
{%>
<button data-id="<%=item.ID%>" asp-route-id="<%=item.ID%>" class="control but"><%=item.KategoriAd %></button>
<%} %>
</div>
</div>
<br />
<div id="Projeler" class="filter-items">
<div class="row">
<%foreach (var item in (List<TProjects>)TempData["Proje"])
{%>
<div id="catid" class="mix col-lg-4 col-md-4 col-sm-12 col-12 <%=item.CatID%>">
<div class="box-item">
<a id="catresim" class="resim" href="resimler/<%=item.ResimYolu%>" data-rel="lightcase">
<img class="img-fluid" src="resimler/<%=item.ResimYolu%>" alt="item1" />
</a>
<a class="resim" href="resimler/<%=item.ResimYolu%>" data-rel="lightcase">
<h3 id="catitem" class="item-name mb-0"><%=item.Baslik%></h3>
</a>
<span id="catname" class="cat-name"><%=item.Icerik%></span>
</div>
</div>
<%} %>
</div>
</div>
</div>
</section>
Screenshot
