locked
Asp.Net Core Category - Product RRS feed

  • Question

  • User197255166 posted

    Hi,

    I am using .net core. 

    I have 2 tables that I want to make connected. According to the category table I want to come to the product table. How can I do it.

    Index.csHtml

     <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" data-filter="all">Hepsi</button>
                        @foreach (var item in ViewBag.Pcat)
                        {
                            <button type="button" class="control" data-filter=".@item.Id">@item.KategoriAd</button>
                        }
                    </div>
                </div>
                <div class="filter-items">
                    <div class="row">
                       @foreach (var items in ViewBag.Proje)
                        {
                            <div class="mix col-lg-4 col-md-4 col-sm-12 col-12 @items.CatId">
                                <div class="box-item">
                                    <a href="~/resimler/@items.ResimYolu" data-rel="lightcase">
                                    <img class="img-fluid" src="~/resimler/@items.ResimYolu" alt="item1" /></a>
                                    <a href="~/resimler/@items.ResimYolu" data-rel="lightcase">
                                        <h3 class="item-name mb-0">@items.Baslik</h3>
                                    </a>
                                    <span class="cat-name">@items.İcerik</span>
                                </div>
                            </div>
    
                        }
    
                    </div>
                </div>
            </div>
        </section>

    Home Controller

      var pcat = port.TProjeCategory.AsQueryable().ToList();
      ViewBag.Pcat = pcat;
    
    var proje = port.TProjects.AsQueryable().ToList();
      ViewBag.Proje = proje;

    Saturday, September 14, 2019 1:31 PM

All replies

  • User475983607 posted

    Forum members cannot see your table design.  How is the category joined to the product table?

    Saturday, September 14, 2019 4:59 PM
  • User197255166 posted

    Hi ,

    I show table desing and shared my code .

    Saturday, September 14, 2019 5:14 PM
  • User475983607 posted

    I show table desing and shared my code .

    Two link queries are shared without any indication how the tables are joined.   Once again, can you share the table schema?  

    Saturday, September 14, 2019 5:36 PM
  • User197255166 posted

    Hi,

    I shared database schema.

    Saturday, September 14, 2019 5:54 PM
  • User409696431 posted

    You have no image in your posts.

    You are linking to an image that results in a "Forbidden" error.

    Don't use an image - just post the table structure.

    Sunday, September 15, 2019 12:39 AM
  • User197255166 posted

    What can I do more ? How is post table structure. I explained the problem enough

    Sunday, September 15, 2019 10:41 AM
  • User475983607 posted

    What can I do more ? 

    Share the table schema, entities, and/or fluent source code.

    How is post table structure. I explained the problem enough

    You've explained the problem but have not shared enough information for the community to provide an accurate solution.  The code you shared....

      var pcat = port.TProjeCategory.AsQueryable().ToList();
      ViewBag.Pcat = pcat;
    
    var proje = port.TProjects.AsQueryable().ToList();
      ViewBag.Proje = proje;

    ...queries two tables.   The code does not indicate if the tables are related in any meaningful way. The fact that you think you've provided enough code indicates you need to spend more time learning the fundamentals.

    Products and Categories is a standard learning pattern.  Usually there is a third table ProductCategory that contains a ProductId and CategoryId.  A basic LINQ to Entities query can produce the products in a category.  This concept is covered in just about every get started EF Core tutorial.

    If you want help from the community then we need to see your table schema otherwise we are just guessing what bugs exist in your design and code.  Another option is setting aside time to learn LINQ to Entities fundamentals,

    https://docs.microsoft.com/en-us/ef/core/modeling/

    https://docs.microsoft.com/en-us/ef/core/modeling/relational/tables

    Sunday, September 15, 2019 11:13 AM
  • User197255166 posted

    But I am using Entity DB First. So I shared DB Diagram,  and code. I want to do explained.

    Sunday, September 15, 2019 11:28 AM
  • User475983607 posted

    Aliyilmaz

    But I am using Entity DB First. So I shared DB Diagram,  and code. I want to do explained.

    We cannnot see the image as explained by Kathy.  You'll need to publish the image on the internet and link to the image. 

    Second, this is an EF Core support forum and EF Core does not have the DB first feature only Code First.  Are you in the wrong forum?

    It's very puzzling why you are unable to explain the Product and Category design.  Are you following a tutorial or downloaded the database?  If so, point us to the tutorial.  If you designed the tables yourself, which is how DB first works, then you should be fully aware of how you designed the schema and how the IDs are related.

    Sunday, September 15, 2019 11:48 AM
  • User197255166 posted

    Hi,

    You dont see my post picture ? I create table sqlFiddle. 

    http://sqlfiddle.com/#!18/c5ce8/3

    Sunday, September 15, 2019 12:56 PM
  • User475983607 posted

    You dont see my post picture ?

    Correct we cannot see the images.

    The following is a basic JOIN using SQL.

    SELECT	p.ID,
    		p.Baslik,
    		p.Icerik,
    		p.ResimYolu,
    		c.KategoriAd
    FROM T_Projects AS p 
    	JOIN T_ProjeCategory AS c ON p.CatID = c.ID

    Your link query will be similar to the following.

    public ActionResult Index()
    {
        TestDbEntities context = new TestDbEntities();
        var results = context.T_Projects;
        return View(results);
    }

    I simply scaffolded the View using tools in Visual Studio

    @model IEnumerable<MvcDbFirst.T_Projects>
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Baslik)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Icerik)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ResimYolu)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.T_ProjeCategory.KategoriAd)
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Baslik)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Icerik)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ResimYolu)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.T_ProjeCategory.KategoriAd)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
                @Html.ActionLink("Details", "Details", new { id=item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.ID })
            </td>
        </tr>
    }
    
    </table>
    

    But, you still have not provided the EF version you are using.   The example above is from EF 6 because, as stated above, EF Core does not have a DB first.  I assume you posted in the wrong forum.

    Lastly, I strongly recommend that you go through the Getting Tutorials found on this site.  The code shown above is a fundamental concept that you need to understand before moving forward.

    https://docs.microsoft.com/en-us/ef/ef6/modeling/designer/workflows/database-first

    Sunday, September 15, 2019 1:34 PM
  • User1120430333 posted

    A Project can only have one Category. It can't have multiple Categories. It looks to me that all you need is a CategoryID column on the Project table definition.<br>
    <br>
    Just what are you trying to accomplish?
    Are you using EF Core?
    Sunday, September 15, 2019 1:40 PM
  • User197255166 posted

    I know create database with MVC. But I want to do dynamic jquery mixitup, Can you see first post my code.

    For example : https://codepen.io/SitePoint/pen/zxEdQr/

    Index.cshtml

    <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" data-filter="all">Hepsi</button>
                        @foreach (var item in ViewBag.Pcat)
                        {
                            <button type="button" class="control" data-filter=".@item.Id">@item.KategoriAd</button>
                        }
                    </div>
                </div>
                <div class="filter-items">
                    <div class="row">
                       @foreach (var items in ViewBag.Proje)
                        {
                            <div class="mix col-lg-4 col-md-4 col-sm-12 col-12 @items.CatId">
                                <div class="box-item">
                                    <a href="~/resimler/@items.ResimYolu" data-rel="lightcase">
                                    <img class="img-fluid" src="~/resimler/@items.ResimYolu" alt="item1" /></a>
                                    <a href="~/resimler/@items.ResimYolu" data-rel="lightcase">
                                        <h3 class="item-name mb-0">@items.Baslik</h3>
                                    </a>
                                    <span class="cat-name">@items.İcerik</span>
                                </div>
                            </div>
    
                        }
    
                    </div>
                </div>
            </div>
        </section>

    Sunday, September 15, 2019 1:42 PM
  • User475983607 posted

    So, your actual question is how to use a 3rd party library name mix it up?  At the same time, it seems you do not understand EF and MVC fundamentals which is causing the confusion with the JavaScript Library.  Build a View Model to shape the data for use with mix it up.  Read the mix it up documentation so you understand how to shape the View Model.

    https://www.kunkalabs.com/mixitup/ 

    In the future, please be more explicit about the problem you are trying to solve.  This allows the community to provide accurate assistance without having to ask several several clarifying followup questions.

    Sunday, September 15, 2019 2:07 PM
  • User1120430333 posted
    Are you trying to get all Projects that are associated to a particular Category?
    Sunday, September 15, 2019 2:08 PM
  • User197255166 posted

    Hi DA924,

    Yes, someone finally understood. 

    Please. I shared my code and database schema. Could you share an appropriate example.

    Sunday, September 15, 2019 2:18 PM
  • User475983607 posted

    Please. I shared my code and database schema. Could you share an appropriate example.

    Craft a simple LINQ query that filters by category.

    public ActionResult Index(string category)
    {
        TestDbEntities context = new TestDbEntities();
        List<T_Projects> products = new List<T_Projects>();
    
        var query = context.T_Projects.AsQueryable();
    
        if (!string.IsNullOrEmpty(category))
        {
            query = query.Where(c => c.T_ProjeCategory.KategoriAd == category);
        }
                
        return View(query.ToList());
    }

    Sample URL.

    https://localhost:44391/?category=Web%20Site

    You can also do this with a post.  The query stays the same.

            [HttpGet]
            public ActionResult Index()
            {
                TestDbEntities context = new TestDbEntities();
                var results = context.T_Projects;
                return View(results);
            }
    
            [HttpPost]
            public ActionResult Index(string Category)
            {
                TestDbEntities context = new TestDbEntities();
                List<T_Projects> products = new List<T_Projects>();
    
                var query = context.T_Projects.AsQueryable();
    
                if (!string.IsNullOrEmpty(Category))
                {
                    query = query.Where(c => c.T_ProjeCategory.KategoriAd == Category);
                }
    
                return View(query.ToList());
            }
    @model IEnumerable<MvcDbFirst.T_Projects>
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <form method="post">
        <input type="text" name="Category" />
        <input id="Submit1" type="submit" value="submit" />
    </form>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Baslik)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Icerik)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ResimYolu)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.T_ProjeCategory.KategoriAd)
            </th>
            <th></th>
        </tr>
    
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Baslik)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Icerik)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ResimYolu)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.T_ProjeCategory.KategoriAd)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
                @Html.ActionLink("Details", "Details", new { id=item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.ID })
            </td>
        </tr>
    }
    
    </table>
    

    Again, these concepts are openly covered in any Getting Started with MVC tutorial.

    Sunday, September 15, 2019 2:40 PM
  • User1120430333 posted
    IMO, you need a dropdownlist for Category that is part of the Project view for Project creation or edit. To create the Project, a Category must be selected with the dropdownlist holding the CategoryID that must be saved on the Project record.

    Then if you want to have view that allows to select all Projects belonging to a particular Category selected from the dropdownlist, you can take the selected CategoryID and query the Project table for all Project records the have the CategoryID in the Project record

    The key I think is that you need a CategoryID on the Project table

    Sunday, September 15, 2019 2:44 PM
  • User197255166 posted

    Hi mgebhard,

    I did like your example. But I want to do with jquery. I dont want page is postback. How can I do ?

    Sunday, September 15, 2019 2:55 PM
  • User475983607 posted

    Aliyilmaz

    I did like your example. But I want to do with jquery. I dont want page is postback. How can I do ?

    You change the requirements with each new post.   At this point you have not shared a single line of jQuery code.  I think you should try writing the jQuery/AJAX code yourself.  Share your code if you run into trouble.  Also, I think you are trying to use a 3rd party library and need to read the documentation.

    Sunday, September 15, 2019 3:08 PM
  • User197255166 posted

    Hi,

    When I click the button but dont get json result.

    Index.cshtml

            <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" data-filter="all">Hepsi</button>
                            @foreach (var item in ViewBag.Pcat)
                            {
                                <button id="getir" asp-controller="Home" asp-action="Index" asp-route-id="@item.Id" class="control" 
                                        data-filter=".@item.Id">@item.KategoriAd</button>
                            }
                        </div>
                    </div>
                    <div class="filter-items">
                        <div class="row">
                            @foreach (var item in ViewBag.Proje)
                            {
                                <div class="mix col-lg-4 col-md-4 col-sm-12 col-12 @item.CatId">
                                    <div class="box-item">
                                        <a href="~/resimler/@item.ResimYolu" data-rel="lightcase">
                                            <img class="img-fluid" src="~/resimler/@item.ResimYolu" alt="item1" />
                                        </a>
                                        <a href="~/resimler/@item.ResimYolu" data-rel="lightcase">
                                            <h3 class="item-name mb-0">@item.Baslik</h3>
                                        </a>
                                        <span class="cat-name">@item.İcerik</span>
                                    </div>
                                </div>
    
                            }
    
                        </div>
                    </div>
                </div>
            </section>

    Layout.cshtml (Javascript)

        <script type="text/javascript">
            $(document).ready(function () {
                $("#getir").click(function () {
                    $.ajax({
                        type: 'POST',
                        url: '/Home/GetProje/',
                        contentType: "application/json; charset=utf-8",
                        dataType: 'json',
                        success: function (data) {
                            $.each(data, function (i, item) {
                                $("#TumOgrenciler").append(
    
                                );
                            });
                        }
                    });
                });
            });
        </script>

    Home Controller

            [HttpPost]
            public JsonResult GetProje(int id)
            {
                using (PortfoliosContext port = new PortfoliosContext())
                { 
                    var projes = port.TProjects.Where(x => x.CatId == id).AsQueryable().ToList();
                       
                        ViewBag.Proje = projes;        
                   
    
    
                    return Json(projes);
                }
            }

    Sunday, September 15, 2019 3:44 PM
  • User475983607 posted

    There's no response because your code does not submit the Id.  If you were using debug tools like Dev Tools you should see errors.  Also if you set a break point in VS you'll notice the action is not hit.

    IMHO, your filter design is a little confusing too.  Anyway, below is a basic example that builds my previous posts.

        public class HomeController : Controller
        {
            private readonly TestDbEntities context;
            public HomeController()
            {
                context = new TestDbEntities();
            }
            [HttpGet]
            public ActionResult Index()
            {
                var results = context.T_Projects;
                return View(results);
            }
    
            [HttpPost]
            public JsonResult Search(string Category)
            {
                //Projection query to populate the product view model
                List<ProductViewModel> products = (from prod in context.T_Projects
                                                   where prod.T_ProjeCategory.KategoriAd == Category
                                                   select new ProductViewModel()
                                                   {
                                                       Baslik = prod.Baslik,
                                                       Icerik = prod.Icerik,
                                                       ProductId = prod.ID,
                                                       ResimYolu = prod.ResimYolu
                                                   }).ToList();
    
                return Json(products);
            }

    View

    @model IEnumerable<MvcDbFirst.T_Projects>
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <div>
        <input type="text" name="Category" id="Category" />
        <input id="Search" type="button" value="Search" />
    </div>
    <hr />
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Baslik)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Icerik)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ResimYolu)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.T_ProjeCategory.KategoriAd)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Baslik)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Icerik)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ResimYolu)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.T_ProjeCategory.KategoriAd)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                        @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                        @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                    </td>
                </tr>
            }
        </tbody>
    
    
    </table>
    @section scripts {
        <script>
            $('#Search').click(function () {
                var data = {
                    Category: $('#Category').val()
                };
    
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("Search")',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    data: JSON.stringify(data),
                    success: function (response) {
                        console.log(response);
                    }
                });
            });
        </script>
    }
    

    Model

        public class ProductViewModel
        {
            public int ProductId { get; set; }
            public string Baslik { get; set; }
            public string Icerik { get; set; }
            public string ResimYolu { get; set; }
        }

    Feel free to modify the example to fit your needs.  Remember to use the debugging tools and make at least an attempt to troubleshoot.

    Sunday, September 15, 2019 6:02 PM
  • User197255166 posted

    Hi mgebhard,

    Can you do example with my code please. So when I click category button according to product get data after append html textbox. How can I do ?

     @foreach (var item in ViewBag.Proje)
                            {
                                <div class="mix col-lg-4 col-md-4 col-sm-12 col-12 @item.CatId">
                                    <div class="box-item">
                                        <a href="~/resimler/@item.ResimYolu" data-rel="lightcase">
                                            <img class="img-fluid" src="~/resimler/@item.ResimYolu" alt="item1" />
                                        </a>
                                        <a href="~/resimler/@item.ResimYolu" data-rel="lightcase">
                                            <h3 class="item-name mb-0">@item.Baslik</h3>
                                        </a>
                                        <span class="cat-name">@itemcerik</span>
                                    </div>
                                </div>
    
                            }
    Saturday, September 21, 2019 7:08 PM
  • User197255166 posted

    Can anyone help me ? 

    Wednesday, September 25, 2019 5:11 PM
  • User1634355159 posted

    Hi Aliyilmaz,

    Your onclick event does not put the id you want to pass, here is my demo:

    Model:

     public class Cat
        {
            public int Id { get; set; }
            public string KategoriAd { get; set; }
            public ICollection<TProject> TProjects { get; set; }
        }
    
     public class TProject
        {
            public int Id { get; set; }
            public string ResimYolu { get; set; }
            public string Baslik { get; set; }
            public string İcerik { get; set; }
            public int CatId { get; set; }
            public virtual Cat Cat { get; set; }
        }

    View:

    <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" data-filter="all">Hepsi</button>
                    @foreach (var item in ViewBag.Pcat)
                    {
                        <button onclick="GetProje(@item.Id)">
                            @item.KategoriAd
                        </button>
                    }
                </div>
            </div>
            <div class="filter-items">
                <div class="row">
                    @foreach (var item in ViewBag.Proje)
                    {
                        <div class="mix col-lg-4 col-md-4 col-sm-12 col-12 @item.CatId">
                            <div class="box-item">
                                <h3 class="item-name mb-0">@item.Baslik</h3>
                                <span class="cat-name">@item.İcerik</span>
                            </div>
                        </div>
                    }
    
                </div>
            </div>
        </div>
    </section>
    @section Scripts {
        <script type="text/javascript">
            $(document).ready(function () {
               
            });
        function GetProje(id) {
             $.ajax({
                        type: 'POST',
                        url: '/Product/GetProje/',
                        dataType: 'json',
                        data: { id: id},
                        success: function (data) {              
                            // The json result will here
                            console.log(data)
                        },
                        failure: function (response) {
    
                        },
                        error: function (response) {
    
                        }
                    });     
        }
        </script>
    }

    Controller:

    public IActionResult Index()
            {
                var projes = _context.TProjects.AsQueryable().ToList();
                var cats = _context.Cats.AsQueryable().ToList();
                ViewBag.Proje = projes;
                ViewBag.Pcat = cats;
                return View();
            }
    
    [HttpPost]
    public JsonResult GetProje(int id)
            {
                    var projes = _context.TProjects.Where(x => x.CatId == id).AsQueryable().ToList();
    
                    ViewBag.Proje = projes;
                    return Json(projes);
            }

    Best Regards ,

    Lewis

    Friday, September 27, 2019 6:41 AM
  • User197255166 posted

    Hi Lewis,

    I changed the code a little. Because when you press the button, projects will come according to that category id. I do not come id that way. 

    Also how to get projects by category. Isn't jquery right?

    Index.cshtml

                    <div id="Projeler" class="filter-items">
                        <div class="row">
                            @foreach (var item in ViewBag.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" asp-append-version="true" 
                                           data-rel="lightcase">
                                            <img class="img-fluid resim" 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.İcerik</span>
                                    </div>
                                </div>
    
                            }
    
                        </div>
                    </div>

    Jquery,

        <script type="text/javascript">
                $(document).ready(function () {
                    $(".but").click(function () {
                        function GetProje(id) {
                            $.ajax({
                                type: 'GET',
                                url: '/Home/GetProje/',
                                data: { id: id },
                                contentType: "application/json; charset=utf-8",
                                dataType: 'json',
                                success: function (data) {
                                   
                                    $.each(data, function (i, item) {
    
                                        $("#catid").append(item.catId);
                                        $("#catresim").append(item.resimYolu);
                                        $(".resim").append(item.resimYolu);
                                        $("#catitem").append(item.baslik);
                                        $("#catname").append(item.İcerik);
    
                                    });
    
                                },
                                error: function (response) {
                                    alert(response.responseText);
                                }
                            });
                        };
                    });
                });
            
            </script>

    Saturday, September 28, 2019 12:41 PM
  • User1634355159 posted

    Hi Aliyilmaz,

    I don't recommend that you use your way ,because it will generate multiple tags with the same id in your page, which doesn't match the id is only principle, you could use js splicing, like this:

    Index:

    <div class="filter-items">
         <div class="row">
              <div id="propart"></div>
         </div>
    </div>

    Jquery:

    @section Scripts {
        <script type="text/javascript">
            $(document).ready(function () {
            });
            function GetProje(id) {
                $.ajax({
                    type: 'POST',
                    url: '/Product/GetProje/',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    data: { id: id },
                    success: function (data) {
                        var html = "";
                        for (var i = 0; i < data.length; i++) {
                            html += '<div class="mix col-lg-4 col-md-4 col-sm-12 col-12' + data[i].catId + '">' + 
    '<div class="box-item">' + '<h3 class="item-name mb-0">' + data[i].baslik + '</h3><span class="cat-name">' + data[i].İcerik +
    '</span></div></div>'; } html = html.replace(/null/g, "").replace(/undefined/g, ""); $("#propart").empty(); $("#propart").html(html);
    }, failure: function (response) { }, error: function (response) { } }); } </script> }

    Best Regards ,

    Lewis

    Monday, September 30, 2019 9:33 AM