Displaying Custom Reports in Blazor using Syncfusion

in our last video we create a custom report using the bold reports designer we could use the bolded ports viewer to display the reports but that doesn't always fit with what you want to accomplish that is why today we're going to implement a report viewer in a blazer server application that way we can show our custom reports to our clients directly inside of our site instead of sending them to a separate application now this video has been sponsored by syncfusion i cover the details of sponsorship in the intro to syncfusion video as well as how to get the sync fusion controls for free i encourage you to check out that video if you haven't yet download the controls or if you want more information about syncfusion i'd appreciate it if you use the link in the description that will let syncfusion know that people are interested in their products because of this sponsorship which will encourage them to continue sponsoring community content okay let's start off in visual studio and we're going to create a new project we're going to create a blazer server app we're not going to start anything special no sync fusion templates just a simple blazer server app i'm going to call this report demo and report demo app and we'll save this in the temp folder and net 6 no authentication yes to https now once this gets created we will just do a couple of quick things to note that this is the net 6 layout so you're going to see the one file instead of this and the the other file but everything's here now i have a video on what dot net 6 change versus dot net 5 and before so you can uh look that over but in dependencies or right click we're going to say measure to get packages we're going to add three nuget packages the first one is boldreports.net.core so this is the actual reporting engine we're going to for viewing reports so install that the latest stable version is 4.1.78 as it's recording this video we'll install that hit okay and i accept next up we're going to make sure that microsoft i spell it right dot asp.net core dot mvc dot newtonsoft json this is the the original json system for for working with json files we do have a newer version but it doesn't have all the features and with syncfusion they like to use the newton's soft version so go ahead and install this okay and i accept and finally we're going to install system.data.sql and this is because our report uses sql server so if your report is not used sql server you don't need this but since ours does it needs to be able to communicate to sql remember that from the last video the um the report is just an xml file and one of the things in there is where to find the data it's just a a connection string so the application is going to have to execute the x that connection string and talk to the data that's why we need the uh the sql client installed okay now we're also going to be putting an api controller right in our blazer server app now this does mean we should probably talk with the fact that blazer server is just an asp.net core web application there's also api mvc razer pages these are all just asp.net core web applications at their heart and what we do is we use the base web application and we add our own pieces so for instance we have the map blazer hub this and also the add server side blazer these two things are what add the blazer stuff to asp.net core but we can also add our own things as well so for instance we can come down here and above where it says app.mapblazerhub we can say app.map controllers and what this will do is it will enable mvc and api to be used inside of our asp.net core application in this case our blazer server app this will allow us to use api 2. so don't think of this as two separate applications it's one it's just that we're adding in the features that we want to enable okay so why do we have to have an api well the api is what will actually serve the report it's going to process the report and it's going to make sure we cache the report in memory so that it does keep getting called over and over again and so on so just know that's why we have to have the api that's that's how it works is we're going to call the api from our page speaking of pages let's clean up a couple of things here we're going to let's get rid of reportdemo.data let's get rid of the sample weather forecast service let's actually delete this entire data folder and then let's go to pages and we're going to delete the fetch data page basically get rid of the excess uh boilerplate stuff the demo stuff that comes with the blazer server app now the last thing is we'll modify the nav menu but in just a minute first we're going to add a page and we're going to say blazer i'm sorry razer components which is a blazer server page and we're going to say let's just call this report viewer all right and we're gonna give it a path so at page reports viewer which means that we can then just copy that go over the nav menu and where we right now have fetch data where i replace that with a report viewer i'll leave the icon the same but we'll say report viewer that way we can see that report right away and if we run this application it should build and if it does then we'll see [Music] see our link to the page which just doesn't really have anything yet but that's okay all right here we go so we have the counter is still there we left it there but the report viewer and there we go there is the the start of our report page okay so we're we're set to start but we still have a ways to go now the first thing i'm going to do is open up www root and in here i want to create a couple things first i'm going to create a folder for for reports now if you're not familiar with the www root uh folder it's a special folder inside of our asp.net core apps and what it does is it's going to copy over to the root of our website everything is in here we're going to market anything special we're just going to copy everything over which means that if i open up my temp directory remember that that file there i can copy this and i can paste it in here and now i have my sample peoplereport.rdl file inside of my project we can then reference that later all right so there's one folder the other folder is going to be scripts we are going to deal with javascript in this in this video so scripts and in here we're going to create one javascript uh script and this is a pretty boilerplate script so you can pretty much copy and paste this from app to app whenever you need a report viewer in your app so let's go to add and we're going to say new item we'll search for javascript as to the javascript file i know it says visual c sharp it's weird but it's just it's just a c sharp or i'm sorry javascript file and we're going to name this uh let's name it bold reports dash interop and it's an empty javascript file if you don't know javascript again this is pretty much boilerplate i would encourage you to at least understand javascript if you're working the web not a framework library at first just learn vanilla javascript it's pretty important when doing the web to at least know the basics so we're going to say window dots bold reports what this does is it adds this to the window object which will allow us to call it from other places in this case where i call it from our blazer server app equals and we start the curly braces on the same line again we are conforming to javascript standards now not c sharp standards don't try and make them the two look the same that's a mistake render viewer it's a function we're going to pass in element id report viewer options and then inside of here we're going to say and it's going to use some jquery which i'm not a huge fan of but they say it's a requirement to have jquery if this is the only thing that was using jquery we could just use a simple selector and not have to use the jquery selector but since we have jquery we're going to use the jquery selector so we're looking for if you pass in the element id the name of it then it's going to look for that id on the page all right we're going to say bold report viewer then inside here report path is going to be report viewer options dot report name and report i'm sorry report service url is going to be report viewer options dot service url okay how i know this well because i went through and read the documentation pretty much that's it um this right here what we're doing is we're adding a new function to the window object so bolderports.renderviewer and the render viewer function what it's going to do is it's going to look for whatever element id you pass and look the id on the web page so any element any html element that has an id which is supposed to unique it it's going to look for the specific id we pass in which is going to be our report viewer id it's going to find that and it's going to attach this and it's going to pass in these two values the two values we have find off of this object the report path and the report service url so we'll see more about this in the future but again unless you change names on things this is boilerplate stuff this is stuff you can copy from one project together just copy the whole scripts folder and plunk it in in a new location all right now next up i i'm not big on copy and paste but i'm going to copy and paste in this case the the layout page let me go ahead and copy that off screen and then i'll paste it and we'll talk about it and you'll see why in a minute why i'm not a big fan of of copy paste but i'm going to so in the underscore layout page we need let's do it above the server pre-rendered head outlet and below everything else we're going to paste a bunch of scripts and again normally scripts go at the end of the body but because of the fact they're required for rendering the page we're going to put up in the head now i don't want you to freak out when i paste this we're going to talk through it that's a lot and yes you can copy and paste this and i would encourage you to because this is ridiculous to try and type out yourself i do wish there was an easier way of doing this um i have not found it yet if you find it i would love for you to leave a comment down below and let me know how you found to do this and so on let me zoom out a little bit here normally i don't do this it makes a font small but i think it's important to see this um let's let's try eighty percent all right so first up everything here is a cdn link except that bottom one we'll turn that admit but area has a cdn link we've talked about this before in previous uh in the uh pdf viewer video where we're talking to a content delivery network and saying give me this file which means that we don't have to host ourselves we don't have to worry about the bandwidth ourselves that's somebody else's problem but it also means that um we don't have to make sure that we have the right version for everything we just point to it and later on we can change the version by just changing the number in the url so the first one is the um the styling for the uh the bold report which technically let's do some moving around here we should move these around let's move these two right here we're gonna cut these out here i could i could have moved them manually but we're gonna just copy and paste or cut and paste there we go and the reason i move these down below like we talked about these four but site.css and reportdemo.styles.css they should be below the um any changes any other like boilerplate css otherwise this could override my styles i don't want that i want my styles to override this so this is the material report style you can look at that if you want this right here is jquery now like i said before i don't know why they need jquery they they say that jquery is required in order to display reports i'm hoping it's not for just that one selector this um right here this dollar sign indicates they're using jquery if that's all it is that's a simple replacement you don't need to do this anymore this used to be the way i do things but it isn't needed because basic or vanilla javascript vanilla javascript just means javascript without any extra stuff um vanilla javascript has very powerful selectors already built in we don't need to use jquery but if you're already using jquery using this isn't harming anything so it's a matter of they say it's necessary so we include it all right next up these sections i left the comments on these are from the documentation so you can go to documentation it is copy and paste or you can download my source code and copy and paste now obviously as the versions change you'd have to change these numbers notice it says 4.1.78 which was the version of the package that we installed right here 4.1.78 at boulderports.net.core so these packages relate to that but notice it says use to render gauge items add these scripts only if your report contains gauge report items now if you are displaying multiple reports you're probably gonna have to add these no matter what because the fact that you might not know if the report includes if every report or any of the reports contains gauges so that's kind of a bummer um but if you don't include gauges on any of them then you can get rid of this whole section in all these scripts so this is for mapping so if you have maps and reports you have to include this if not you don't this is for the viewer components you need to have these so this is the the common and the widgets and this is for chart items only if you have charts would you need to include these things well ours does have a chart so we need to include these two but it's up to you what things you need so you might only need this one these two and these two but if you have charts you need two more if you have a map you have one more if you have gauges you have six more so do that information as you will but they're all here in case need them now i would encourage you to figure out what you need and only include what you need because downloading extra stuff not great but download the stuff you need important so therefore figure out what the right balance is for your organization okay with that the last thing here that i i pasted in is this line right here this refers to the scripts folder boldedports-interop.js that sound familiar that's this file so we have to include this as well this is what allows us to call the bold reports um and and stick it on the page essentially okay that's a lot of stuff and i hate copying and pasting but as you can see there's no reason for me to type this out that's ridiculous you're going to copy and paste it so i did okay i think that's the the biggest just copy and paste this so let's go on to creating let's create our model first we're going to have a model which is going to have these two pieces of information report path and and service url report name i'm sorry and service url so let's create a new folder sorry add new folder or call it models and in here we're going to create a new class this is just a c sharp class where i call it report options and i'm i'm preferring the um the file scope namespaces i'm going to change over to that and we'll say prop string report name and prop string service url now that matches exactly uh where are we here here report name and service url the only difference is the fact that the lowercase r the lowercase s that's because in javascript that's the convention which you may say well how do you get the conversion since we need to know how to convert this over that's taken care of for us by default in the conversion from c sharp over to javascript there is a set you can turn that off but by default it converts our model objects over to json or javascript style model objects on the client okay yes lots of stuff going on and if you're not familiar with the web it can be a little confusing but hang with me all right let's uh let's close all this down because there's just a lot of stuff that we don't need to see right now okay next up we're going to do is we're going to add our report controller so let's add a new folder called api that way we know stuff inside apis um let's go just api and then inside here we're going to add just a class we could add a controller um we're going to change so much in it i would prefer to create a class and create a class where i call it report controller all right we're going to change over to the file scope namespaces and we are going to add let's go up to here we're at using statement using microsoft.extensions.caching.memory now the this api is pretty close to copy paste it's not quite a copy paste but it's pretty close to copy paste and so um you don't have to know or memorize all this stuff you just need to know what's going on and why it's using caching in here to make caller reports less intense on the server okay now we do need to decorate this with route we can oops don't need that there's a route and they're going to give it a route path so first of all say api so if you go to our website this uh blazer server page it runs on localhost and then a port number so localhost 7213 whatever but if we want to call an api controller we want to say localhost colon 5712 or whatever it was slash api because that way we differentiate from the regular path so api and then i'll give it the controller and then we're going to say action and then the id which is optional so this is the the path that's needed um i'm not sure why it's helped me oh there we go so we have to inherit from controller base so this is the path that it's going to use to call this api again this is pretty standard stuff the one thing that's not standard and i've heard there is a fix coming after this but typically in api you would say api controller like this for this you should not say this at least not for now and the reason why is because it it makes the images not render and yes this was a head scratcher trying to figure out what was going on with the rendering there's a bug in here where if you say api controller it will not properly render the images everything else is fine and if you export to a pdf which we'll see how to do then the image is there it's just not on the viewer itself the the fix is just take off the um the api controller tag on there and it still all works it just fixes the issue okay again that the fix for that so you can still have api controller on it is coming all right we also want to inherit from i report controller all right we need to use the using bolderports.web.reportviewer okay so that takes care of this of course you haven't implemented this yet don't well let's go ahead and implement ctrl dot implement interface i love this there's your stuff now just fill it in okay the throw new not implement exception just make sure we know that yeah we need to do something here so let's start doing this this is all from the documentation so we're not going to deviate too far from it but we do need to understand what's going on at least at a high level uh private read-only um let's call it cash not memory cash all right and then we're also going to say we need private read only not an ilogger i web host environment or i say host our hosting environment okay and then we're going to grab or put those in the controllers or come start constructor all right so sorry i did a control dot here and said hey put that into the constructor just by doing ctrl dot on the item and we could do something similar here add parameter to report controller like that now it's done so the first one generated this constructor the second one just added a parameter to that constructor so now we're getting both of those from our dependency injection so this provides for us the caching ability so we can cache report and this will allow allows us to get information about our hosting environment which we'll see in just a minute now let's go on to the get resource we need a few different methods here we've implemented based upon the interface the first one is get resource we're going to say action name get resource now this uh api is not following traditional rest and that's okay that's why we're having to decorate everything as we are you can modify this if you wanted to be a little ambitious but we're going to stick with the the defaults of how they went about creating this api controller accept verbs get so it's saying if you ask for git resource so controller which is it's the report controller controller then action action name is get resource and then if you have any information to pass along um that comes next so in this case git resource we're going to pass in object called the report resource and what we're going to do is we're going to return report helper that comes from bold reports dot get resource pass in the resource pass in this and the cache all right so we're passing in this particular instance we're passing in the resource that we're looking for and we're passing in the cache so you can look that up all right now you may say where did this report helper come from if you hit f12 you can go right to it wait for it there we go get resource this is part of boulderports.web.port viewer this is from syncfusion all right so git report was it get resource sorry there we go you can expand this and see read more about what it's doing and then you can also expand the code and read the code so really nice they included that so you can actually follow what it's doing and how it's doing it all right so there is the the first entry next up is the on init reporting options and where i say this is a non-action i mean don't call us directly not as an api endpoint all right string base path equals this is where the hosting environment comes in web root path this is the root of our our um website so we need to know that first and then we're going to say um let me see on my screen here it's my other screen is what i'm reading off of and it's a little long so there we go all right so the next line is file stream input stream equals new base path plus and then our string literal we're going to say slash reports slash so the base path of our site which by the way is www root so localhost is going to start at the www roots level which means then slash reports would take you into this folder which this reports folder which would allow you then to get to the particular report so we're going to say plus report option dot report model dot report path which is going to path to this it's going to say sample people report that's report path going to say which means we just say plus and let me unpin this here so you can see it plus dot rdl we're not going to ask the user to give us dot rdl just say sample people report and then we'll put the rdl at the end put comma and go to the next line because this is like i said long file mode is open and file access is dot read so that's the end of the command so we're saying is i want a string a file stream so input stream of a type file stream the file you want to open is this rdl file whichever one is we're going to open it in read mode so that's where i do first next up we're going to say memory stream memory stream report stream equals new input stream dot copy to report stream so this file stream right here where i copy it to a memory stream report stream dot position so start at zero and then input stream dot close and then report option dot reports model dot stream equals report stream so we're passing in a model here the report viewer options if we look at that we have a few things in here but one of them is the report model if we open this report model up we'll see that actually to report viewer model type hit f12 on that to go to it and we'll see a few things in here but one of them is the stream so what we're saying is we get that report name we look that up and we load up the stream of the report so grab the report put in memory and put that into back into this object so remember that with objects with reference type objects in c sharp like a class when we pass them around we don't pass around and make a copy of the object we're passing on the reference to the object which means that we can update that object like we are right here and the caller will have access to those that update information because the fact we're both pointing to the same location so not to return anything here we just need to update this report option with the stream of our report okay next up on report load we're not going to do anything with so we're going to say not action and just delete out the throw next up we have two posts so we'll just mark them both as http post both of them and then the first one we're going to say return report helper dot process report null this and cash so we're going to say hey process this report and there's no information no um additional settings that reports that's the settings at first and then we're saying this object right here this instance and then here's a cache as well so processor this report which um we have looked at before but if we hit f12 we can go there there's process reports if we uh let's see if we can expand this they'll get to the other side sorry oh yep it expanded there we go so this is what's actually happening to that report how it's being processed and there's further step hit f12 and you go to that location and then open that up and here's what's happening next notice it's working the rdl file and so on so this is how the report actually gets processed if you're interested in going down that rabbit hole this code is all there now this next command the um the pose report action again notice the only difference is this json result dictionary i'm going to paste the same line as above this time instead of null i'm going to put the json result i'm sorry json array in and the reason why we're doing this is because these are the settings the the tweaks to the report that may happen so you don't have any tweaks then this is what we're going to call if you have some tweaks this is what you call so it's just a matter of if you're passing in those tweaks or not whether or not you get that call so that's the api yes it's confusing and we've done it a high level went over what's happening and why and you may say well i kind of understand but i couldn't write that myself and that's okay if you understand and at least know okay i see what's happening here but i couldn't write myself that's okay because you already have it written and this really shouldn't change that much if at all now i encourage you to learn more about and go deeper with it but to start off you can get into it knowing that this you know what it does and if it broke you could probably tweak it and play with it and try and get it to work but you don't have to write it from scratch and know everything about how to build it in the first place because the work's already been done so that is the api that was kind of the complex part the api the internet interop file and putting all those settings into our layout.cs html so let's go to report viewer and let's talk about how to render this page let's start off with a few usings using microsoft.js interrupt this will allow us to talk to javascript from blazer server if you haven't done this yes this is a great time to learn we're going to talk to javascript in order to make one call and that call is to this right here so i'll call this from our blazer server page using microsoft.asp.net core dot components and finally using and this is the what's this application called report demo report demo dot models okay we also need to inject let's use a dependency injection ijs runtime this is the actual javascript runtime we'll call it js runtime this allows us to talk to javascript now you're going to love how complicated the report viewer control actually is div let's give an id of report dash viewer remember i said that we can look up an island page based upon's id well there you go there's the id of that of that object and we're going to give it a style yes this is inline css i'm not a fan of it but it is great for doing stuff quick if you want to get more in a css and have to make sure you understood how cascading style sheets worked and how applying to classes versus ids worked and let's not go there i have a whole course on that if you want to learn more about web development i have a full course on it that will teach you everything you know about html css and vanilla javascript but in the meantime height 100 view height that's the entire report viewer control you may say tim i kind of understand what html is and i can see that's just html and a little bit of inline css styling so where is the actual control well remember i said that we're going to call that javascript interop which looks for an element id and then sticks a bold report viewer in it that's gonna happen so we don't actually have anything on the page we just have a div we can then stick a report viewer inside i have made the height 100 vh which means 100 of the view height or the full height of the page when it's loaded full screen okay inside the code section report options let's call it viewer options equals new i love the autocomplete sometimes new how about that there we go public async void render report viewer inside here viewer options dot report name now we're going to give it the name right in the code if you're only showing one report that's fine if you're swapping out the reports then you might want to have a picker like a drop-down or something like that or you might want to put it in your your app settings.json if it's something you want to have one report for now but maybe change it out later something like that but for us we're just gonna show one report for all time so sample people report remember don't add the rdl because they'll get appended for us so that's report name is sample people report that's this right here and then viewer options dot service url equals this is the path to our api which i believe we call report let me make sure that let's go over to our api and yes report controller so the controller name is everything before controller so if i said uh report fun time then the name of the uh controller is report fund time so you don't add the controller in the end but in our case it's just reports all right so we're going to call the api slash report and then we're going to await js runtime dot invoke void async so this is going to call our javascript runtime it's invoking a void async meaning it's going to call us asynchronously but it's going to not expect anything back from the function we're calling so we're calling a javascript function and we're saying nothing's coming back but i still want to call this asynchronously so normally we don't do asynchronous calls that have a void we use task but we're calling in the javascript we're stepping outside of the realm of c-sharp so we're invoking a method what is that method bold reports dot render viewer where'd that name come from bold reports render viewer so reports dot render viewer so if you want to change the names cool go for it change this name to tim is cool and then this would be timoscool.renderviewer up to you next up report viewer what's that that is the id on our page report dash viewer so that's the link right there and then finally viewer options what is that that's our model that we are we've filled in with some settings information mainly report name and url the of the api so these two pieces of information right there element id that's this this right here report viewer and then report viewer options which is i called viewer options so that's the information being passed in now what will happen here is this will get serialized in a json to then get passed through to here which is why it's the lowercase r and lowercase s and we can read off of the report viewer options and put it into these two values so that's how that connection works we're calling this function in javascript from c sharp and we're doing so not expecting a return it will just work on this object and happen to put our report there we do need a protected override void on after render and we'll get ready get rid of the the base call and just say render report viewer which is calling this method so this is um and actually we should do a [Music] since this does not have is not asynchronous we're just going to call it directly not a huge fan but is what it is right here so we're going to await it here but then down here we're not awaiting it but it's returning a void so it's kind of going off in in the the mist but that's how we're going to make that call okay i think that that is all there is to it but we're gonna find out this is the fun part we're gonna hit build and first of all see the builds always a question mark when you're doing a lot of changes now let's hit run and see if it runs because it did build and so far it's running cool but we haven't actually rendered the page yet let's go report viewer and see if it works all right so unable to read value from request body add from body attribute to the call ah we did miss one thing in the api uh let's go over to where is the api right here okay so this right here the json results this comes from the body of the call therefore we have to add from body to let it know that's where it's coming from as opposed to from somewhere else so it's coming from the body not from a form or something else let's try it again and see if if this time it works report viewer wait for it hey there we go so we have our sample report we have our logo we have our data no cell code crunched on the sides that's because this is the report view as opposed to the print layout view there's the print layout view we do get the license not registered we covered this in a couple of videos ago where we talked about adding our our license key in the secrets.json file so you can see that without the message we can do that we can also export this export it to pdf and by doing so we can hit open and there's our report exported to pdf we actually have two pages instead of one i could trim that up if you wanted to but this works so that's our sample report i won't take this off again we covered that two videos ago when we talked about setting up our pdf viewer we covered making sure that your your you have a license and you have it licensed in your project but that is how you put a report viewer on your blazer server site you can do the same thing with nbc or razer pages because it's pretty much the same thing already it's just how the page um all this code is pretty much the same except for uh where we call this that's the one that really changes otherwise this pa this code is pretty much the same everywhere when it comes to when it comes to our page so with that if you have any questions leave them down in the comments below i'd love to hear them thanks for watching thanks for sync fusion for sponsoring these thanks for saying fusion for sponsoring the community with all this stuff take away for free i really appreciate how much of a friend they are to the community and even more so now and i will get back to you later once we have sponsored those we're gonna take some sponsorship money if you haven't watched the first video watch that but we're gonna take about seven thousand dollars from this sponsorship and use it to help other uh groups that are learning code and are trying to figure out how this all works we're gonna try and sponsor them because of the fact that we've been sponsored and we want to kind of pass that along all right thanks for watching as always i am tim corey [Music] [Applause] you

Channel: IAmTimCorey

Views: 12,782

Keywords: .net, C#, Visual Studio, code, programming, tutorial, training, how to, tim corey, C# course, C# training, C# tutorial, .net core, vs2022, .net 6, syncfusion, syncfusion blazor, displaying custom reports, c# custom reports

Id: CA8waGMYHbY

Length: 50min 9sec (3009 seconds)

Published: Fri May 20 2022