How to call typescript method on asp.net mvc view

1k views Asked by At

I have integrated typescript in my mvc 5 application and created a typescript file to load my json data. I am getting error of 'export is not defined' (i don't know how to solve this) .
Also i would like to know how do i load my data on my Index.cshtml view on page load.
How do i create a post method for inserting data ?
Can anybody tell me how do i achieve this ?

what i have tried

app.ts

        /// <reference path="Scripts/typings/jquery/jquery.d.ts" />
        import * as $ from "jquery";

        export class Employee {
           Id: number;
           EmpName: string;
           Age: number;
           Gender: string;
           Address: string;
           Contact: string;
           Email: string;
           CountryId: number;
           IsActive: boolean;
          }

        export class EmployeeRepository {
              private employees: Array<Employee> = [];

        constructor() {
            this.loadEmployees();
        }

        loadEmployees=(): void=> {
           $.getJSON('Employee/Index',
              data => {
                this.employees = data;

                if(data.count()>0) {
                    this.displayUsers();
                }
            });
         };

       protected displayUsers(): void {

          let table = '<table class="table">';
          for (let i = 0; i < this.employees.length; i++) {

            table += '<tr>' +
                '<td>' + this.employees[i].Id + '</td>' +
                '<td>' + this.employees[i].EmpName + '</td>' +
                '<td>' + this.employees[i].Age + '</td>' +
                '<td>' + this.employees[i].Gender + '</td>' +
                '<td>' + this.employees[i].Address + '</td>' +
                '<td>' + this.employees[i].Contact + '</td>' +
                '<td>' + this.employees[i].Email + '</td>' +
                '</tr>';
           }
           table += '</table>';
           $('#content').html(table);  
         }
       }

     function GetEmployees() {
        const empData = new EmployeeRepository();
        document.getElementById("content")
           .innerHTML = this.empData;
      }

tsConfig.json

  {
     "compileOnSave": true,
     "compilerOptions": {
     "noImplicitAny": false,
     "noEmitOnError": true,
     "removeComments": false,
     "sourceMap": true,
     "target": "es5",
     "module": "commonjs",
     "outDir": "../appScriptsJS"
  },
 "exclude": [
   "node_modules",
   "wwwroot"
    ]
 }

EmployeeController

 public class EmployeeController : Controller
{
    private IEmployeeRepository _employeeRepository;
    private ICountryRepository _countryRepository;

    public EmployeeController(IEmployeeRepository employeeRepository,
        ICountryRepository countryRepository)
    {
        _employeeRepository = employeeRepository;
        _countryRepository = countryRepository;
    }

    [HttpGet]
    public ActionResult Index()
    {
        try
        {
            var employeeList = _employeeRepository.GetAllEmployeesAsync();
            return View(employeeList);
        }
        catch (Exception e)
        {
            Console.WriteLine(e);
            throw;
        }
    }
 }

I am using vs 2017 and typescript 3.1 .
Any help would me much appreciated.

0

There are 0 answers