ASP.net MVC 3 Change Image with selected item in dropdownlist

I'm working on my first MVC project. I have very little 开发者_JAVA技巧knowledge on jscript, jquery, ajax.. I need to show the users a page where is a dropdownlist, a image and a create button. The purpose is to a user select a type of object to create. When the user changes the item in the dropdownlist the image has to change without reloading the all page. Then when he hits the create button i have to pass the selected value. I'm using MVC 3 with Razor views.

My question is how do i do this? Code for Action and View. :)

Thanks in advance.

---

Html

 <form action="/myController/myAction">
        <select name='imageName'  id="imageChooser">
            <option value="1">Item id 1<option>
            <option value="2">Item id 2<option>
            <option value="3">Item id 3<option>
            <option value="4">Item id 4<option>
        </select>
        <!--
            name your images on server like 1.jpg,2.jpg 
            as per ioption value
        -->
        <<input type="submit" value="create" />
        <br />
        <div id="imageHolder">

        </div>
    </form>

Script

jQuery('#imageChooser').bind('change', function () {
    var imgeUrl = 'http://yourdomain/' + jQuery('#imageChooser').val() + '.jpg';
    jQuery('#imageHolder').html('<img src="'+imgeUrl+'" />');
});

On Server

public ActionResult myAction(string imageName)
{
   return View();
}

You must include jQuery in view.

---

Since you have given no code I will give you an abstract answer.

Use javascript to bind to the dropdown's change event; use the selected item's value/id or whatever as a key to then inject an <IMG /> tag with the correct image in it.

If javascript is disabled, then, it won't work - but at least the user won't always see the same picture.

Since MVC comes with jquery built in - you might as well start reading up on jquery.