Javascript上下文菜单到c#

本文关键字:菜单 上下文 Javascript | 更新日期: 2023-09-27 18:17:09

我使用Jquery创建了一个完美的javascript上下文菜单。但有两种选择。第一个是在c#中创建这个上下文菜单(如果可能的话)。第二种方法是在单击菜单中的按钮时运行c#函数。哪个选项是最好的,我该如何开始?亲切的问候

Javascript:

function Menu($div){
    var that = this, 
        ts = null;
    this.$div = $div;
    this.items = [];
    // create an item using a new closure 
    this.create = function(item){
      var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
      $item
        // bind click on item
        .click(function(){
          if (typeof(item.fnc) === 'function'){
            item.fnc.apply($(this), []);
          }
        })
        // manage mouse over coloration
        .hover(
          function(){$(this).addClass('hover');},
          function(){$(this).removeClass('hover');}
        );
      return $item;
    };
    this.clearTs = function(){
      if (ts){
        clearTimeout(ts);
        ts = null;
      }
    };
    this.initTs = function(t){
      ts = setTimeout(function(){that.close()}, t);
    };
  }
  // add item
  Menu.prototype.add = function(label, cl, fnc){
    this.items.push({
      label:label,
      fnc:fnc,
      cl:cl
    });
  }
  // close previous and open a new menu 
  Menu.prototype.open = function(event){
    this.close();
    var k,
        that = this,
        offset = {
          x:0, 
          y:0
        },
        $menu = $('<div id="menu"></div>');
    // add items in menu
    for(k in this.items){
      $menu.append(this.create(this.items[k]));
    }
    // manage auto-close menu on mouse hover / out
    $menu.hover(
      function(){that.clearTs();},
      function(){that.initTs(3000);}
    );
    // change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
    if ( event.pixel.y + $menu.height() > this.$div.height()){
      offset.y = -$menu.height();
    }
    if ( event.pixel.x + $menu.width() > this.$div.width()){
      offset.x = -$menu.width();
    }
    // use menu as overlay
    this.$div.gmap3({
      action:'addOverlay',
      latLng: event.latLng,
      content: $menu,
      offset: offset
    });
    // start auto-close
    this.initTs(5000);
  }
  // close the menu
  Menu.prototype.close = function(){
    this.clearTs();
    this.$div.gmap3({action:'clear', name:'overlay'});
  }

Javascript上下文菜单到c#

你可以在c#中创建一个服务器控件并从中发出菜单,但是既然你已经有了一个工作菜单,那么调用服务器端方法来响应点击就更容易了。如果你使用的是jQuery,就像这样简单:

$.ajax({
    url: "/Path/To/MyMethod",
    type: "POST",
    dataType: "JSON",
    data: <some POST data>,
    contentType: "application/json; charset=utf-8",
    success: function (result) {
        // Do your stuff here
    },
    error: function (jqXHR, textStatus, errorThrown) {
        // Report error
    }
});

服务器端部分的实现可以是ASPX页面中的静态[WebMethod],或者如果你使用MVC,那么它可以是直接调用控制器方法。

我假设你要做的是在上下文菜单上选择一个项目时调用c#方法。如果您使用的是MVC模型,这很容易做到。使用如下调用,以JSON格式传递参数。我只是使用骨架方法从我的代码作为一个例子,你会调用LibraryRead方法当你点击上下文菜单链接

 Client Side
 function LibraryRead() {   
    $.ajax({
        url : 'Library/ReadLibrary',
        type : "POST",
        data : JSON.stringify(idLibrary),
        dataType : "json",
        contentType : "application/json; charset=utf-8",
        success : function(result) {
            $(result).each(function() {
                ....Process Results
            });
        },
        error : function() {
            .....If something goes wrong, if you use a try catch in your code 
            which does not handle the exception correctly and something goes wrong 
            this will not be triggered. Use propper exception handling.
        }
    });
}

Server Side 
// Post: /Library/ReadLibrary
[HttpPost]
public JsonResult ReadLibrary(int idLibrary)
{
    try
    {
        var library = READ your library here from your data source
        return this.Json(library);
        }
        else
        {
            return null;
        }
    }
    catch (Exception ex)
    {
        //Exception handling omitted for simplicity
    }
}

在谷歌上搜索MVC3和JQuery/Javascript调用JSON,有大量的资源可用。

如果你不使用MVC模式,你可以在代码中使用web服务或方法。您需要在方法上添加适当的属性,例如[Ajax.AjaxMethod()]或[WebMethod]