Javascript контекстное меню для C #

Question

Я создал контекстное меню javascript, используя Jquery, который отлично работает. Но есть два варианта. Первый - создать это контекстное меню в 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'});
  }

Answer 1

Я предполагаю, что вы пытаетесь вызвать метод 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
    }
}

Выполните поиск в Google для вызовов MVC3 и JQuery / Javascript с помощью JSON, есть множество доступных ресурсов.

Если вы не используете шаблон MVC, вы можете использовать веб-сервис или метод в приведенном ниже коде. Вам необходимо добавить соответствующий атрибут над методом, например, как [Ajax.AjaxMethod ()] или [WebMethod]

Answer 2

Можно создать серверный элемент управления в 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
    }
});

Реализация серверной части может быть либо статическим [WebMethod] на странице ASPX, либо, если вы используете MVC, то это может быть прямой вызов метода контроллера.