2

I am sure many people have had this question but I failed to get any results after searching the web and SO or the search keywords were different.

I am working on a new asp.net mvc web app where I get a plain template returned by the index action method on the controller. Later in the document.ready event handler I build the ui dynamically and append the dom elements to the blank template and this just works fine. My issue is I need 2 server calls here,

1) to get the view from the index action method

2) an ajax call inside the document.ready{} to get the data using which I build the ui.

I was wondering if there is any method using which I could pass back the data from the index action method along with the blank template view and use this data to create the ui inside the document.ready event handler. This will save that one additional hit to the server.

The reason for not using partial views is

1) we have some functionality already developed in jquery and

2) in my org people think making the functionality using razor and partial view will not be as flexible, for example building and raising customevent in js is a great feature that helps to keep the functionality loosely coupled from other features. (please correct if we are wrong)

Edit: I thought an example will explain this better,

Say I need to create a list of users, but the entire list and its functionality like checkboxes selection etc are built by a js module. So along with the blank view i want to pass the "users" object which is a class in my models currently.

Kindly suggest.

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Subbu
  • 588
  • 1
  • 7
  • 18
  • does your Index file already have a Model? Putting the necessary data into the model would seem to be the obvious thing to do...that's what MVC models are for. Not sure you even really need a Partial view, unless you want to re-use the same presentation elsewhere in another view – ADyson Aug 06 '18 at 10:09
  • Yes I do have a model class which i pass to the view, but how do i pass or access this data at the client end which can be used by jquery to built the ui? as i thought the return view() only returns back the htlm. Sorry if that is trivial, just starting off with this. – Subbu Aug 06 '18 at 10:12
  • It does, but during the building of the HTML your View code runs - so you can access the model values in Razor code, which you can use to build your view and influence the final HTML. If you don't understand this, take the introductory MVC tutorials provided by Microsoft, it shows you basic examples of this kind of thing. Again, it's one the fundamentals of the MVC framework which make it useful. – ADyson Aug 06 '18 at 10:15
  • Thanks! I shall look it up. – Subbu Aug 06 '18 at 10:18
  • Oh sorry I do get your point, but like i mentioned in my query we arent using razor but building the ui at client side using jquery so using razor to build the html is not an option due to the inherent design here. Hope that clears it up. – Subbu Aug 06 '18 at 10:19
  • Well you can either switch to using Razor instead, or you could potentially use Razor to inject some ready-made JSON into the JavaScript, so it's effectively hard-coded into the page when it first runs, rather than having to fetch it from the server separately. Basically you gotta make a choice between server-side or client-side templating. – ADyson Aug 06 '18 at 10:21
  • Ok so if I understand this correctly, you mean if I have say var users = []; in my js. then i populate it on the server side so that while its downloaded the js already has the data required initially? – Subbu Aug 06 '18 at 10:29
  • that's exactly it. If you have some object in C# which holds the data, you can serialise it to a JSON string and then use Razor to write that string into your JS in the correct place. – ADyson Aug 06 '18 at 10:38
  • Thanks a lot ADyson! I think that should work for us. If you can post this as an answer I shall accept it. – Subbu Aug 06 '18 at 10:43
  • Done, thankyou. Good luck with your project :-) – ADyson Aug 06 '18 at 10:46

1 Answers1

0

You have a couple of options:

1) Server-side rendering:

Putting the necessary data into the model would seem to be the obvious thing to do...that's what MVC models are for.

During the building of the HTML your View code runs - so you can access the model values in Razor code, which you can use to build your view and influence the final HTML. So in this scenario you build your view using Razor, rather than constructing it using JS code. You can of course still use JS to change it after the page has loaded, but it would be downloaded into the browser with the HTML already in the desired starting state.

2) Client-side rendering, but with necessary data pre-populated:

If you'd rather stick with your existing client-side rendering code, you could use Razor to inject some ready-made JSON into the JavaScript, so it's effectively hard-coded into the page when it first runs, rather than having to fetch it from the server separately via AJAX.

For example, if you have some object in C# which holds the data, you can serialise it to a JSON string and then use Razor to write that string into your JS in the correct place.

ADyson
  • 57,178
  • 14
  • 51
  • 63