How can I render a grid datatype in master pages using the WebForms rendering? I have done the following the Json is shown on the page instead of grid

1. Created a grid layout datatype named grid

2. in my template from "Inserted umbraco page field" chose grid. And the code <umbraco:Item field="grid" runat="server" /> was added to my template

3. Added 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>

<link rel="stylesheet" runat="server" href="~/css/bootstrap.min.css" />

 <link rel="stylesheet" runat="server" href="~/css/style.css" />

Browsing the page and getting

{ "name": "1 column layout", "sections": [ { "grid": 12, "rows": [ { "name": "Headline", "areas": [ { "grid": 12, "editors": [ "headline" ], "controls": [ { "value": "Test Grid", "editor": { "name": "Headline", "alias": "headline", "view": "textstring", "icon": "icon-coin", "config": { "style": "font-size: 36px; line-height: 45px; font-weight: bold", "markup": "

#value#

" } } } ] } ], "id": "53aa8607-cb7e-0802-dfb9-e2bc51816725" } ] } ] }