Ajax更新ASP.Net MVC项目中的报表对象实例分享-php教程-PHP中文网

首页

后端开发

php教程

Ajax更新ASP.Net MVC项目中的报表对象实例分享

小云云

Jan 20, 2018 am 09:32 AM

ajax asp.net

本文主要为大家分享一篇使用Ajax更新ASP.Net MVC项目中的报表对象方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。

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> 
@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" /> 
 } 
 <p id="UpdateHere"> 
 @ViewBag.WebReport.GetHtml() 
 </p> 
</p>

登录后复制

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

最有趣的是助手Ajax.BeginForm()。前两个参数表示动作（方法）和控制器。更新方法将在稍后创建。这个助手与 Html.BeginForm() 非常相似。只多加了一个参数 - "AjaxOptions"。你可以在MSDN中阅读有关这些选项的更多信息。其中最重要的是UpdateTargetId。正如你所理解的，它指示了要显示更改的元素的标识符。在我们的例子中，是

。但 @ 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请求。我们的行动需要一个参数条件，以及索引。实际上，一切都是重复的，但最终我们得到了将被插入视图索引的分部视图。现在我们需要添加这个视图。

右键点击方法名称：

然后选择“添加视图...”：

添加一个新的视图。让我们编辑它：

@ViewBag.WebReport.GetHtml()

登录后复制

这就是我所有的代码。

你可以运行该应用程序：

打开复选框并点击按钮：

在这种情况下，只有WebReport对象被更新，而不是整个页面。当页面上有很多信息，且完全刷新会占用过多的时间和资源成本，这就很有用了。

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7462

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资

解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误

如何使用Ajax从PHP方法中获取变量？ Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：

如何解决jQuery AJAX报错403的问题？ Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使

PHP 与 Ajax：构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。

PHP 与 Ajax：创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

Ajax（异步JavaScript和XML）允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax，您可以动态加载产品列表：HTML创建一个带有容器元素的页面，Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求，从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据，并将其编码为JSON格式。JavaScript解析JSON数据，并将其显示在页面容器中。点击按钮触发Ajax请求，加载产品列表。

PHP 与 Ajax：提高 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

为了提升Ajax安全性，有几种方法：CSRF保护：生成令牌并将其发送到客户端，在请求中添加到服务器端进行验证。XSS保护：使用htmlspecialchars()过滤输入，防止恶意脚本注入。Content-Security-Policy头：限制恶意资源加载，指定允许加载脚本和样式表的来源。验证服务器端输入：验证从Ajax请求接收的输入，防止攻击者利用输入漏洞。使用安全Ajax库：利用jQuery等库提供的自动CSRF保护模块。

ajax版本有哪些 Nov 22, 2023 pm 02:00 PM

ajax不是一个具体的版本，而是一种使用多种技术的集合来异步加载和更新网页内容的技术。ajax没有具体的版本号，但是有一些ajax的变体或扩展：1、jQuery AJAX；2、Axios；3、Fetch API；4、JSONP；5、XMLHttpRequest Level 2；6、WebSockets；7、Server-Sent Events；8、GraphQL等等。

See all articles

Ajax更新ASP.Net MVC项目中的报表对象实例分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题