title: Jquery Context Menu ajax fetch menu items
body: <p>I have a jquery context menu on my landing page where I have hardcode menu items. Now I want to get the menu items from server. Basically the idea is to show file names in a specified directory in the context menu list and open that file when user clicks it...</p>
  
  <p>This is so far I have reached..</p>
  
  <p><strong>***UPDATE***</strong></p>
  
  <p><strong>C# code</strong></p>
  
  <pre><code>[HttpPost]
          public JsonResult GetHelpFiles()
           {
              List&lt;Manuals&gt; manuals = null;
  
              var filesPath = Server.MapPath(@"\HelpManuals");
  
              var standardPath = new DirectoryInfo(filesPath);
  
              if (standardPath.GetFiles().Any())
              {
                 manuals = standardPath.GetFiles().Select(x =&gt; new Manuals
                 {
                      Name = GetFileNamewithoutExtension(x.Name),
                      Path = x.Name
                  }).ToList();
              }
  
              return Json(manuals, JsonRequestBehavior.AllowGet);
          }
  
          private string GetFileNamewithoutExtension(string filename)
          {
              var extension = Path.GetExtension(filename);
  
             return filename.Substring(0, filename.Length - extension.Length);
          }
  </code></pre>
  
  <p><strong>JavaScript Code</strong></p>
  
  <pre><code>$.post("/Home/GetHelpFiles", function (data) {
      $.contextMenu({
          selector: '#helpIcon',
          trigger: 'hover',
          delay: 300,
          build: function($trigger, e) {
              var options = {
                  callback: function(key) {
                      window.open("/HelpManuals/" + key);
                  },
                  items: {}
              };
              $.each(data, function (item, index) {
                  console.log("display name:" + index.Name);
                  console.log("File Path:" + index.Path);
                  options.items[item.Value] = {
                      name: index.Name,
                      key: index.Path
                  }
              });
          }
      });
  });
  </code></pre>
  
  <p>Thanks to <strong>Matt</strong>. Now, the build function gets fire on hover.. but im getting illegal invocation... and when iterating through json result, <em>index.Name</em> and <em>this.Name</em> gives correct result. But <em>item.Name</em> doesn't give anything..</p>