DropDown選擇中的ASP.Net MVC更新ViewModel已更改

Question

起初我對網絡開發非常新。 我正在嘗試開發一個由單個頁面組成的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方法甚至不會被執行。

Answer 1

從評論中，您希望能夠根據所選語言更新標簽。 為此，您需要使用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> ，值類型數組的情況下）。

Answer 2

你會確保元素是一個形式，只是和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>
}

然后，您將模型作為Controller操作中的參數傳遞，這將在表單提交時調用：

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

 }

如果您是MVC的新手，我建議從W3學校的基礎知識開始，或者如果您有多重視力，那里有一些很棒的教程。