ASP.net MVC 3 Изменить изображение с выбранным элементом в выпадающем списке

Question

Я работаю над своим первым проектом MVC. У меня очень мало знаний о jscript, jquery, ajax .. Мне нужно показать пользователям страницу, где есть выпадающий список, изображение и кнопка создания. Цель состоит в том, чтобы пользователь выбирал тип объекта для создания. Когда пользователь меняет элемент в раскрывающемся списке, изображение должно быть изменено без перезагрузки всей страницы. Затем, когда он нажимает кнопку «Создать», я должен передать выбранное значение. Я использую MVC 3 с Razor.

Мой вопрос: как мне это сделать? Код для действий и просмотра. :)

Спасибо заранее.

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>

Скрипт

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

На сервере

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

Вы должны включить jQuery в представление.

Answer 2

Поскольку вы не указали код, я дам вам абстрактный ответ.

Используйте javascript для привязки к событию изменения выпадающего списка;используйте значение / идентификатор выбранного элемента или что-то еще в качестве ключа, чтобы затем вставить тег <IMG /> с правильным изображением в нем.

Если javascript отключен, он не будет работать - но по крайней мерепользователь не всегда будет видеть одно и то же изображение.

Поскольку MVC поставляется со встроенным jquery - вы также можете начать читать jquery.