json result displayed as a text on my razor view !

Question

Hi Guys I'm trying to display a Json result back to a view i have seen it done in a few tutorials but not working on min as it only display the json result on the page but not as a view I'm not sure where I'm going wrong

my Action in my control:

public ActionResult Index()
       {

           myContext.Configuration.ProxyCreationEnabled = false;
           myContext.Configuration.LazyLoadingEnabled = false;
           var driver = myContext.Drivers.OrderBy(x => x.firstName).ToList();
           return Json( driver, JsonRequestBehavior.AllowGet);

       }

my Razor view where I want to display the result: 

 

 

@{
    ViewBag.Title = "test";
}
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>test</h2>

<h2>Part 1 : Implement jQuery Datatable in ASP.NET MVC</h2>
<div style="width:90%; margin:0 auto;">
    <table id="myTable">
        <thead>
            <tr>
                <th>First Name</th>
                <th>surname</th>
                <th>BadgeNo</th>

            </tr>
        </thead>
    </table>
</div>
<style>
    tr.even {
        background-color: #F5F5F5 !important;
    }
</style>

@* Load datatable js *@
@section Scripts{
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
}
    <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({
                "ajax": {
                    "url": "/Driver/Index",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                        { "data": "firstName", "autoWidth": true },
                        { "data": "Surname", "autoWidth": true },
                        { "data": "BadgeNo", "autoWidth": true },

                ]
            });
        });
    </script>