I have a search form. after click on search button I have this table that shows the result. I use a viewmodel to fill this table.

   @if (Model.productsDtos != null)
                                {
                                    <table  role="grid">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>count</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var item in Model.productsDtos)
                                            {
                                                <tr>
                                                    <td>@Html.DisplayFor(modelItem => item.Name)</td>
                                                    <td>@item.inventory</td>
                                                    <td>
                                                       <a href="javascript:void()" onclick="GetDetails('@item.ProductId')">Details</a>
                                                    </td>
                                                </tr>
                                            }
                                        </tbody>
                                    </table>
                                }

javascript func:

 function GetDetails(id) {
        var postData = {
            'ProductId': id,
        };
        $.ajax({
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            type: "GET",
            url: "Details",
            data: postData,
            success: function (data) { }

        });
    }

action in controller:

 [HttpGet]
        public IActionResult Details(SellerProductsViewModel model,string ProductId)
        {
            model.productDetailsDtos= _service.GetDetails(ProductId);
            return View(model);
        }

by click on details button , table doesnt show any data. in fact table not render anymore.

CodePudding user response：

You want to show details by modal in your question, So i use bootstrap modal to write a simple demo here, I hope it is what you expect.

Model

  public class Test
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string ClassName { get; set; }
        public string Country { get; set; }
    }

Controller

//For testing convenience, I just hard code here.

 List<Test> test = new List<Test>()
    {
        new Test()
        {
            Id = "1",
            Name = "JACK",
            Age = 23,
            ClassName = "ClassA",
            Country = "USA"
        },
        new Test()
        {
            Id = "2",
            Name = "NACY",
            Age = 22,
            ClassName = "ClassB",
            Country = "CHINA"
        },
        new Test()
        {
            Id = "3",
            Name = "LILY",
            Age = 27,
            ClassName = "Classc",
            Country = "UK"
        },

    };


   //I use this page to show the table

    public IActionResult Privacy()
    {
        return View(test);
    }
    
    [HttpGet]
    public IActionResult Details(string ProductId)
    {

       //I select the details by Id,It is the same function as _service.GetDetails(ProductId); in your code

        var result = test.Where(x => x.Id == ProductId).FirstOrDefault();

       // I return the details as the type of json

        return Json(result);
    }

view

@model List<Modal.Models.Test>

<h1>@ViewData["Title"]</h1>


<table  role="grid">
    <thead>
    <tr>
        <th>Name</th>
        <th>count</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Name)</td>
            <td>@item.Age</td>
            <td>
                <a href="#staticBackdrop" data-bs-toggle="modal" onclick="GetDetails('@item.Id') ">Details</a>
                
            </td>
        </tr>
    }
    </tbody>
</table>


@* This is the modal component, you can find the  same code on the bootstrap  website *@

<div  id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
  <div >
    <div >
      <div >
        <h5  id="staticBackdropLabel">Details</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div  id="Test">
        ...
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>




@section Scripts
{
    <script>
    function GetDetails(id) {       
        
        var postData = {
                    'ProductId': id,
                };
            $.ajax({
                dataType: 'json',            
                type: "GET",
                url: "/Home/details",
                data: postData,              
                success: function (res) { 
                    console.log(res)
                    document.getElementById("Test").innerHTML = '<table  role="grid">'
                                                                  '<thead><tr><th>Id</th><th>Name</th><th>Age</th><th>ClassName</th><th>Country</th></tr></thead>'                                                                
                                                                  '<tbody><tr><td>' res["id"] '</td><td>' res["name"] '</td><td>' res["age"] '</td><td>' res["className"] '</td><td>' res["country"] '</td></tr></tbody>'
                                                                  '</table>';

                  
                  $('#staticBackdrop').modal()
                },
                

            });
        }
    </script>
}

Show results