Ajax / Json MVC表填充不起作用

时间:2019-07-13 04:28:45

标签: jquery json ajax asp.net-mvc

我正在尝试提取附加到特定用户ID的前10个最近提交的表单。

AJAX无法正确触发并填充我的表。在调试时,它捕获了我的按钮单击事件,并将其转发给ajax,但在此停止。该表仍为空白且未填充。

我的按钮单击事件/ ajax调用如下:

$(document).ready(function () {

$("#btnLoadRA").click(function () {
    LoadData();
});  

function LoadData() {
    $("#raresults tbody tr").remove();
    $.ajax({
        type:'GET',
        url: '@Url.Action("getRoofAccessForms", "Home")',
        dataType: 'json',
        data: { id: '' },
        success: function (data) {
            var items = '';
            $.each(data, function (i, item) {
                var rows = "test;";
                $('#raresults tbody').append(rows);
            });
            alert('success');
        },
        error: function (ex) {
            var r = jQuery.parseJSON(response.responseText);
            alert("Message: " + r.Message);
            alert("StackTrace: " + r.StackTrace);
            alert("ExceptionType: " + r.ExceptionType);
        }
    });
}

});

我的JsonResult方法:

   `public JsonResult getRoofAccessForms(string id)
    {
        List<RoofAccessGeneral> raForms = new List<RoofAccessGeneral>();

        int lastFormID = _context.RoofAccessGenerals.Count();

        var userid = User.Identity.GetUserId();

        raForms = _context.RoofAccessGenerals.Where(raGeneral => raGeneral.RoofAccessFormID > lastFormID - 10 && raGeneral.UserID == userid)
            .OrderByDescending(raGeneral => raGeneral.RoofAccessFormID)
            .ToList();

        return Json(raForms, JsonRequestBehavior.AllowGet);

    }

` 我的看法(只是桌子):

<div class="m-portlet__body">
            <div class="tab-content">
                <div class="tab-pane active" id="m_widget4_tab1_content">
                    <table id="raresults">
                        <tbody>
                            @* Stuff will be populated here from ajax.*@
                        </tbody>
                    </table>
                </div>
            </div>
        </div> 

我想将每个记录输出到表中的一行。我对如何在ajax循环中自定义此方法一无所知,但是当我几乎确定我的Json GET方法正按预期从上下文中提取时,为什么甚至没有填充我的测试数据,我还是一头雾水调试时的所有数据)。任何建议都将受到欢迎和赞赏。

1 个答案:

答案 0 :(得分:0)

function LoadData() {
    $("#raresults tbody tr").remove();
    $.ajax({
        type:'GET',
        url: '@Url.Action("getRoofAccessForms", "Home")',
        dataType: 'json',
        data: { id: '' },
        success: function (data) {
            var items = '';
            $.each(data, function (i, item) {
                    var rows = "test";
                    $('#raresults tbody').append("<tr><td>" + rows +"</td></tr>");
                });
            alert('success');
        },
        error: function (ex) {
            var r = jQuery.parseJSON(response.responseText);
            alert("Message: " + r.Message);
            alert("StackTrace: " + r.StackTrace);
            alert("ExceptionType: " + r.ExceptionType);
        }
    });
}

成功后,您必须添加'tr td'元素,并且每个元素都可以使用。