ASP.Net 下拉选择中的 MVC 更新 ViewModel 已更改

Question

起初我对网络开发完全陌生。我正在尝试开发一个由单个页面组成的 Web 应用程序（我从一个试图遵循 mvc 模式的空项目开始）。

为了填充我的视图，我通过 HomeController 将 ViewModel 传递到我的 "Home"View。

现在我想根据 DropDown 选择更改一些标签文本。

视图模型：

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: @模型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 方法甚至没有执行。

Answer 1

你会确保元素在一个表单中并且只是 onchange 之后的函数名称...

@onchange="submitdata();"

然后您将添加脚本。

function submitdata()
{
  $('form').submit();
}

对于更 "MVC" 的方法，您将从使用模型的强类型视图开始。

@model My.Path.To.Model

您还可以将表单数据包装在您的剃刀页面上......

using (@Html.BeginForm("myMethod", "Home", FormMethod.Post)){
     //form and inputs here, ect
     <form method="POST" action="" >
         //properties bound to inputs to change your model, or html helpers like display for...
         <input type="Submit" name="Submit" value="Submit"/>
     </form>
}

然后您可以将模型作为控制器操作中的参数传递，这是在提交表单时调用的：

[HttpPost]
 public FileStreamResult myMethod(Model model)
 {
     string str = model.imapropertyonthemodel;

 }

如果您是 MVC 的新手，我建议您从 W3 schools 的基础知识开始，或者如果您有 pluralsight，那里有一些很棒的教程。

Answer 2

根据评论，您希望能够根据所选语言更新标签。为此，您需要使用 ajax 到 post 将所选语言转换为 return 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) 您的模型只有字段，没有属性（没有 get/set），因此 post 后面不会绑定任何内容。 (2) 不能将html 控件绑定到复杂对象（只能是值类型，或者在<select multiple> 的情况下，是值类型的数组）。

ASP.Net 下拉选择中的 MVC 更新 ViewModel 已更改

ASP.Net MVC Update ViewModel on DropDown Selection changed

html

c#

asp.net-mvc

onchange

viewmodel