0
私のプロジェクトでは、イメージタグとそれ以前の次のボタンを持つcshtmlファイルであるコンポーネントを作成する必要があります。前/次のボタンがクリックされると、イメージはWebサービスから動的に読み込まれます。私の "Image"クラスには、画像を取得するために必要な4つのプロパティがあり、View ModelにはImageクラスのリストがあります。現在、モデルをjsonオブジェクトに変換しています。このオブジェクトは、前/次のボタンをクリックしてイメージプロパティを取得するために解析されます。しかし、私の問題は、このコンポーネントはメインページで複数回呼び出されるため、オブジェクトは複数回定義されているため、ページはどのオブジェクトを解析するのか、どのイメージタグを読み込むのか混乱します。asp.netのJavascript mvc3コンポーネントがページ上で複数回呼び出される
私のモデルクラス
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.ハイパーリンクをクリックすると、2を呼び出すonClickを知るでしょう。javascriptは正しい画像タグを読み込みます。どんな助けも大いに評価されます。
P.S.私は自宅でこれを試していますが、実際のコードは剃刀になります。
内の次の操作を行うことができ、イベントのバブリングを防止するため、 –