I'm using MVC5 and passing model from Controller to View. In the view I have
var test = #Html.Raw(Json.Encode(Model.Data));
It work great, I have my model in the js variable. The problem is when I'm going to see my HTML code, the whole variable is rendered
Is there any way how I can remove or hide this code?
Thanks
To pass a variable from your server to the client you have two options really:
Do what you have done (but the value is rendered in markup)
Expose a webapi and query the endpoint in javascript to get the data
Option 2 is best practice.
Without more details on what you're trying to achieve I can't give a more detailed answer, but basically you should be looking into webapi to resolve this.
note: there are other things you could do like websockets and cookies, but it's unlikely that you want that kind of stuff for this
How do i make a dynamic search bar?
Do i need to use html methods? How can i make the bar dynamic?
Hi, i just started learning node.js... while i never developed web applications.
I don't want you to write the code, i just want you to point me to the right direction.
<form>
<input type="text" name="search" placeholder="Search..">
</form>
Now, how do i get the information someone types in the search bar? And what should i use to have the search bar display information without reloading the page?
Assuming you will not use any JS framework, the easiest way is to use a input with auto-complete feature. One example:
http://jqueryui.com/autocomplete/
A similar question:
jQuery autocomplete with callback ajax json
you could use socket.io to create a bidirectional connection with your server, and update your list each time something new pop's up
and if you're new to the server, take a look at my blog:
https://mathieuauclairweb.wordpress.com/2017/05/02/how-to-make-a-nodejs-server-with-to-database-part-1/
I might add a tutorial on how to use socket.io this afternoon
You have to use both JavaScript(jQuery) client-side code to make AJAX calls on 'keyup' handler and server-side PHP (or whatever language you use) routine to handle that AJAX call and answer it with JSON array.
If your search will return only plain text results, then you can check aria-autocomplete on the Internet. There are plenty examples. In this method your server answer should contain a JSON array. In a very similar way you can also populate <option> tags in a <select>.
If you dig much more without using aria-autocomplete you can make your own custom-styled display of answers. You can take a look at my site http://www.zahranvane.com/ (only in Bulgarian language, sorry). There is a search field in the header. Type some number (like 511) and you will see matching results in a poping div. To achieve this approach the server-side script returns formatted HTML which replaces the content of the poping div.
As #user3429660 advice you use jquery autocomplete.
Create a function who call a webservice that you have defined in your nodejs with express for example. the web service return data in JSON to the function and the view is updated with jquery
1) What you are looking for is getting the value out of the input:
Get the value in an input text box
2) Not reloading page -> look into AJAX (many tutorials online...)
I'm trying to work with the nice OmniGrid control.
Everything is great when I'm setting a URL for an ASP.NET handler that returns an answer.
My problem starts when I'm trying to use the data provider.
I was breaking my fingers trying to find a piece of information of how to use the data provider (can't find the appropriate format of the table content result).
Anyone familiar with such tutorial/example?
My I know how you are trying to integrate it in your pages? and what kind of backed u have to bind?
I am trying to create a button on the initial list or homegrid view of leads that will set the value of a specific field to the same value every time for the lead that is selected. Anyone know how i can do this through javascript?
Thanks!
To build on James's answer, you can use the CrmParameter SelectedControlSelectedItemIds to get a list of all the leads selected in a homepage grid. There is an answer on the MSDN forums that explains how to do this, copied below. You can do this in the Xml source or in the two CRM ribbon editors I know of.
After that, you would then need to use the Update method of one of the CRM webservices to loop through the Guid array and update each entity/database row accordingly. I've mentioned Avanade's excellent web resource before, and MSDN has some additional documention on this as well.
Walkthrough: Use the SOAP Endpoint for Web Resources with JScript
Sample: Create, Retrieve, Update and Delete Using the REST Endpoint with JavaScript
<CommandDefinition Id="Account.Form.CustomGroup.Button.A.Command">
<Actions>
<JavaScriptFunction Library="$webresource:AccountFormLibrar"
FunctionName="CreateNewAccount">
<CrmParameter Value="SelectedControlSelectedItemIds"/>
</JavaScriptFunction>
</Actions>
</CommandDefinition>
function CreateNewAccount (prmRecordGUID) {
//prmRecordGUID will recieve all GUIDS in comma seperated i.e. GUID1,GUID2,GUID3
}
Yeah this should be pretty straightforward - I dont think what you have said in your comment will work - that function you are trying to use only works if the form of the record is open, e.g. it wont work from a grid view.
You will have to use a webservice call as described in the MSDN here: http://msdn.microsoft.com/en-us/library/hh771584#BKMK_DataAccessUsingJavaScript
Also if you are customising the ribbon (adding buttons) you would find it a lot easier with this tool: http://www.develop1.net/public/page/Ribbon-Workbench-for-Dynamics-CRM-2011.aspx
I'm working on an AJAXy project (Dojo and Rails, if the particulars matter). There are several places where the user should be able to sort, group, and filter results. There are also places where a user fills out a short form and the resulting item gets added to a list on the same page.
The non-AJAXy implementation works fine -- the view layer server-side already knows how to render this stuff, so it can just do it again in a different order or with an extra element. This, however, adds lots of burden to the server.
So we switched to sending JSON from the server and doing lots of (re-)rendering client-side. The downside is that now we have duplicate code for rendering every page: once in Rails, which was built for this, and once in Dojo, which was not. The latter is basically just string concatenation.
So question part one: is there a good Javascript MVC framework we could use to make the rendering on the client-side more maintainable?
And question part two: is there a way to generate the client-side views in Javascript and the server-side views in ERB from the same template? I think that's what the Pragmatic Programmers would do.
Alternatively, question part three: am I completely missing another angle? Perhaps send JSON from the server but also include the HTML snippet as an attribute so the Javascript can do the filtering, sorting, etc. and then just insert the given fragment?
Well, every time you generate HTML snippets on the client and on the server you may end up with duplicated code. There is no good way around it generally. But you can do two things:
Generate everything on the server. Use AHAH when you need to generate HTML snippets dynamically. Basically you ask server to generate an HTML fragment, receive it asynchronously, and plug it in place using innerHTML or any other similar mechanism.
Generate everything on the client (AKA the thick client paradigm). In this case even for the initial rendering you pass data instead of pre-rendered HTML, and process the data client-side using JavaScript to make HTML. Depending on the situation you can use the data island technique, or request data asynchronously. Variant: include it as <script> using JSONP so the browser will make a request for you while loading the page.
Both approaches are very simple and have different set of pros and cons. Sometimes it is possible to combine both techniques within one web application for different parts of data.
Of course you can go for exotic solutions, like using some JavaScript-based server-side framework. In this case you can share the code between the server and the client.
I don't have a complete answer for you; I too have struggled with this on a recent project. But, here is a thought:
Ajax call to Rails
Rails composes the entire grid again, with the new row.
Rails serializes HTML, which is returned to the browser.
Javascript replaces the entire grid element with the new HTML.
Note: I'm not a Rails person, so I'm not sure if those bits fit.
Has anyone tried something like the following? There's redundant data now, but all the rendering is done server-side and all the interaction is done client-side.
Server Side:
render_table_initially:
if nojs:
render big_html_table
else:
render empty_table_with_callback_to_load_table
load_table:
render '{ rows: [
{ foo: "a", bar: "b", renderedHTML: "<tr><td>...</td></tr>" },
{ foo: "c", bar: "d", renderedHTML: "<tr><td>...</td></tr>" },
...
]}'
Client side:
dojo.xhrGet({
url: '/load_table',
handleAs: 'json',
load: function(response) {
dojo.global.all_available_data = response;
dojo.each(response.rows, function(row) {
insert_row(row.renderedHTML);
}
}
});
Storing the all_available_data lets you do sorting, filtering, grouping, etc. without hitting the server.
I'm only cautious because I've never heard of it being done. It seems like there's an anti-pattern lurking in there...
"Perhaps send JSON from the server but also include the HTML snippet as an attribute so the Javascript can do the filtering, sorting, etc. and then just insert the given fragment?"
I recommend keeping the presentation layer on the client and simply downloading data as needed.
For a rudimentary templating engine, you can extend Prototype's Template construct:
http://www.prototypejs.org/api/template
As your client scales and you need a rich and flexible MVC, try PureMVC.
http://puremvc.org/content/view/102/181/
As in regular server side programming you should strive to encapsulate your entities with controls, in your case client side controls that has data properties and also render methods + events.
So for example lets say you have on the page an are that shows tree of employees, effectively you should encapsulate it behavior in a client side class that can get JSON object of the employee list / by default connect to the service and a render method to render the output, events and so on.
In ExtJS its is relatively easy to create these kind of controls - look at this article.
Maybe I'm not fully understanding your problem but this is how I would solve your requirements:
Sort, Filter
It can be done all in JavaScript, without hitting the server. It's a problem of manipulating the table rows, move rows for sorting, hide rows for filtering, there is no need for re-rendering. You will need to mark columns with the data type with custom attributes or extra class names in order to be able to parse numbers or dates.
If your reports are paginated I think it's easier and better to refresh the whole table or page.
Group
I can't help here as I don't understand how will you enable grouping. Are you switching columns to show accumulates? How do you show the data that doesn't support accumulates like text or dates?
New item
This time I would use AJAX with a JSON response to confirm that the new item was correctly saved and possibly with calculated data.
In order to add the new item to the results table I would clone a row and alter the values. Again we don't need to render anything in client-side. The last time I needed something like this I was adding an empty hidden row at the end of the results, this way you will always have a row to clone no matter if the results are empty.
Number 5 in my list of five AJAX styles tends to work pretty well.