起初我对网络开发非常新.我正在尝试开发一个由单个页面组成的Web应用程序(我从一个试图遵循mvc模式的空项目开始).

要填充我的视图,我将ViewModel通过我的HomeController传递到我的“Home”视图.

现在我想根据DropDown选择更改一些Label-Texts.

视图模型：

public IEnumerable<Models.Language> AvailableLanguages;
public Models.Language SelectedLanguage
Public IEnumerable<Models.Text> Content;

语言：

public int ID;
public string LanguageText;

文本：

public Language Language;
public string Description;

HTML：
@model ViewModels.MyViewModel

<div>
    @Html.DropDownFor(x => x.AvailableLanguages, 
    new SelectList(Model.AvailableLanguages, 
    "ID", 
    "LanguageText", 
    new {@onchange= ... })) 
</div>

<div>
    @{
        @:@Model.MyViewModel.Content
        .Where(o => o.Language.Equals(Model.SelectedLanguage)
        .First())
        .Description
     }
</div>

我读到了一些关于这个“@onchange”属性(Ajax,JQuery)的东西 – 但说实话,如果有任何ASP / MVC / HTML解决方案可以实现我的目标,那么每次所选项目更新我的SelectedLanguage属性都会很棒下拉列表的变化.

另外：你可以推荐一个web开发教程(asp,html,ajax,jquery,js)吗？

感谢名单！

编辑

现在我尝试实现提供的代码,但似乎在更改所选项时没有任何反应……

脚本：

<div class="LanguageSelection">
        @{
            @Html.DropDownList("SelectedLanguage", new SelectList(Model.AvailableLanguages, "ID", "Description"))
            <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
                var url = '@Url.Action("ChangeLanguage", "Home")';
                $('#SelectedLanguage').change() {
                    $.getJSON(url, {
                        ID: $(this).val() 
                    }, function(response){
                        $('#Title').text(response.Title);   
                    });
                };
            </script>
        }
    </div>

JsonResult：

public JsonResult ChangeLanguage(int id) {
        var data = new {
            Title = HVM.Title.Where(o => o.Language.ID.Equals(id)).First(),
        };
        return Json(new { success = true });
    }

问题应该位于脚本的某个位置,ChangeLanguage方法甚至不会被执行.

解决方法:

从评论中,您希望能够根据所选语言更新标签.为此,您需要使用ajax将所选语言发布到返回json并更新DOM的控制器方法.你的视图模型应该是

public SelectList AvailableLanguages { get; set; }
public int SelectedLanguage { get; set; }

并在控制器中

public ActionResult YourMethod()
{
  var model = new yourModel();
  model.SelectedLanguage = // set this if you want a default
  var availableLanguages = // get you list of languages
  model.AvailableLanguages = new SelectList(availableLanguages, "ID", "LanguageText")
  return View(model);
}

视图

@Html.DropDownListFor(m => m.SelectedLanguage, Model.AvailableLanguages)

<script>
  var url = '@Url.Action("GetLanguageLabels", "yourControllerName")';
  $('#SelectedLanguage').change() {
    $.getJSON(url, { ID: $(this).val() }, function(response) {
      // Note you will need to give your labels an id attribute
      $('#Label1').text(response.Label1);
      $('#Label2').text(response.Label2);
    })
  });
</script>

以及根据所选语言获取标签的方法

public JsonResult GetLanguageLabels(int ID)
{
  // Build a object of label values based on the selected language ID
  var data = new
  {
    Label1 = someValue,
    Label2 = anotherValue,
    ....
  };
  return Json(data, JsonRequestBehavior.AllowGet);
}

附注：您当前代码存在一些问题. (1)你的模型只有字段,而不是属性(没有获取/设置)所以没有任何东西会被绑定回发. (2)您不能将html控件绑定到复杂对象(仅限值类型,或者在< select multiple>,值类型数组的情况下).