Updating report object through Ajax in ASP.Net MVC project
Ajax technology significantly speeds up web applications. Also, the visual side is important. Agree that not very nice when each time you click the button and the entire Web page is updated. If your internet is not very fast, this procedure causes irritation, because all elements disappear and appear again. It would be good if only part of the Web page is updated. This is what provides Ajax. The script passes the request to the server to update the necessary pieces of information. Then, the script inserts the updated data to the desired location on the web page.
An example is very simple, based on the newcomers. Let's get started. For use in a MVC project WebReport component of FastReport.Net report generator, you need to make some adjustments. Namely, to make changes in the Web.Config files and add the necessary libraries.
Add the FastReport library and the FastReport.Web into your project.
Add the handler in the Web.config, which is located in the root of the project:
Add the namespaces in the Web.config file that is located in the Views folder.
In _Layout.cshtml file add scripts and styles in the section <head>:
Now we go to HomeController.cs. Here we place the business logic:
I've created a report object as global:
As you can see, the method Index contains only the loading of report and transferring it to the presentation via ViewBag. I have separated the report loading to the separate method SetReport().
Now consider the view Index.cshtml:
In the beginning, I decided to download the necessary libraries from the official online source https://www.asp.net/ajax/cdn. But you may well install libraries using a package NuGet.
The most interest is the helper Ajax.BeginForm(). The first two parameters indicate the action (the method) and the controller. The method Update we will create later. This helper is very similar to Html.BeginForm(). Only one parameter was added - AjaxOptions. You can read more about these options in MSDN. The most important of them - UpdateTargetId. How do you understand it indicates the identifier element in which to display the changes. In our case it is - <div id="UpdateHere">. But it is already displayed element @ ViewBag.WebReport.GetHtml(). This is done so that to display a report from the method Index when the page first loads.
I display CheckBox and button within helper. Check box will indicate the status of the report toolbar - enabled / disabled.
Let's go back to the controller:
We pass condition peremeter to the Index method - the state of the check box in the view. Also, it adds a call ToolbarCondition method (condition). It will handle the parameter and activate or deactivate the report toolbar. Let's write this method:
Now, add another method that will return a partial view. It is necessary that the Ajax request only part of the page is updated, not all entirely:
String [HttpPost] indicates that the method accepts a Post request. Our action takes a parameter condition, as well as the Index. In fact, everything is repeated, but in the end we get a partial view to be inserted into the view Index. Now we need to add this view. Make a right click on the name of the method:
And select Add View…:
Add new view. Edit it:
That's all the code that I put in it.
We can run the application:
Activate the checkbox and click the button:
In this updated only WebReport object, not the entire page. This is especially useful when you have a lot of information on the page and its full reset will cause tangible time and resource costs.