使用Ajax更新ASP.Net MVC项目中的报表对象方法

程序员文章站 2022-04-10 11:07:41

ajax技术显著加快了web应用程序的速度。另外，视觉效果方面也有提升。大家都同意，每次点击按钮时整个页面都会被刷新这一点不太友好。如果你的网速不是很快，那么这个过程会很烦...

ajax技术显著加快了web应用程序的速度。另外，视觉效果方面也有提升。大家都同意，每次点击按钮时整个页面都会被刷新这一点不太友好。如果你的网速不是很快，那么这个过程会很烦人，因为所有的元素都会先消失，再慢慢重新出现。如果只刷新一部分页面，那就美滋滋了。而这正是ajax所提供的。该脚本向服务器发送一个请求，以更新所需的部分信息。然后，脚本将更新的数据插入页面上的正确位置。

在这个页面中，我想用一个简单的方法通过ajax更新asp .net mvc项目中的信息。这种方法被称为“unobtrusive ajax” - microsoft unobtrusive ajax。其底线是使用unobtrusive库，并且，辅助程序允许你使用ajax而无需编写任何javascript代码。这个例子会非常简单，适合初学者。那么，我们开始吧。

要在一个mvc项目中使用fastreport.net报表生成器自带的webreport组件，你需要调整一些配置。即，编辑web.config文件并添加必要的库。

将fastreport和fastreport.web库添加到你的项目中。

在web.config中添加处理句柄，它位于项目的根目录中：

<system.webserver> 
 <handlers> 
 <add name="fastreporthandler" path="fastreport.export.axd" verb="*" type="fastreport.web.handlers.webexport"/> 
 </handlers> 
 </system.webserver>

在位于views文件夹中的web.config文件中添加命名空间。

<namespaces> 
 <add namespace="fastreport" /> 
 <add namespace="fastreport.web" /> 
 </namespaces>

在_layout.cshtml文件的<head>部分添加脚本和样式：

<head> 
@webreportglobals.scripts() 
@webreportglobals.styles() 
</head>

现在我们切换到homecontroller.cs。在这里，我们放置业务逻辑：

我已经创建了全局报表对象：

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); 
 }

如你所见，index方法只包含了报表的加载，并通过viewbag将其传递给视图。我将报表上传到单独的 setreport() 方法。

现在考虑index.cshtml的视图：

<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>

在开始的时候，我决定从官网上源 https://www.asp.net/ajax/cdn 下载必要的库。但是你也可以使用nuget包安装库。

最有趣的是助手ajax.beginform()。前两个参数表示动作（方法）和控制器。更新方法将在稍后创建。这个助手与 html.beginform() 非常相似。只多加了一个参数 - "ajaxoptions"。你可以在msdn中阅读有关这些选项的更多信息。其中最重要的是updatetargetid。正如你所理解的，它指示了要显示更改的元素的标识符。在我们的例子中，是<div id="updatehere"> 。但 @ viewbag.webreport.gethtml() 元素已经显示在其中。这样做是为了在页面首次加载时从index方法显示报表。

我在助手中显示复选框和按钮。该复选框将指示报表工具栏的状态 - 启用/禁用。

让我们回到控制器：

public actionresult index(string condition) 
 { 
 setreport(); 
 toolbarcondition(condition); 
 viewbag.webreport = webreport; 
 return view(); 
 }

在index方法中，我们传递条件参数 - 视图中复选框的状态。此外，它还添加了一个调用toolbarcondition方法（条件）。它将处理参数并启用或禁用报表工具栏。我们来写这个方法：

public void toolbarcondition(string condition) 
 { 
 if (condition=="true") 
 webreport.showtoolbar = true; 
 else 
 webreport.showtoolbar = false; 
 }

现在，添加另一个将返回分部视图的方法。这要求ajax请求仅更新页面的一部分，而不是整个页面：

[httppost] 
 public actionresult update(string condition) 
 { 
 setreport(); 
 toolbarcondition(condition); 
 viewbag.webreport = webreport; 
 return partialview("update"); 
 }

[httppost] 行表示该方法接受post请求。我们的行动需要一个参数条件，以及索引。实际上，一切都是重复的，但最终我们得到了将被插入视图索引的分部视图。现在我们需要添加这个视图。

右键点击方法名称：

使用Ajax更新ASP.Net MVC项目中的报表对象方法