C# ASP.Net MVC在下拉选择上更新ViewModel已更改

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

要填充视图，我将ViewModel通过HomeController传递到“主”视图

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

视图模型：

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

正文：

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>

---

问题应该出现在脚本中的某个地方，ChangeLanguage方法甚至不会执行

您应该确保元素的形式正确，并且onchange之后的函数名

@onchange="submitdata();"

然后添加脚本

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

对于更“MVC”的方法，您可以从使用模型的强类型视图开始

@model My.Path.To.Model

您还可以在razor页面上用

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>
}

---

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

从注释中，您希望能够基于所选语言更新标签。为了做到这一点，您需要使用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);
}

看法

---

旁注：当前代码存在一些问题。（1） 您的模型只有字段，没有属性（没有get/set），所以回发时不会绑定任何内容。（2） 您无法将html控件绑定到复杂对象（仅值类型，或者在

的情况下，是一个值类型数组）。

您是否尝试过javascript/jquery解决方案？您到底想做什么还不清楚。无法将dropdownlist绑定到复杂对象（

IEnumerable

）。如果要在回发时标识所选语言，则需要绑定到属性（例如

int-SelectedLanguage{get；set；}

），然后再绑定到

@Html.DropDownFor（x=>x.SelectedLanguage，new-SelectList（Model.AvailableLanguages…）

。视图的第二部分毫无意义。Razor代码在发送到视图之前会在服务器上进行解析，因此

MyViewModel。内容

将永远只是

SelectedLanguage

的初始值。如果您希望根据所选语言更新DOM中的某些内容，则需要使用ajax调用controll呃，传递所选语言并返回要显示的新值。请注意，您的模型只有字段（没有get/set）因此，当你发回时，没有任何东西会绑定。这就是为什么我说我是web开发领域的新手。那么你的意思是，如果不使用ajax等高级技术，就无法将SelectedValue绑定到列表？如果是，你能推荐一些教程吗？@Chill-X。你可以将dropown绑定到值类型（

int

，

string

等），但不是一个复杂的对象（一个

返回一个值，并且不知道什么是

IEnumerable

。如果你解释你想做什么（即处理

.change

事件的目的是什么），我可以给你一个答案。如果我理解了你的代码片段，我可以给出这个表单（顺便说一句，什么时候我必须使用表单？）在单击表单上的按钮后提交。我要做的是在更改下拉列表的选择后更新我的完整视图（如果可能，不清除页面上的输入字段）。抱歉，我没有说得更清楚。前几行回答了这个问题。您将从@onchange调用javascript函数。因此，当下拉列表更改时，表单将被“提交”这样，您就可以从那里访问您想要的任何值。您根本不必使用按钮。除了可以访问所有值之外，还可以在javascript中捕获事件，以便您可以对视图执行任何操作。谢谢，我将尽快实现这一点。您可以解释-标记之间的代码吗？在在我用Razor语法编写代码的那一刻-我必须更改代码中的某些内容吗？你看，我对web开发方面的东西很新…好的，你需要包含

jquery.{version}.js

文件（使用捆绑或从

Scripts

文件夹中）。您需要更新一些内容以符合您的要求（例如，

yourControllerName

和标签的id，因为您没有提供足够的信息）。如果您有任何问题，请发布您尝试的代码。在尝试之前，您不应将答案标记为已接受：）我添加了更多的代码-也许你可以再帮我一次？提前谢谢！如果你对新代码有疑问，你需要问一个新问题。有很多问题-将脚本放在页面底部的

标记中。

jquery

引用需要是一个单独的脚本标记。你的方法是returning

return Json（new{success=true}）；

但它必须是

return Json（data，JsonRequestBehavior.AllowGet）

。在脚本和控制器方法上设置断点，调试代码以了解实际发生的情况无论如何，最后您做到了：）现在它可以工作了（几乎可以）如预期的那样。允许我问最后一个问题吗？我想在ChangeLanguage方法中使用我的HomeViewModel-但其中的引用为null，尽管我正在索引方法中创建一个实例（this.ViewModel=new HomeViewModel（）；）

@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;

 }

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);
}