Openweathermap asp.net MVC. Получить данные из текстового поля

Question

Я пытаюсь получить погоду из openweathermap api. Я хочу, чтобы после ввода в текстовое поле, отображать погоду города. В этот момент у меня есть код ... Я новичок в asp.net MVC и обучение очень плотно (( Код работает. Мне нужно ввести город в текстовом поле, а не выбирать комбинированные списки.

Контроллер:

 public OpenWeatherMap FillCity() {
        OpenWeatherMap openWeatherMap = new OpenWeatherMap();
        openWeatherMap.Cities = new Dictionary<string, string>();
        openWeatherMap.Cities.Add("New Delhi", "1261481");
        openWeatherMap.Cities.Add("Abu Dhabi", "292968");
        openWeatherMap.Cities.Add("Lahore", "1172451");
        return openWeatherMap;
    }
    public ActionResult Index() {
        OpenWeatherMap openWeatherMap = FillCity();
        return View(openWeatherMap);
    }

    [HttpPost]
    public ActionResult Index(OpenWeatherMap openWeatherMap, string cities)
    {
        openWeatherMap = FillCity();

        if (cities != null) {
            string apiKey = "MyAPIKey";
            HttpWebRequest apiRequest = WebRequest.Create("http://api.openweathermap.org/data/2.5/weather?id=" +
            cities + "&appid=" + apiKey + "&units=metric") as HttpWebRequest;

            string apiResponse = "";
            HttpWebResponse response = (HttpWebResponse)apiRequest.GetResponse();

            var reader = new StreamReader(response.GetResponseStream());
            apiResponse = reader.ReadToEnd();

            ResponseWeather rootObject = JsonConvert.DeserializeObject<ResponseWeather>(apiResponse);

            StringBuilder sb = new StringBuilder();
            sb.Append("<table><tr><th>Weather Description</th></tr>");
            sb.Append("<tr><td>City:</td><td>" + rootObject.name + "</td></tr>");
            sb.Append("<tr><td>Country:</td><td>" + rootObject.sys.country + "</td></tr>");
            sb.Append("<tr><td>Wind:</td><td>" + rootObject.wind.speed + " Km/h</td></tr>");
            sb.Append("<tr><td>Current Temperature:</td><td>" + rootObject.main.temp + " °C</td></tr>");
            sb.Append("<tr><td>Min Temperature:</td><td>" + rootObject.main.temp_min + " °C</td></tr>");
            sb.Append("<tr><td>Max Temperature:</td><td>" + rootObject.main.temp_max + " °C</td></tr>");
            sb.Append("<tr><td>Humidity:</td><td>" + rootObject.main.humidity + "</td></tr>");
            sb.Append("<tr><td>Weather:</td><td>" + rootObject.weather[0].description + "</td></tr>");
            sb.Append("</table>");
            openWeatherMap.apiResponse = sb.ToString();
        }
        else {
            if (Request.Form["submit"] != null) {
                openWeatherMap.apiResponse = "Select City";
            }
        }
        return View(openWeatherMap);
    } 

Просмотр:

@using (Html.BeginForm())
{<button id="reset" name="reset">Reset »</button>}
<div id="apiDiv">
    <h4>Select the City for Weather Report</h4>
    @using (Html.BeginForm())
    {
        foreach (var city in Model.Cities)
        {
            <span>
                @Html.RadioButtonFor(m => m.Cities, city.Value) @city.Key
            </span>
        }

        <button name="submit">Submit</button>
    }
    <div id="message">@(new HtmlString(Model.apiResponse))</div>
</div>

<!--script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("input[id='Cities']").change(function () {
            $(this).parents("#apiDiv").find
                ("span").css("background", "none");
            $(this).parent().css("background", "#4CAF50");
        });
    });
</script>

Я хочу эту простую форму:

@using (Html.BeginForm())
{
    <div id="apiDiv">
        <p><b>Enter the town:</b> </p>
        @Html.TextBox("Enter a city")
        <br />
        <button name="submit">Submit</button>
    </div>
}

Спасибо за любую помощь.