Вы должны воспользоваться C# литеральными строками, ваш код будет значительно более читабельным ...
Не уверен на 100% в структуре вашей папки, мой пример ниже делает несколько предположений:
savHtml = @"
<html>
<head>
<title>Select Image</title>
</head>
<body>
<form name='controls'>
<select name='imageList' onchange='displayImage(this);'>
<option value='fire.png'>fire</option>
<option value='mare.png'>mare</option>
<option value='terra.png'>terra</option>
</select>
<img id='canvas' src='EmployeeChargeable/fire1.png' />
<img id='canvasN' src='EmployeeNonChargeable/fire1.png' />
</form>
<script type='text/javascript'>
var image = document.getElementById('canvas');
var imageN = document.getElementById('canvasN');
function displayImage(elem) {
image.src = 'EmployeeChargeable/' + elem.value;
imageN.src = 'EmployeeNonChargeable/' + elem.value;
}
</script>
</body>
</html>";
Так что я жестко запрограммировал несколько опций, кажется, папки EmployeeChargeable и EmployeeNonChargeable всегда одинаковы, и все, что изменяется, - это имя файла (только предположение)
Кроме того, я переместил скрипт внизу, скрипты могут блокировать загрузку дополнительных ресурсов. Поместив их внизу, ваш стиль, контент и мультимедиа могут загружаться быстрее, создавая ощущение повышенной производительности. Ваш HTML теперь маленький, и производительность не является проблемой, но, поскольку вы попадаете в неприятности с более крупными вещами, которым стоит следовать.
Внутри javascript кода я переместил getElementById за пределы нам просто нужна функция, которая не требует повторения при каждом вызове function displayImage, и теперь все, что делает эта функция, это устанавливает источник изображений.