Use Ajax to update the report object method in ASP. Net MVC project.

Use Ajax to update the report object method in ASP. Net MVC project.

Ajax significantly accelerates Web applications. In addition, the visual effects are improved. Everyone agrees that it is unfriendly to refresh the whole page every time you click the button. If your network speed is not very fast, this process will be annoying, because all elements will disappear first and then gradually reappear. If you only refresh a part of the page, it will be nice. This is exactly what Ajax provides. This script sends a request to the server to update the required information. Then, the script inserts the updated data into the correct location on the page.

On this page, I want to use a simple method to update information in the ASP. Net MVC project through Ajax. This method is called "unobtrusive Ajax"-Microsoft Unobtrusive Ajax. The bottom line is to use the Unobtrusive library, and the Helper Program allows you to use Ajax without writing any JavaScript code. This example is very simple and suitable for beginners. Let's get started.

To use the WebReport component that comes with FastReport. Net Report builder in an MVC project, you need to adjust some configurations. That is, edit the Web. Config file and add necessary libraries.

Add FastReport and FastReport. Web library to your project.

Add a processing handle to Web. config, which is located in the root directory of the project:

<system.webServer>  
Add a namespace to the Web. config file in the Views folder.
<namespaces>  <add namespace="FastReport" />  <add namespace="FastReport.Web" />  </namespaces> 
Add scripts and styles in the 

Now we switch to HomeController. cs. Here, we place the business logic:
I have created a global report object:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using FastReport.Web; using System.Web.UI.WebControls; using System.Globalization; using WebLocalization.Models;  namespace WebLocalization.Controllers {  public class HomeController : Controller  {  private WebReport webReport = new WebReport(); // report object is available within the class  private string report_path = "J:\\Program Files (x86)\\FastReports\\FastReport.Net\\Demos\\Reports\\"; //reports folder   public ActionResult Index()  {  SetReport(); //method of loading report and DB  ViewBag.WebReport = webReport; //pass the Web Report into the View  return View();  }   public void SetReport()  {  System.Data.DataSet dataSet = new System.Data.DataSet(); //create data set dataSet.ReadXml(report_path + "nwind.xml"); //Load xml database webReport.Report.RegisterData(dataSet, "NorthWind"); // register the data source in the report object  webReport.Report.Load(report_path + "Simple Interactive.frx"); //load the report into WebReport object  webReport.Width = Unit.Percentage(100);  webReport.Height = Unit.Percentage(100);  } 
As you can see, the Index method only includes report loading and passes it to the view through ViewBag. I uploaded the report to a separate SetReport () method.
Now consider the Index. cshtml View:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.2.1.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2.2/jquery.validate.unobtrusive.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script> @{  ViewBag.Title = "Home Page"; }  @using (Ajax.BeginForm("Update", "Home", new AjaxOptions  {  UpdateTargetId = "UpdateHere"  //HttpMethod = "POST",  //InsertionMode = InsertionMode.Replace,  }))  {  @Html.CheckBox("condition", true)  <input id="sel" type="submit" value="Select" />  }  <div id="UpdateHere">  @ViewBag.WebReport.GetHtml()  </div> </div> 
At the beginning, I decided to download the necessary libraries from the source https://www.asp.net/ajax/cdn on the official website. However, you can also use the NuGet package to install the library.
The most interesting thing is the assistant Ajax. BeginForm (). The first two parameters indicate the action (method) and controller. The update method will be created later. This assistant is very similar to Html. BeginForm. Only one parameter-"AjaxOptions" is added ". You can read more about these options in MSDN. The most important one is UpdateTargetId. As you understand, it indicates the identifier of the element to be changed. In our example, It is <div id = "UpdateHere">. However, the @ ViewBag. WebReport. GetHtml () element is already displayed. This is done to display the report from the Index method when the page is loaded for the first time.
I show check boxes and buttons in the assistant. This check box indicates the status of the report toolbar-enable/disable.
Let's go back to the Controller:
public ActionResult Index(string condition)  {  SetReport();  ToolbarCondition(condition);  ViewBag.WebReport = webReport;  return View();  } 
In the Index method, the status of the check box in the condition parameter-view is passed. In addition, it adds a condition to call the ToolbarCondition method ). It processes parameters and enables or disables the report toolbar. Let's write this method:
public void ToolbarCondition(string condition)  {  if (condition=="true")  webReport.ShowToolbar = true;  else  webReport.ShowToolbar = false;  } 
Now, add another method that will return the partial view. This requires that Ajax requests only update part of the page, rather than the whole page:
[HttpPost]  public ActionResult Update(string condition)  {  SetReport();  ToolbarCondition(condition);  ViewBag.WebReport = webReport;  return PartialView("Update");  } 
The [HttpPost] line indicates that this method accepts Post requests. Our actions require a parameter condition and an index. In fact, everything is repeated, but we finally get the branch view that will be inserted into the View index. Now we need to add this view.
Right-click the Method Name:

Then select "add view ...":

Add a new view. Let's edit it:
@ViewBag.WebReport.GetHtml()
This is all my code.
You can run the application:

Open the check box and click the button:

In this case, only the WebReport object is updated, not the whole page. This is useful when there is a lot of information on the page and full refresh takes too much time and resource costs.
The above method of updating report objects in ASP. Net MVC project using Ajax is all the content shared by Alibaba Cloud. I hope you can give us a reference and support for the guests.