@{

    ViewBag.Title = "Weather";

}

​

​

<div class="col-md-12">

    <h2>Current weather in <span data-bind="text:city.name"></span> for <span data-bind="text:list()[0].dt_txt"></span></h2>

</div>

<div class="col-md-12">

    <p>Temperature is <span data-bind="text:list()[0].main.temp"></span>°C </p>

    <p>Pressure is <span data-bind="text:list()[0].main.pressure"></span> hpa</p>

    <p>Humidity is <span data-bind="text:list()[0].main.humidity"></span>%</p>

    <p>Wind <span data-bind="text:list()[0].wind.speed"></span> m/s</p>

​

</div>

<div class="table-responsive">

    <h3 >Weather forecast</h3>

    <table class="table table-striped"  border="1">

        <tbody>

            <tr >

                <td>

                    <p>@DateTime.Now.AddDays(1).ToShortDateString()</p>

                    <p>@DateTime.Now.AddDays(1).DayOfWeek</p>

                </td>

                <td>

                    <p>Maximum temerature: <span data-bind="text:list()[9].main.temp"></span>°C</p>

                    <p>Pressure: <span data-bind="text:list()[9].main.pressure"></span>hpa</p>

                    <p>Humidity: <span data-bind="text:list()[9].main.humidity"></span>%</p>

                    <p>Wind: <span data-bind="text:list()[9].wind.speed"></span> m/s</p>

                </td>

            </tr>

​

            <tr>

                <td>

                    <p>@DateTime.Now.AddDays(2).ToShortDateString()</p>

                    <p>@DateTime.Now.AddDays(2).DayOfWeek</p>

                </td>

                <td>

                    <p>Maximum temerature: <span data-bind="text:list()[17].main.temp"></span>°C</p>

                    <p>Pressure: <span data-bind="text:list()[17].main.pressure"></span>hpa</p>

                    <p>Humidity: <span data-bind="text:list()[17].main.humidity"></span>%</p>

                    <p>Wind: <span data-bind="text:list()[17].wind.speed"></span> m/s</p>

                </td>

            </tr>

            <tr>

                <td>

                    <p>@DateTime.Now.AddDays(3).ToShortDateString()</p>

                    <p>@DateTime.Now.AddDays(3).DayOfWeek</p>

                </td>

                <td>

                    <p>Maximum temerature: <span data-bind="text:list()[25].main.temp"></span>°C</p>

                    <p>Pressure: <span data-bind="text:list()[25].main.pressure"></span>hpa</p>

                    <p>Humidity: <span data-bind="text:list()[25].main.humidity"></span>%</p>

                    <p>Wind: <span data-bind="text:list()[25].wind.speed"></span> m/s</p>

                </td>

            </tr>

            <tr>

                <td>

                    <p>@DateTime.Now.AddDays(4).ToShortDateString()</p>

                    <p>@DateTime.Now.AddDays(4).DayOfWeek</p>

                </td>

                <td>

                    <p>Maximum temerature: <span data-bind="text:list()[33].main.temp"></span>°C</p>

                    <p>Pressure: <span data-bind="text:list()[33].main.pressure"></span>hpa</p>

                    <p>Humidity: <span data-bind="text:list()[33].main.humidity"></span>%</p>

                    <p>Wind: <span data-bind="text:list()[33].wind.speed"></span> m/s</p>

                </td>

            </tr>

        </tbody>

    </table>

</div>

<script>

    var weather = Object();

    $(document).ready(function () { 

                $.get("@Url.Action("GetWeather", "Home") ", function (response) {

                console.log(response);

                weather = ko.mapping.fromJS(response);//Knockout mapping

                ko.applyBindings(weather);// populate the weather object

 });

        });

    var weatherForcast = Object();

​

</script>

​

​