Мой проект требует создания компонента, представляющего собой файл cshtml с тегом изображения и предыдущими кнопками «Далее».Изображения загружаются динамически из веб-службы при нажатии на предыдущую / следующую кнопки.Мой класс «Изображение» имеет четыре свойства, необходимые для извлечения изображения, а моя модель просмотра имеет список классов изображений.В настоящее время я конвертирую модель в объект json, который анализируется для получения свойств изображения по нажатию предыдущей / следующей кнопки.Но моя проблема в том, что этот компонент вызывается несколько раз на моей главной странице, поэтому объект определяется несколько раз, и страница не понимает, какой объект анализировать и какой тег изображения загрузить. Пожалуйста, помогите.
Моя модель класса
public class ImageRotator
{
public string Title { get; set; }
public List<Image> images { get; set; }
public string ImageJson { get; set; }
}
public class Image
{
public string id { get; set; }
public string imageref { get; set; }
}
Действия контроллера
public ActionResult GetImage()
{
Image objImage1 = new Image { id = "1", imageref = "abcd" };
Image objImage2 = new Image { id = "2", imageref = "lmno" };
ImageRotator objrotator = new ImageRotator();
List<Image> lstimages = new List<Image>();
lstimages.Add(objImage1);
lstimages.Add(objImage2);
objrotator.images = lstimages;
objrotator.Title = "quarterly stats";
objrotator.ImageJson = JsonConvert.SerializeObject(objrotator.images);
return View("Image",objrotator);
}
public ActionResult retrieveimage(Image newimage)
{
byte[] image = GetImage(newimage);
return Json(new { base64imgage = Convert.ToBase64String(image) }
, JsonRequestBehavior.AllowGet);
}
Просмотр изображения
var current=0;
var obj = <%:Html.ToJson(Model.ImageJson)%>;
var obj1 = jQuery.parseJSON(obj);
var image1=obj1[0]
var url1='<%:Url.Action("retrieveimage","image",new{image="placeholder"}) %>';
function onClick(btype)
{
if(btype=='P')
{
current=current-1;
image1=obj1[current];
var imgs=null;
var displayImage = function (base64Data) {
var imag = "data:image/jpg;base64,"
+ base64Data ;
$("#resultMessage").attr("src",imag)
};
$.ajax({
url: '/image/retrieveimage',
type: 'GET',
dataType: "json",
data: image1,
contentType: 'application/json; charset=utf-8',
success: function (data) {
// get the result and do some magic with it
imgs = data;
displayImage(imgs.base64imgage);
}
});
}
else if(btype=='P')
{
}
}
</script>
</head>
<body>
<div>
<a id="previous" href="javascript:onClick('P');">Previous</a>
<img id="resultMessage" src="" />
<a id="next" href="javascript:onClick('N');">Next</a>
</div>
</body>
</html>
Теперь я хочу использовать этот вид несколько раз на моей главной странице.cshtml
<body>
<div>
Html.Action("GetImage","Image")
</div>
<div>
Html.Action("GetImage","Image").
</div>
</body>
Моя проблема в том, что функция onClick появляется несколько раз при отображении главной страницы.Как мне убедиться, что 1. Когда я нажимаю гиперссылку, он узнает, какой onClick позвонить 2. Javascript загружает правильный тег изображения. Любая помощь будет очень признательна.но фактический код будет в бритве.