2

我们有一个非常简单的 MVC 表单，其中包含一个下拉列表，用于获取用户选择的城市。

我们有一个城市列表，我们知道每个城市的平均温度（比如说）。

几乎作为表单的装饰（它不是核心功能），当用户更改它时显示所选城市的温度会很好。像这样的东西：

在此处输入图像描述

我猜这必须发生在客户端。还是AJAX？

目前，我们的表单主要是开箱即用的 MVC4 EF 自动构建的脚手架。

我们像这样填充下拉列表：

在控制器中： 

ViewData("Cities") = GetCitySelectList()

在视图中： 

@Html.DropDownListFor(Function(model) model.City, TryCast(ViewData("Cities"), SelectList))

...非常简单的东西。

有很多教程可以做级联下拉菜单，这对于我们在这里尝试做的事情可能有点过分了。此外，如果您在谷歌上搜索“javascript 查找 mvc 表单”或类似的结果，很多结果会将您与使用框架（淘汰？准系统？）联系起来，同样，我不熟悉，我不知道我是否需要这样一个简单的任务。

事实上，我们非常倾向于保持简单，而且我们的城市列表非常短，几乎值得作为if then elsejavascript 中的巨人来做这件事（但是，我知道，yuk）。

最简单的方法是什么？

4

4 回答 4

1

您应该使用 AJAX 调用服务器来获取温度。这可能是实现您希望在表单上拥有的内容的“最干净”的方式。

于 2013-09-24T10:00:40.043 回答
1

你可以这样做：

  1. 制作一个Ajax callonchange on dropdown然后将其result放在相应的 div 中。

结果的HTML：

Temperature:<div id="temp"></div>

阿贾克斯调用：

 $("#dropdownId").change(function () {
    $.ajax({
        type: "GET",
        url: "Home/GetTemperature", // your url
        contentType: "application/json; charset=utf-8",
        data : {City : " + $(this).val() +"}
        dataType: "json",
        success: function (result) {
            $("#temp").html(result); // place result in div
        },
        error: function () {
            alert("Error.");
        }
    });
});

您的操作 (C#)：

[HttpGet]
public JsonResult GetTemperature(string City)
{
    int temp = 30; // Get temp from your db..
    return Json(temp,JsonRequestBehavior.AllowGet);
}

你的行动（VB）：

<HttpGet>
Public Function GetTemperature(City As String) As JsonResult
  Dim temp As integer = 30
  Return Json(temp, JsonRequestBehavior.AllowGet)
End Function
于 2013-09-24T11:11:50.410 回答
1

选项 1：使用 jQuery 并进行 ajax 调用以获取传递的 cityId 的温度并设置温度 div 或 span 容器的 html

选项 2：在页面上作为 Javascript 对象急切加载

您可以急切地将城市和温度加载到 JSON 对象中并存储它。

这是使用JSON.Net进行 json 序列化的控制器操作代码

public ActionResult myAction()
{
MyViewModel model=new MyViewModel();
List<City> cities=new List<City>();//fill the city id, temp
MyViewModel.CityJSON=JsonConvert.SerializeObject(List<City>); 

return View(model)
}

看法

@model MyViewModel
// other controls
@Html.HiddenFor(m=>m.CityJSON, new{@id='hdn-city-json'})

JavaScript

var cityList=JSON.parse($('#hdn-city-json')); // returns array of city obj
//do your stuff
于 2013-09-24T11:41:14.033 回答
0

如果您试图避免对服务器的不必要请求，是的，您可以急切地加载整个集合。您可以将数据保存在<ul/>您在视图上构建的隐藏标签中。然后，您可以使用 jQuery 在下拉选择更改时触发。但是您可以在列表中查找温度并将目标 div 的内容设置为查找函数的返回值，而不是进行 AJAX 调用。

于 2013-09-24T11:19:48.120 回答