表没有使用ajax刷新

时间:2014-05-28 14:38:12

标签: c# javascript jquery ajax json

我正在尝试使用MVC。我有一个包含下拉列表和表格的视图。 当我从下拉列表中选择一个选项时,我想从我的控制器获取数据并更新视图:

查看:

    <div>
        <h2>Current Print Statistics</h2>
        @using (Html.BeginForm())
        {
            @Html.DropDownList("LogTypes", new SelectList(Model.LogTypes, "Value", "Text"), new
            {
                id = "logType",
                data_url = Url.Action("GetStatistics", "Home")
            })

            <table id="modelTable" class="table table-condensed">
                <tr>
                    <th>RequestedOn</th>
                    <th>PrintedOn</th>
                    <th>Message</th>
                    <th>Success</th>
                    <th>TemplateName</th>
                </tr>
                <tbody>
                    @foreach (var item in Model.PrintLogs)
                    {
                        string css = (item.Success) ? "success" : "danger";
                        string link = (item.Success) ? "www.google.com" : string.Empty;
                        <tr class="@css">
                            <td>@item.RequestedOn</td>
                            <td>@item.PrintedOn</td>
                            <td>@item.Message</td>
                            @if (item.Success)
                            {
                                <td>@item.Success</td>
                            }
                            else
                            {
                                <td>@Html.ActionLink("False", "Index", "LogView", new { id = item.LogID }, null)</td>
                            }
                            <td>@item.TemplateName</td>
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>
</div>

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
    $('#logType').change(function () {
        console.log($(this).data('url'));
        var selectedValue = $(this).val();
        var table = $('#modelTable');


        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            context: table,
            data: { value: selectedValue },
            success: function (result) {
                $.each(result.PrintLogs,
                    function (index, log) {
                        $('<tr/>', {
                            html: $('<td/>', {
                                html: log.RequestedOn
                            }).after($('<td/>', {
                                html: log.PrintedOn
                            })).after($('<td/>', {
                                html: log.Success
                            })).after($('<td/>', {
                                html: log.Message
                            })).after($('<td/>', {
                                html: log.TemplateName
                            }))
                        }).appendTo(tableBody);
                    }
                );
            }
        });
    });
});

</script>

控制器:

[HttpGet]
public JsonResult GetStatistics(string value)
{          
        var request = LogTypeRequest.Last24H;
        if (value == "0") request = LogTypeRequest.Last24H;
        if (value == "1") request = LogTypeRequest.LastWeek;
        if (value == "2") request = LogTypeRequest.LastMonth;

        var model = new PrintServerModel
        {
            LogTypes = new List<ListItem>
                {
                    new ListItem() {Text = "Last 24 Hours", Value = "0"},
                    new ListItem() {Text = "Last Week", Value = "1"},
                    new ListItem() {Text = "Last Month", Value = "2"}
                },
            PrintLogs = PrintServerService.GetPrinterLog(request)
        };
        return Json(model, JsonRequestBehavior.AllowGet);
    }

现在当我尝试在chrome中调试时,行$ .ajax({达到它似乎跳到了最后。

理想情况下,我想要的是在启动时显示数据,然后当用户从下拉列表中选择某些内容时,刷新数据。

任何帮助都非常感激!!

1 个答案:

答案 0 :(得分:0)

错误是json调用有错误,你应该添加.done或者错误:到它的末尾,这样你就可以看到你的错误了。

Chrome调试工具中还有一个用于观看网络呼叫的标签,您可以通过其他详细信息查看来自该呼叫的响应。

只是查看ajax调用,可能想要更改为

data: JSON.stringify( { value: selectedValue }),

如果您获得更多信息,我会尽我所能来改善我的答案。