jsTree Lazy Loading with C# & Web API - javascript

I am currently using jsTree v3.3.10 and attempting to load the structure via a Web API call.
JavaScript:
$('#ksbBrowser').jstree({
core: {
data: {
type: 'GET',
dataType: 'json',
contextType: 'application/json',
url: function (node) {
if (node.id == "#") {
return '/api/search/talent/ksbtree/root';
}
else {
return '';
}
},
data: function (node) {
return { id: node.id };
}
}
}
});
C# WebAPI EndPoint Code:
[HttpGet, Route("api/search/talent/ksbtree/{Type}")]
public String GetKSBTree(String Type)
{
List<DataModels.JSTreeNode> lNodes = new List<JSTreeNode>();
String sJSON = "";
switch (Type)
{
case "root":
var first = new[] {
new {
id = "root-id",
text = "KSBs",
state = new { opened = true },
children = true
}
};
sJSON = JSONHelper.Serialize(first);
break;
default:
break;
}
return sJSON;
}
I am getting json returned via the call and the appropriate contentType headers are there, but jsTree is not loading the tree correctly. This is the sample return of the JSON via postman:
"[{\"id\":\"root-id\",\"text\":\"KSBs\",\"state\":{\"opened\":true},\"children\":true}]"
But as you can see here, jsTree is not processing the JSON correctly.
Does anyone have any idea at all what I am doing wrong.

I figured this out. The WebAPI was returning type of string and jsTree does not do it's own parseJSON internally. To fix this I changed the return type of my end point to be an HTTPResponseMessage.
public HttpResponseMessage GetKSBTree(String Type)
Then I format the response message and return it:
HttpResponseMessage rmMessage = new HttpResponseMessage() { Content = new StringContent(sJSON) };
rmMessage.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/json");
return rmMessage;

Related

Autodesk Design Automation "Value cannot be null. (Parameter 'ForgeConfiguration.ClientId')"

I´ve downloaded the Forge Design Automation sample from the following link:
https://learnforge.autodesk.io/#/tutorials/modifymodels
But the downloable code example is not working fine. When any async method who involves the DesignAutomation API is called I get -> Value cannot be null. (Parameter 'ForgeConfiguration.ClientId'). So, I would like to know how it works and how I can set the ClientId in the ForgeConfiguration class or else if I making something else wrong. I attach a fragment of code where I get the error.
[HttpGet]
[Route("api/forge/designautomation/engines")]
public async Task<List<string>> GetAvailableEngines()
{
List<string> allEngines = new List<string>();
try
{
dynamic oauth = await OAuthController.GetInternalAsync();
// define Engines API
string paginationToken = null;
while (true)
{
Page<string> engines = await _designAutomation.GetEnginesAsync(paginationToken);
allEngines.AddRange(engines.Data);
if (engines.PaginationToken == null)
break;
paginationToken = engines.PaginationToken;
}
allEngines.Sort();
}
catch (Exception error) {
throw error;
}
return allEngines; // return list of engines
}
And the call of the method:
function prepareLists() {
list('engines', 'api/forge/designautomation/engines');
}
function list(control, endpoint) {
$('#' + control).find('option').remove().end();
jQuery.ajax({
url: endpoint,
success: function (list) {
if (list.length === 0)
$('#' + control).append($('<option>', { disabled: true, text: 'Nothing found' }));
else
list.forEach(function (item) { $('#' + control).append($('<option>', { value: item, text: item })); })
}
});
}
Did you forget to set the Forge App Keys in the Environment Variables of your project, check the page at https://learnforge.autodesk.io/#/environment/setup/netcore_da

JQuery Ajax File Ypload Causes complete page Reload

I have a problem when upload a file via Ajax , after de call is completed the page reloads , here is the code
function Save() {
var files1 = $("#file1").get(0).files;
var data = new FormData();
data.append("Data", JSON.stringify(GetData()));
for (i = 0; i < files1.length; i++) {
data.append("file" + i, files1[i]);
}
var resp =
{
service: "File/SaveFile",
sender: data,
progress: null,
funct: null,
antes: null,
despues: null
};
var response = CallServiceUpload(resp);
response.done(function (responseData, textStatus) {
var controlInput = $("#file1");
controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
});
return response;
}
function GetData() {
x =
{
ID: 1
}
return x;
}
this.CallServiceUpload = function (obj) {
return $.ajax({
type: "POST",
url: "api/" + obj.service,
data: obj.sender,
contentType: false,
processData: false,
error: function (message) {
alert(message.responseText);
}
});
}
and here is the server code using ASP.NET Web Api
using DataManager.Estruct.DTO;
using DataManager.Logic;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
namespace WebApp.Controllers
{
public class FileController : ApiController
{
#region
[HttpPost]
[ActionName("SaveFile")]
public async Task<JObject> SaveFile()
{
// Check if the request contains multipart/form-data.
var httpContent = Request.Content;
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string root = HttpContext.Current.Server.MapPath("~/App_Data");
try
{
StringBuilder sb = new StringBuilder(); // Holds the response body
var provider = new CustomMultipartFormDataStreamProvider(root);
// Read the form data and return an async task.
await Request.Content.ReadAsMultipartAsync(provider);
string jsonData = provider.FormData.GetValues("Data")[0];
List<string> deletefiles = new List<string>();
foreach (var file in provider.FileData)
{
FileInfo fileInfo = new FileInfo(file.LocalFileName);
//Process File
}
provider.FileData.Clear();
foreach (string deletefile in deletefiles)
{
try
{
File.Delete(deletefile);
}
catch (Exception ex)
{
string error = ex.InnerException.Message;
}
}
object x = new { data = "ok"};
return JObject.FromObject(x);
}
catch (Exception ex)
{
// string Mensaje = LCuenta.LogError(null, ex, System.Reflection.MethodBase.GetCurrentMethod().Name);
var error = new { error = ex.Message };
return JObject.FromObject(error);
}
}
#endregion
}
public class CustomMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
{
public CustomMultipartFormDataStreamProvider(string path) : base(path) { }
public override string GetLocalFileName(HttpContentHeaders headers)
{
return headers.ContentDisposition.FileName.Replace("\"", string.Empty);
}
}
}
I Alredy use this code for another app , but in this case after the executing the javascript method Save , the complete page reloads , if the file is small o the call has no files only data y does not reload , the page html is on asp web view using mvc , but is only a container all the code is on javascript.
thanks!;
On button click use preventDefault
Ex
$("#buttonID").click(function(event){
event.preventDefault();
});

Web API string parameters and POST values

I am using a jQuery plugin, jTable. The plugin has the following function to load the table:
$('#PersonTable').jtable('load', { CityId: 2, Name: 'Halil' });
The values in the load function is send as POST data. The plugin also sends two query string parameters (jtStartIndex, jtPageSize) through the URL for paging the table.
An example in the documentation shows a function on how to handle this in ASP.NET MVC but not in Web API Example :
[HttpPost]
public JsonResult StudentListByFiter(string name = "", int cityId = 0, int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null)
{
try
{
//Get data from database
var studentCount = _repository.StudentRepository.GetStudentCountByFilter(name, cityId);
var students = _repository.StudentRepository.GetStudentsByFilter(name, cityId, jtStartIndex, jtPageSize, jtSorting);
//Return result to jTable
return Json(new { Result = "OK", Records = students, TotalRecordCount = studentCount });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
How my function currently looks: It works fine except that I can't manage to read the POST data (name param):
public dynamic ProductsList(string name = "", int jtStartIndex = 0, int jtPageSize = 0 )
{
try
{
int count = db.Products.Count();
var products = from a in db.Products where a.ProductName.Contains(name) select a;
List<Product> prods = products.OrderBy(x => x.ProductID).ToList();
return (new { Result = "OK", Records = prods, TotalRecordCount = count });
}
catch (Exception ex)
{
return (new { Result = "ERROR", Message = ex.Message });
}
}
My jTable load: (This get called when the user enters text in a input)
$('#ProductTable').jtable('load', {
name: $('#prodFilter').val()
});
I would appreciate any help with how to read both the string parameters in the URL and the POST data in a Web API function.
EDIT:
I used an alternative way to send the data to the API. Instead of sending it in the load function formatted as JSON I used a function for the listAction and sent the data through the URL (See jTable API reference for details):
listAction: function (postData, jtParams) {
return $.Deferred(function ($dfd) {
$.ajax({
url: 'http://localhost:53756/api/Product/ProductsList?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&name=' + $('#prodFilter').val(),
type: 'POST',
dataType: 'json',
data: postData,
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
}
To reload the table based on your filtered results:
$('#ProductTable').jtable('load');
Instead of this:
$('#ProductTable').jtable('load', {
name: $('#prodFilter').val()
});
Try applying the [FromBody] attribute to the name parameter
public dynamic GetProductList([FromBody]string name = "", int jtStartIndex = 0, jtPageSize = 0)
{
...
}
The default binder in Web API will look in the URI for simple types like string, specifying the FromBody attribute will force it to look in the body.

Knockout and breeze.js take method is not working Paging

Datacontext.js
var manager = new breeze.EntityManager('breeze/BreezeData');
function getMenuItems() {
var query = new breeze.EntityQuery("Products").take(5);
return manager.executeQuery(query);
}
Products.js
function loadProducts() {
return datacontext.getMenuItems().then(function (data) {
data.results.forEach(function (item) {
self.menuProducts.push(item);
});
}).fail(function (data) {
logger.logError('Failed to load Products', null, "", true);
});
}
Action Method
[HttpGet]
public IEnumerable<MenuItem> Products()
{
var venueId = GetCurrentVenue().ID;
return _contextProvider.Context.MenuItem.Where(mi => mi.Venue.ID == venueId);
}
It returns almost 45 records but i am using take(5) here and that take isn't working and returning the same result.I am a newbie so i have just started to implement it.
Thanks in advance..
Change action method to:
[HttpGet]
public IQueryable<MenuItem> Products()
{
var venueId = GetCurrentVenue().ID;
return _contextProvider.Context.MenuItem.Where(mi => mi.Venue.ID == venueId);
}
In case it still doesn't work, try adding orderBy in case server isn't sure what would actually be first 5 items.

How do I generate a treeView based on remote data using Kendo UI TreeView?

I have been reading ALL of the documentation on this and I still cannot get it to work.
I have a Web API which provides a JSON object. It's a list of 22 things. Just 22 lines of text.
I want to take these and form a TreeView. Each of these 22 strings will have items under them but I just want to get the first part working.
My first question is, how do I extract data from an API and populate a treeView with it?
On my main page, I have this:
<div id="treeView"></div>
On my JavaScript file I have this:
$("#treeView").kendoTreeView({
checkboxes: true,
dataSource: {
transport: {
read: {
url: "http://...",
dataType: "json"
}
}
}
});
When I try to run the page, I get "Request failed." [Retry]
If I open up a browser and go to this URL, data is returned fine as a JSON object.
What am I doing wrong here?
EDIT -
Code that is returning the JSON:
public List<string> getNotificationByUser(int id)
{
List<string> notificationTitles = new List<string>();
foreach (var notification in notifications)
{
notificationTitles.Add(notification.ToString());
}
return notificationTitles;
}
Ok! I've been able to reproduce your error. The question is that 22 lines of text are not a valid JSON.
Returning something like:
This
is
a
test
Is not a valid JSON.
But a valid JSON is not enough, you should return something like this:
[
{ "text": "This" },
{ "text": "is" },
{ "text": "a" },
{ "text": "test" }
]
I.e.: The result should be an array of objects where each object has a text field.
NOTE I know that it does not have to be called text but for simplicity I used it since it is the default value.
I figured out all of my answers:
function CreateNotificationTree(userId)
{
debugger;
var data = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "../api/notifications/byuserid/" + userId,
contentType: "application/json"
}
},
schema: {
model: {
children: "notifications"
}
}
});
$("#treeview").kendoTreeView({
dataSource: data,
loadOnDemand: true,
dataUrlField: "LinksTo",
checkboxes: {
checkChildren: true
},
dataTextField: ["notificationType", "NotificationDesc"],
select: treeviewSelect
});
function treeviewSelect(e)
{
var node = this.dataItem(e.node);
window.open(node.NotificationLink, "_self");
}
}
[HttpGet]
public List<Node> getNotifications(int id)
{
var bo = new HomeBO();
var list = bo.GetNotificationsForUser(id);
var notificationTreeNodes = (from GBLNotifications n in list
where n.NotificationCount != 0
select new NotificationTreeNode(n)).ToList();
var li = notificationTreeNodes.Select(no => new Node
{
notificationType = no.NotificationNode.NotificationType + " " + "(" + no.NotificationNode.NotificationCount + ")", notifications = bo.GetNotificationsForUser(id, no.NotificationNode.NotificationTypeId).Cast<GBLNotifications>().Select(item => new Notification
{
ID = item.NotificationId, NotificationDesc = item.NotificationDescription, Params = new List<NotificationParam>
{
new NotificationParam
{
ParamName = item.Param1, ParamVal = item.ParamValue1
},
new NotificationParam
{
ParamName = item.Param2, ParamVal = item.ParamValue2
},
new NotificationParam
{
ParamName = item.Param3, ParamVal = item.ParamValue3
},
new NotificationParam
{
ParamName = item.Param4, ParamVal = item.ParamValue4
},
new NotificationParam
{
ParamName = item.Param5, ParamVal = item.ParamValue5
},
},
ActionPageName = item.ActionPageName
}).ToList()
}).ToList();
li.ForEach(i => i.notifications.ForEach(x => x.SetNotificationLink()));
return li;
}

Categories