C# 带有DataTables脚本的ASP.MVC类型脚本

起初，我的html页面没有分页和排序列。在我更改页面和控制器后，用于排序和分页

My PrototypeViewModel.ts：

class PrototypeViewModel {
prototypes: KnockoutObservable<any>;
selectPrototype: KnockoutObservable<any>;
editPrototype: KnockoutObservable<any>; 
succeeded: KnockoutObservable<any>;

constructor() {
    this.prototypes = ko.observable();
    this.selectPrototype = ko.observable();
    this.editPrototype = ko.observable(new Prototype());        
    this.succeeded = ko.observable(false);
}

getFiles(url: string, onError: (message: string) => {}) {
    (<any>this).invokeAjax(url, null, (data) =>
    {
        if (!data.succeeded) {
            onError(data.message);
        } else {
            this.prototypes(data.prototypes);
        }
    });
}

invokeAjax(url: string, params, callback: (result: any) => {}) {
    $.ajax({
        url: url,
        type: 'GET',
        data: params,
        dataType: 'json',
        cache: false,
        success: (data) => {
            callback(data);
        },
        error: (data) => {
            this.succeeded(false);
        }
    });
}

---

由于您已决定在项目中使用TypeScript，您可能会发现某些函数将不具有intellisense支持，或者在visual studio中以红色曲线划线，因为您试图使用没有类型化定义的库。 您可以获取这些或找到相关的nuget包

---

另外，由于typeScript只是一个javascript的超集，您可以调用普通的javascript函数。

旁注：您的

GridNew

方法中有一个DOM就绪处理程序。这是不需要的，因为调用代码已经在DOM就绪处理程序中。

<script src="@Url.Content(@"~/js/jquery.form.js")"></script>  
<script src="@Url.Content(@"~/js/knockout.mapping-latest.js")"></script>  
<script src="@Url.Content(@"~/ts/PortotypeViewModel.js")"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<link href="~/Content/dataTables/demo_page.css" rel="stylesheet" />
<link href="~/Content/dataTables/demo_table.css" rel="stylesheet" />
<link href="~/Content/dataTables/demo_table_jui.css" rel="stylesheet" />

<link href="~/css/theme.bootstrap.css" rel="stylesheet" />


<script type="text/javascript">
    var vm = null;
$(function () {
    vm = new PrototypeViewModel();

    GridNew();
    //GridOld();

    ko.applyBindings(vm);
});

function GridOld() {
    vm.getFiles('@Url.Action("GetFiles", "Prototype")', function (errMessage) {            
        showWrating(errMessage);
    });
}

function GridNew() {        
    $(function () {
        $('#myTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "@Url.Action("AjaxHandler", "Prototype")",
            "bProcessing": true,
            "aoColumns": [
                null,
                null,
                null,
                null,
                null,
                null,
                null,
                null
            ]
        });
    });
}
....