到C＃的Javascript上下文菜單＃

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＃中的服務器控件，並從它發出的菜單，但既然你已經有一個工作菜單它來調用服務器端只是更容易方法來響應點擊。如果你正在使用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話，就可以直接調用控制器方法。

Answer 2

我假設你正在嘗試做的是當上下文菜單中的一個項目被選中時調用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]