javascript - How to display the values from ajax success data to the html table?

I need to view the ajax success message in my html table my cshtml code is:

@*@{Customer.Models.Customers cust = ViewBag.Customers;
}*@
@{ 
            }

    <center><h1 style="color:red">User details</h1></center>

<div>
    <table class="table">

        <tr>
            <td>ID</td>
            <td>res.Id</td>
        </tr>
        <tr>
            <td>FIRST NAME</td>
            <td>res.Fname</td>
        </tr>
        <tr>
            <td>LAST NAME</td>
            <td>res.Lname</td>
        </tr>
        <tr>
            <td>LOCATION</td>
            <td>res.Location</td>
        </tr>
        <tr>
            <td>Contact</td>
            <td>res.Contact</td>
        </tr>
        <tr>
            <td>Email</td>
            <td>res.Email</td>
        </tr>
        <tr>
            <td>Password</td>
            <td>res.Password</td>
        </tr>
        <tr>
            <td>Role</td>
            <td>res.Category</td>
        </tr>
        <tr>

    </table>
</div>
@section Scripts{
    <script>
            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Details/" + id,
                success: function (data) {
                    alert('Wele!');
                    res = data;


                   // window.location.href = "/Home/Details/" + data.id;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#postResult").val(jqXHR.statusText);
                }
            });
    </script>
}

Is there any way to use the success data to pass in the each table row? That is I want the res to store the success data and then pass it to the table fields like res.Fname (eg) and it should display the data accordingly.

I need to view the ajax success message in my html table my cshtml code is:

@*@{Customer.Models.Customers cust = ViewBag.Customers;
}*@
@{ 
            }

    <center><h1 style="color:red">User details</h1></center>

<div>
    <table class="table">

        <tr>
            <td>ID</td>
            <td>res.Id</td>
        </tr>
        <tr>
            <td>FIRST NAME</td>
            <td>res.Fname</td>
        </tr>
        <tr>
            <td>LAST NAME</td>
            <td>res.Lname</td>
        </tr>
        <tr>
            <td>LOCATION</td>
            <td>res.Location</td>
        </tr>
        <tr>
            <td>Contact</td>
            <td>res.Contact</td>
        </tr>
        <tr>
            <td>Email</td>
            <td>res.Email</td>
        </tr>
        <tr>
            <td>Password</td>
            <td>res.Password</td>
        </tr>
        <tr>
            <td>Role</td>
            <td>res.Category</td>
        </tr>
        <tr>

    </table>
</div>
@section Scripts{
    <script>
            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Details/" + id,
                success: function (data) {
                    alert('Wele!');
                    res = data;


                   // window.location.href = "/Home/Details/" + data.id;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#postResult").val(jqXHR.statusText);
                }
            });
    </script>
}

Share Improve this question asked Feb 25, 2020 at 10:53 Ananthakrishna 5178 silver badges26 bronze badges

you need to display value in one column alone or multiple columns – AakashRajni Commented Feb 25, 2020 at 11:07
I need to display each value in the corresponding columns – Ananthakrishna Commented Feb 25, 2020 at 11:51
If you are using razor pages this repo and demo can help you. Basically there is a partial view rendering the ajax part inside the main razor page. The project depends on a custom PagingTagHelper with ajax support. – LazZiya Commented Feb 25, 2020 at 14:06
Did you have two projects , one web project and one web api ? Did you want to use ajax in the web project to call the methods in the web api project and then display the return value in the web project? – Xueli Chen Commented Feb 26, 2020 at 3:43
@XueliChen i have one solution which contains 2 controllers api and home. All i want is that i just converted my home controller action controls to my view as ajax. but i could not get that value in my html table. – Ananthakrishna Commented Feb 26, 2020 at 4:07

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

There are many way you can populate your table through Ajax response. Here the most readable and popular way you could try. See the below code snippet.

<table id="YourTableId" class="table table-bordered table-striped table-responsive table-hover">  
    <thead>  
        <tr>  
            <th align="left" class="yourTableTh">YourProperty</th>  
            <th align="left" class="yourTableTh">YourProperty2</th>  
            <th align="left" class="yourTableTh">YourProperty3</th>  
        </tr>  
    </thead>  
    <tbody></tbody>  
</table>                

<script>
        $.ajax({
            contentType: "application/json",
            type: "GET",
            url: "https://localhost:44397/api/Values/Details/" + id,
            success: function (data) {
                alert('Wele!');
               // res = data;
                        var items = '';  
                        $.each(data, function (i, item) {  
                            var rows = "<tr>"  
                            + "<td class='yourTableTh'>" + item.YourProperty + "</td>"  
                            + "<td class='yourTableTh'>" + item.YourProperty2 + "</td>"  
                            + "<td class='yourTableTh'>" + item.YourProperty3 + "</td>"  
                            + "</tr>";  
                            $('#YourTableId tbody').append(rows);  
                        });  

               // window.location.href = "/Home/Details/" + data.id;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#postResult").val(jqXHR.statusText);
            }
        });
</script>

Another Way Using C# Viewbag:

 <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Property Header</th>
                        <th>Property Header</th>
                        <th>Property Header</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in ViewBag.ViewBagName)
                    {
                        <tr>
                            <td>@item.PropertyName</td>
                            <td>@item.PropertyName</td>
                            <td>@item.PropertyName</td>
                        </tr>
                    }
                </tbody>
   </table>

Let me know if you have any additional question. Hope that would help.

If you need to show value in one column alone then use this type

@*@{Customer.Models.Customers cust = ViewBag.Customers;
}*@
@{ 
            }

    <center><h1 style="color:red">User details</h1></center>

<div>
    <table class="table">

        <tr>
            <td>ID</td>
            <td id="Id"></td>
        </tr>
        <tr>
            <td>FIRST NAME</td>
            <td id="Fname"></td>
        </tr>
        <tr>
            <td>LAST NAME</td>
            <td id="Lname"></td>
        </tr>
        <tr>
            <td>LOCATION</td>
            <td id="Location"></td>
        </tr>
        <tr>
            <td>Contact</td>
            <td id="Contact"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td id="Email"></td>
        </tr>
        <tr>
            <td>Password</td>
            <td id="Password"></td>
        </tr>
        <tr>
            <td>Role</td>
            <td id="Category"></td>
        </tr>
        <tr>

    </table>
</div>
@section Scripts{
    <script>
            $.ajax({
                contentType: "application/json",
                type: "GET",
                url: "https://localhost:44397/api/Values/Details/" + id,
                success: function (data) {
                    alert('Wele!');
                    res = data;
                    document.getElementById("Id").innerHTML = res.Id;
                    document.getElementById("Fname").innerHTML= res.Fname;
                    document.getElementById("Lname").innerHTML= res.Lname;
                    document.getElementById("Location").innerHTML= res.Location;
                    document.getElementById("Contact").innerHTML= res.Contact;
                    document.getElementById("Email").innerHTML= res.Email;
                    document.getElementById("Password").innerHTML= res.Password;
                    document.getElementById("Category").innerHTML= res.Category;
                   // window.location.href = "/Home/Details/" + data.id;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#postResult").val(jqXHR.statusText);
                }
            });
    </script>
}

I think it will help you :)

You could use Partial view to contain the table data and return PartialViewResult from the api controller ,then show the partial view from the success function of ajax . The following is the steps:

_DetailsPartial

@model DemoTest.Models.User

<center><h1 style="color:red">User details</h1></center>

<div>
  <table class="table">
    <tr>
        <td>ID</td>
        <td>@Model.Id</td>
    </tr>
    <tr>
        <td>FIRST NAME</td>
        <td>@Model.Fname</td>
    </tr>
    <tr>
        <td>LAST NAME</td>
        <td>@Model.Lname</td>
    </tr>
    <tr>
        <td>LOCATION</td>
        <td>@Model.Location</td>
    </tr>
    <tr>
        <td>Contact</td>
        <td>@Model.Contact</td>
    </tr>
    <tr>
        <td>Email</td>
        <td>@Model.Email</td>
    </tr>
    <tr>
        <td>Password</td>
        <td>@Model.Password</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>@Model.Category</td>
    </tr>
    <tr>
  </table>
</div>

Api controller ,return PartialViewResult

[Route("api/[controller]/[action]")]
[ApiController]
public class ValuesController : ControllerBase
{
    private readonly DemoDbContext _context;
    public ValuesController(DemoDbContext context)
    {
        _context = context;
    }

    [HttpGet("{id}")]
    public async Task<IActionResult> Details(int id)
    {
        var user = await _context.User.FindAsync(id);

        var myViewData = new ViewDataDictionary(new Microsoft.AspNetCore.Mvc.ModelBinding.EmptyModelMetadataProvider(), new Microsoft.AspNetCore.Mvc.ModelBinding.ModelStateDictionary()) 
        { { "User", user } };
        myViewData.Model = user;
        return new PartialViewResult()
        {
            ViewName= "_DetailsPartial",
            ViewData= myViewData
        };
    }
}

The main view that contains the partial view, use ajax to show the result of success function in the <div id="userdetail"></div>

<div id="userdetail"></div>

@section Scripts{
 <script>
    var id = 1;
        $.ajax({
            //contentType: "application/json",
            type: "GET",
            url: "https://localhost:44343/api/Values/Details/" + id,
            success: function (data) {
                alert('Wele!');
                $("#userdetail").html(data);


               // window.location.href = "/Home/Details/" + data.id;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert('Failed!');
            }
        });
 </script>
}

Result:

For more details about Partial View , you could refer to the official doc.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display the values from ajax success data to the html table? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)