asp.net mvc3组件中的Javascript在页面上多次调用答案

【问题标题】：Javascript in asp.net mvc3 component called multiple times on a pageasp.net mvc3组件中的Javascript在页面上多次调用
【发布时间】：2012-02-04 18:36:10
【问题描述】：

我的项目需要创建一个组件，该组件是一个带有图像标签和上一个下一个按钮的 cshtml 文件。当单击上一个/下一个按钮时，图像会从 Web 服务动态加载。我的“图像”类具有检索图像所需的四个属性，而我的视图模型有一个图像类列表。目前我正在将模型转换为一个 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>

现在我想在我的 Main Page.cshtml 中多次使用这个 View

 <body>
<div>
Html.Action("GetImage","Image")
 </div>
  <div>
  Html.Action("GetImage","Image").
   </div>
  </body>

我的问题是 onClick 函数在主页面渲染时出现多次。我如何确保 1. 当我单击超链接时，它会知道要调用哪个 onClick 2. javascript 加载正确的图像标签。任何帮助将不胜感激。

附：我正在家里尝试这个，但实际代码将在剃刀中。

【问题讨论】：

如果您能提供一些代码，我们将能够更好地提供帮助

标签： jquery json asp.net-mvc-3

【解决方案1】：

您没有提供任何类型的代码，所以我最好的猜测是点击事件会冒泡并为每个匹配的元素触发多次。为了防止事件冒泡，您可以在事件处理程序中执行以下操作

$("#next,#prev").click(function(event){

event.stopImmediatePropagation()

});

.stopImmediatePropagation()

【讨论】：