ASP.Net MVC Update ViewModel on DropDown Selection changed

Question

At first I'm absolutely new on web development. I'm trying to develop a Web application which consists of a single page (I started with an empty project trying to follow the mvc pattern).

To populate my View I pass a ViewModel through my HomeController to my "Home"View.

Now I want to change a few Label-Texts depending on a DropDown selection.

ViewModel:

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

Language:

public int ID;
public string LanguageText;

Text:

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>

I read something about this "@onchange" attribute (Ajax, JQuery) - but to be honest It'd be great if there would be any ASP/MVC/HTML solution to achive my goal - to update my SelectedLanguage Property everytime the selected item of the dropdown gets changed.

Additionaly: Is there a tutorial for webdevelopment (asp, html, ajax, jquery, js) you can recommend?

Thanx!

EDIT

Now I tried to implement the code provided but it seems that nothing happens when changing the selected item...

Script:

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

The problem should be located somewhere in the script, the ChangeLanguage Method doesn't even get executed.

Solution

You would make sure the elements are in a form and just and the name of the function after the onchange...

@onchange="submitdata();"

Then you would add the script.

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

For a more "MVC" approach you would start with a strongly typed view using a model.

@model My.Path.To.Model

You would also wrap the form data on your razor page with...

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

You would then pass the model as a parameter in the Controller action, this is called on the submit of the form:

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

 }

If you are new to MVC I would recommend starting with the basics from W3 schools, or if you have pluralsight, there are some great tutorials there.

Comments

[Th1sD0t]

If I understand your snippet the form (btw. when do I have to use a form?) gets submitted after a button on the form is clicked. What I want to do is to update my complete View after the selection of my Dropdown is changed (if possible without clearing input fields on my page).

[CodeBob]

Sorry I wasn't more clear. The first few lines answers the question. You would have the javascript function called from the @onchange. So when the dropdown changed the form would be "submitted" which would then give you access to whatever values you wanted from there. You wouldn't have to use a button at all. In addition to having access to all the values, the event is captured in javascript so you can do whatever you want to the view.