I am developing an interactive web application with ASP.NET Core MVC.
The application consists of reading several items of data from a JSON file, nested in the following way:
Communities --> People --> People data
I have already developed the model, the controller and the view, and I am able to show a grid containing the names of the people available in the JSON file, using this technique from NewtonSoft :
string json = webClient.DownloadString(#"MyJson.json");
model.RootObjects = JsonConvert.DeserializeObject<Rootobject>(json);
My question: I would like to add a popup/window, upon clicking one of the buttons/data cells that contain the person name in the grid.
Upon clicking the modal must show further information from the same Json file that has been used to build the Main Grid (in the index) .
The complexity that I am facing (As I am really new to this kind of dev) is : having multiple dynamic buttons (created from the Json data) then synchronizing between the ID of the button (Or Data cell) and the Specific information being read again from the JSON and returned to the model.
I have tried a lot of solutions which I have found on different websites, I have seen JQuery, AJAX . Tried to build another model for a partial view, but in vain .
I only need some suggestions from your experience. What is the best that you could do in this kid of situations?
Should I go again through developing a new model in my ASP.NET Core MVC and reinvent the wheel? Should I go through pure AJAX, jQuery ...etc ?
Related
Do any of the front end frameworks (Like Vue.js) have the ability to generate a prototype form/view directly from various an Endpoints?
I am wanting to quickly knock up a few forms to capture and submit data to a set of JSON Rest Post APIs and Display pages to render data retrieved from other JSON Rest Get APIs.
I don't want to have to go through the pain of having to map each and every field out in a set of .js file, it would be great if the boilerplate could just be generated from interface in a similar way to what Apache Isis does from a Domain model.
The above would allow me/clients to generate a UI directly off the interface and interact with it using a web browser in a similar way one would using Postman, without having to install and understand Postman.
You can try one of these:
https://vue-crud.github.io/
https://github.com/dionmaicon/vue-crudgen
https://github.com/ais-one/vue-crud-x - described in https://codeburst.io/vue-crud-x-a-highly-customisable-crud-component-using-vuejs-and-vuetify-2b1539ce2054
https://api-platform.com/docs/distribution/
I want to render a UI from a jSON string that has multiple layers.
The user should be able to enter data, which will then be stored and shared, without the overhead of the jSON Render Structure.
However, the assignment of the data must be possible.
The app renders a template from a multidimensional json string that can capture metrics (user inputs). The measured data are entered via text fields by the user.
There are different windows in the app, which are rendered from different json UI-render-files.
The stored algorithms in the windows at the Frontend differ.
The following should be possible:
All windows are created with different jSON strings (works with build_value now).
The user's input is saved. (Currently only works by saving the render json string with the data under a different name (with Package: Shared Preferences)).
The data entered by the user is copied from one window to the other window. (Data Binding / Data Mapping)
The data entered by the user will be sent to a backend.
I only have the idea to use id's in the render json, which allow a mapping.
Are there better solutions?
Saving the entered data is possible by saving the whole jSON - String with an other name.
The goal is to map the data.
It should also be possible for the user to insert another object for the measurement data acquisition at the client / device. The entered data must also be saved.
This sounds like a REST API. Then you would use a frontend framework like angular or react to take user input.
I could build this with a .net core web api with sql db as the backend. this would be a web service (REST API solution) on the backend of your solution.
Next I would integrate Swagger with dependency injection and add authentication.
now its time to create the front end that will use your tested Web Service.
you would have 1 side of your SPA POST new JSON to the Web service in a form.
you would have the other side GET the new record as a new tab with pagination or in a table with pagination.
This would be a good PoC for your idea and will let you learn the parts of the solutions architecture in your language of choice. the "design" would be the same no matter what language your choice.
backend web service can be done in a flask and with a MySQL DB. or with any other combo you have skills with.
the Frontend could be done in knockout.js, making it a little easier to learn than angular or react.
Please create new questions when you choose your software design. I would love to give answers for each:)
I would love to level up with you! ;)
I have a field in my website where I want users to enter book names that they can checkout from the database. I want it so that when they start typing the names I want suggestions or drop down under the input box matching the name of the book they are typing.
Is it possible to achieve something like this? I have a books table in my MySQL database and I am using Nodejs as my backend. I have searched a lot online but did not find anything related to this online. Therefore, I decided to ask the question here.
You have to send AJAX request with type GET and send the typed character to the Backend.
and in backend you have to do query for ex :select * from book where name like %input%
Then you have to return the result as an array to the front-end.
Finally, in your front-end code you have to render the result array under the input.
Also, you can use any ready jquery plugin to do this task in front-end code.
The UI element is commonly called a "typeahead" or autocomplete.
Twitter release their frontend component as a jQuery plugin called typeahead.js. Most frontend frameworks will have an equivalent plugin or component.
The backend datasource for the books is up to you to implement.
For small datasets you can render the required book data within the page so it is directly accessible from your javascript.
For large datasets you will probably need to create a backend "book search" service in Nodejs. Typeahead libraries can send that user input to a URL via an AJAX request and the service returns the matching results, usually as a JSON object.
Code for geek example for your stack.
You can make a drop-down menu with book names and using ajax you can get value from the input and search in database and display data .
I suggest you to use mongo db as database.
You can find tutorials in w3 schools or
in malayalam https://www.youtube.com/c/Crossroadstalk
I am developing a mobile app which retrieves data from a Liferay-based portal. I am using JSON web services to access the data which works well for e.g. Blog Entries. How can I make a new web service for existing tables? Each tutorial I have found starts with the definition of a new entity (i.e. database table), but I don't need that. I just want to access existing data in such a way which is not provided by system ws, e.g. to filter web content which have a specific structure.
Note: I tried also a workaround, I managed to make a struts action which prints out the desired JSON data and returns null. When I enter the address for the action in a browser, I see the JSON string. But if I put it in my mobile app, I see an HTML code, it seems that it is redirected to the home page of the portal.
Neat trick if you don't want to define a new entity with servicebuilder: Just leave the entity empty, this defines just a type, but no fields, e.g. no underlying table. Then implement your methods by just delegating to whatever persistence you'd like to access (or even without any persistence).
<Entity name="Foo" local-service="true" remote-service="true">
</Entity>
This will create FooServiceImpl and FooLocalServiceImpl that you can use to implement your business logic, without any attached database table.
I am using Sencha GXT3 app for a html interface. Data is retrieved in json format from a REST service. How exactly do I fill a store with a single object for reading and later manipulating and saving?
This is not about lists of objects, but really a specific single json map which I want to load into a store.
Any help would be highly appreciated.
For Stores you have basically two choices list or tree. Right? GXT 3 store api
You say it's not a list so did you see the src of their json tree example
Personally for a single object, I use a list. I mean it's a list of size 1. json list example
Of those two examples, json tree example is easier to understand since it's not using a grid I think. There are tree grid examples too but none I immediately see with json.
This is for version 3. I see no reason why you'd want to start with 2 since 3 is much more similar to native gwt and you can mix 2 and three code (see their tutorial) until you get everything ported to the newer version. Just saying ...