I've done a lot of C# programming but I haven't touched much web until recently. One thing I've been struggling a little bit with, and really think there must be a better way I don't know about, is the right(a few of the better ways?) way to send the data in a form to a server.
I'm using MVC4 / C #, and I'm working on an html form that will be at least 18 inputs, some with multiple selections, and the ability for users to click 'add another' to a certain spot, and could make the amount of input fields 30+.
Is there any neat way to package this into some sort of javascript object, and receive it as a object in c#?
I would prefer to not do a post with the form, since I want to use AJAX and not have the page refresh.
In the only other form I have done so far in this project, there was about 6 inputs, but each one was optional. I built a queryurl and used jquery. Just this seemed like more of a pain than it needed to be and it's much smaller.
$.get(apiLink, function (response) {
$("#SearchResults").html(response);
});
You can create a JSON object with all the inputs you have, and then parse it on your controller using JSON.NET
Related
I'm making a website that gets its info from a RESTapi I've written and hosted myself, have had no data problems thus far.
Now I'm trying a simple retrieve of a json object and I get all the info correctly as shown here in the API. (Visualized & tested in Swagger)
As you can clearly see, it retrieves it the complete object and underlying objects correctly (blurred sensitive info).
Pay attention to the property "AmountOfEggs" though.
Now when i call this api endpoint (exactly the same way) in my site and console.log the result.data, this is the feedback.
Now for some reason I can't recieve AmountOfEggs in my frontend.
I've recreated the entire object, wrote different names, passed different props (Id, NumberBus, etc are passed in this situation with no problem, which are also int (number) types).
I have no idea why this property gets "dropped" in the transfer and filled with/defaults to an empty string.
Any help would be greatly appreciated.
I found where it went wrong and it's due to different factors.
To start, I am making this site using the Vue framework, which has reactive components, which means, data gets adjusted and you get live updated components on your views/pages.
In the page that contained the call, I also wanted to add dynamic styling. The code I used for this is the following:
v-for="seller in retrievedSellers"
:key="seller.Id"
:class="[
'sellerStyle'
, (seller.AmountOfEggs = 0 ? 'grey-out-seller' : ''),
]"
Now two things to note, first of all this might look like backend coding but this is Vue logic on the .vue file which handles the dynamic options that Vue provides so I never thought to look here for the error.
The error of couse is the 'seller.AmountOfEggs = 0' part, using one equal sign (assignment) instead of two (comparison).
So I learned,
Vue doesn't throw errors on assignments in code that is used to generate frontend (where you should NEVER alter your data).
My console.log was the moment the response of the API came in, where apparently it was already assigned a new value (due to my code above) before hitting the console.log.
It still greatly surprises me that Vue handles ^this^ first to make sure your reactive components are up to date before finishing the api call itself.
However, I still don't understand how it said "" instead of 0.
I'm using typescript (javascript strongly-typed) so it definitely wants to contain a number and not an empty string. Even in the declaration of my DTO the property is defined as (and expects) a number.
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'm surprised this hasn't been asked already. I have a form on a web page which is being submitted via a restful web service (it's actually using angular js). The question is how should I set default values on the form? (This is for creates as obviously on an edit I'll be getting values from the server anyway)
An example
Let's say we have a checkbox on the form to opt in/out of marketing emails.
I would like to receive marketing emails [x]
In this case the checkbox is defaulted to checked so they have to physically opt out. In the old world of generating html on the server I probably would have returned these defaults from the business layer and then generated the form html with the defaults set.
Solution 1
Set the default values in the client. As I'm using angular I could have a JS object that represents the default state of the form and use this to initialize the form on a create.
My problem with this approach is that it just feels a bit wrong to be putting business rules like this in the client.
Solution 2
Another option might be to hide fields that have default values and only let them be changed on an edit. This might be ok for some types of field but for our optin field they definitely need to review this. This could be done if the form initially displayed those fields without defaults, then when you click a button to continue the form is saved. The client could then do a get on the object just saved and display all fields with the now populated defaults.
I can't decide if I like this approach or not. It's more requests to the server so in that respect it's not very efficient. Depending on which fields have defaults it might look a bit odd suddenly being presented with some extra fields.
Solution 3
Finally we could create a rest web service to get the default state. I haven't seen any other examples of this so not sure of any conventions. Something like:
GET http://server/rest/myresource/default
Are there any conventions on this kind of thing? Something I've missed? Anyone done this themselves and found a way that works best?
Thanks
If you are talking about an editing form, you have some "defaults" (i.e. the already saved data) and the data that the user is inserting. So you basically get the data (via $http) and use it for extend the form fields (via angular.extend). Here is a fiddle which explains it better: http://jsfiddle.net/F9rD8/
After reading through your comments, I think the problem might be thinking of Angular framework as Presentation Layer. Yes - It is a client side framework, but when running on the client side, Angular provides the MVC Presentation Layer. The recommendation is to augment the presentation layer with Angular "Services".
You might want to have an Angular Business "Service" that provides the defaults for the new form.
In the Angular world, your Layered architecture is essentially on the client side with Views and Controllers forming the presentation layer and both client side angular services and Server side APIs forming the business layer.
Angular services - https://docs.angularjs.org/guide/services
Hope that makes sense.
I have an ExpressionEngine site that I'm building with Bootstrap. It's a site for volunteers to find projects to help with. On the home page I have a modal with a form for them to select when they're available and what categories of jobs they're looking for. Then they can click submit and it'll go to a new page with filtered entries.
I don't know if this is possible using the GET method or POST method on the form. I've figured out how to use the GET method and get a query string into my URL but I don't know how to use that data to filter my entries on the entries page. Or would using POST and JSON be a better option? I don't know really how to implement either so any help would be great.
Thanks a lot!
It depends on how the information you would like to show is stored.
If you are using MySQL (a common RDMS), or any other form of SQL Database for that matter, the most common way is to send your GET query string (for example) to your server, have a sever-side language (such as PHP) handle that request by accessing your database, and then echo the result. This can be done synchronously, or with AJAX.
For example, the flow of everything might look like this:
User selects an option (say, "Gardening Projects").
JavaScript converts the value of that input option to a query string and sends an HTTP request using the GET method.
The destination of this request is "filter.php" (for example).
"filter.php" access your database using an SQL query, which searches for any entries in your database, say, having a tag of "gardening".
"filter.php" echos a statement with those entries (or, better yet, returns a JSON object)
JavaScript then parses the resultant JSON object into the DOM, which displays as a bunch of links in a result area that your user can click on.
The question you have about how to handle this is very broad, so I would recommend simply doing some Google searches or looking around this site for resources that show you how to set up databases, access those databases with possibly PHP/SQL, and maybe even use AJAX to return those results, etc.
To get you started (these are in no particular order):
AJAX Tutorial
PHP - JSON encode
SQL tutorial
jQuery AJAX
I got it figured out with some help from #JoshBeam. It turns out that I was trying to make it way more complicated than it actually is. Rookie mistake. In the end I just ended up using method=get in my form and the setting the action as the page with the filtered entries. I then used php to echo the inputs into my EE channel:entries tag.
One thing I still haven't figured out is how to make it so that my query string will combine values for matching names. Currently I have checkboxes for days of the week, each with name="day" and different values for each day. If there are multiple checked, my query string becomes example.com/?day=sun&day=mon when I'd rather have it as example.com/?day=sun&mon. So if anyone has any tips on that, I'd welcome them! I also wonder if there's a way to add pipes between each value when I echo them in my EE tag so that I can have multiples - e.g. {exp:channel:entries category="1|2|3"}. But I have really yet to Google either of these questions so I'll do that.
Thanks!
Is it possible to populate grid with some of the JSON data and a form with other, from the same JSON? Two stores or two models or both? simple example... ;-)
Yes, the best way to do this would be to manipulate the reader, which as well as returning records, also stores whatever the raw json sent from the server is.
The easiest solution would be to specify the reader parameters for your grid, but then have a listener on the store, which then processed the rawData property from the reader to get the additional values for your form.
Of course if your form data is related to the grid data, you may do better to rely on nested loading and form.loadRecord in the store's load event handler. See the Ext samples (form and grid data binding example) for wasy of doing this.
Depending on the circumstances, another approach similar to the Ext FAQ would be to handle the Ajax through a simple Ext.Ajax.Request, and this process the json through two stores with local proxies, but this doesn't seem quite so Ext4 data model friendly to me.