Bind jQuery Ajax response to HTML Table in ASP.Net MVC

ruben000...

SOLVED CLOSED ACTIVE ANSWERED
User: ruben00000
Posted: on Jan 24, 2024 10:06 PM
Forum: ASP.Net MVC
Answer: 1
Views: 1021

I have a simple list respone that i want put to td for each have id

my problem is why my response object not set to td when success.

Thanks

public async Task<JsonResult> GetIndividualWellByName(string uwi)
{
    var wt = await _iwelltest.GetPPDMWellTestByName(uwi);
    return Json(new { data = wt.ToList() });
}

<table class="table table-vcenter card-table">
    <thead class="table-success" style="background: white;">
        <tr>
            <th style="font-size: 80%; font-weight: 700;">Well Name</th>
            <th style="font-size: 80%; font-weight: 700;">Test Type</th>
            <th style="font-size: 80%; font-weight: 700;">Test Date</th>
            <th style="font-size: 80%; font-weight: 700;">Water (STB)</th>
            <th style="font-size: 80%; font-weight: 700;">Oil (STB)</th>
            <th style="font-size: 80%; font-weight: 700;">Gas (MSCF)</th>
        </tr>
    </thead>
    <tr>
        <td id="_PLOT_NAME"></td>
        <td id="_TEST_TYPE"></td>
        <td id="_TEST_DATE"></td>
        <td id="_WATER_FLOW_AMOUNT"></td>
        <td id="_OIL_FLOW_AMOUNT"></td>
        <td id="_GAS_FLOW_AMOUNT"></td>
    </tr>
</table>

function getwelltest(string uwi) {
    $.ajax({
        type: 'GET',
        url: '/Home/GetIndividualWellByName',
        data: { uwi: uwi },
        contentType: 'application/json; charset=utf-8',
        datatype: 'json',
        success: function (data) {
            if (data !== null) {
                $.each(data, function (i, obj) {

                    $("#_PLOT_NAME").text(obj.PLOT_NAME);

                    $("#_PLOT_NAME").text(obj.TEST_TYPE);

                    $("#_PLOT_NAME").text(obj.WATER_FLOW_AMOUNT);

                    $("#_PLOT_NAME").text(obj.OIL_FLOW_AMOUNT);
                });
            }
            else {
                return null;
            }
        },
        error: function (err) {
            //alert(err);
        }
    });
}

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 1

Reply
ANSWER
User: dharmendr
Replied: on Jan 25, 2024 12:39 AM
Report

Hi ruben00000,

This way you have to bind the HTML Table.

<table class="table table-vcenter card-table">
    <thead class="table-success" style="background: white;">
        <tr>
            <th style="font-size: 80%; font-weight: 700;">Well Name</th>
            <th style="font-size: 80%; font-weight: 700;">Test Type</th>
            <th style="font-size: 80%; font-weight: 700;">Test Date</th>
            <th style="font-size: 80%; font-weight: 700;">Water (STB)</th>
            <th style="font-size: 80%; font-weight: 700;">Oil (STB)</th>
            <th style="font-size: 80%; font-weight: 700;">Gas (MSCF)</th>
        </tr>
    </thead>
    <tr>
        <td id="_PLOT_NAME"></td>
        <td id="_TEST_TYPE"></td>
        <td id="_TEST_DATE"></td>
        <td id="_WATER_FLOW_AMOUNT"></td>
        <td id="_OIL_FLOW_AMOUNT"></td>
        <td id="_GAS_FLOW_AMOUNT"></td>
    </tr>
</table>
<script>
    function getwelltest(string uwi) {
        $.ajax({
            type: 'GET',
            url: '/Home/GetIndividualWellByName',
            data: { uwi: uwi },
            contentType: 'application/json; charset=utf-8',
            datatype: 'json',
            success: function (data) {
                if (data !== null) {
                    var head = $('.table').find('thead').eq(0).clone();
                    var row = $('.table').find('tr').eq(1).clone();
                    $('.table').empty();
                    $('.table').append(head);
                    $.each(data, function (i, obj) {
                        $(row).find('#_PLOT_NAME').text(obj.PLOT_NAME);
                        $(row).find('#_TEST_TYPE').text(obj.TEST_TYPE);
                        $(row).find('#_WATER_FLOW_AMOUNT').text(obj.WATER_FLOW_AMOUNT);
                        $(row).find('#_OIL_FLOW_AMOUNT').text(obj.OIL_FLOW_AMOUNT);
                        $('.table').append(row);
                        row = $('.table').find('tr').eq(1).clone();
                    });
                }
                else {
                    return null;
                }
            },
            error: function (err) {
                //alert(err);
            }
        });
    }
</script>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Bind jQuery Ajax response to HTML Table in ASP.Net MVC

Company

Explore

Follow us

Contact Us