Question

I’m working on my first MVC project. I have very little 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.

Answer 1

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.