使用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>部分添加脚本和样式：
<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请求。我们的行动需要一个参数条件，以及索引。实际上，一切都是重复的，但最终我们得到了将被插入视图索引的分部视图。现在我们需要添加这个视图。
右键点击方法名称：
然后选择“添加视图...”：
添加一个新的视图。让我们编辑它：
@ViewBag.WebReport.GetHtml()
这就是我所有的代码。
你可以运行该应用程序：
打开复选框并点击按钮：
在这种情况下，只有WebReport对象被更新，而不是整个页面。当页面上有很多信息，且完全刷新会占用过多的时间和资源成本，这就很有用了。
以上这篇使用Ajax更新ASP.Net MVC项目中的报表对象方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
您可能感兴趣的文章:
- ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息
相关推荐
-
ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息
一.如何用AJAX调用JsonResult方法 比如FuckController中添加有个返回JsonResult类型的方法FuckJson(): 复制代码 代码如下: <span class="kwd">public<span class="pln"> <span class="typ">JsonResult<span class="pln"> <span class=&
-
使用Ajax更新ASP.Net MVC项目中的报表对象方法
Ajax技术显著加快了Web应用程序的速度.另外,视觉效果方面也有提升.大家都同意,每次点击按钮时整个页面都会被刷新这一点不太友好.如果你的网速不是很快,那么这个过程会很烦人,因为所有的元素都会先消失,再慢慢重新出现.如果只刷新一部分页面,那就美滋滋了.而这正是Ajax所提供的.该脚本向服务器发送一个请求,以更新所需的部分信息.然后,脚本将更新的数据插入页面上的正确位置. 在这个页面中,我想用一个简单的方法通过Ajax更新ASP .Net MVC项目中的信息.这种方法被称为"unobtrusiv
-
在ASP.NET MVC项目中使用RequireJS库的用法示例
RequireJS 是一个前端模块化开发的流行工具,本身是一个Javascript的库文件,即require.js . RequireJs的主要功能: (1)实现js文件的异步加载,避免网页失去响应: (2)管理模块之间的依赖性,便于代码的编写和维护. 前端模块化开发现在有好多的工具,大体上分为两类,一类是像dojo之类的高大全,dojo v1.8之后已经内置了模块化开发组件:另一类是像require.js,sea.js 这种专心做模块化开发的工具. 从模块化划分的规则来区分,主要分为AMD.C
-
ASP.NET Core项目中调用WebService的方法
一.前言 现实生产中,有一些比较老的系统对外提供的接口都是WebService形式的,如果是使用.NET Framework创建的项目调用WebService非常方便,网上有很多代码示例,这里不在讲解,下面我们讲解如何在ASP.NET Core项目里面调用WebService.首先我们需要创建一个WebService项目和一个ASP.NET Core WebApi项目.创建的WebService代码如下: using System.Web.Services; namespace CoreCall
-
ASP.NET MVC模式中应用程序结构详解
目录 一.App_Data 二.App_Start 三.Content 四.Controllers 五.font 六.Models 七.Scripts 八.Views 九.Web.config 1.根目录下面的Web.config文件 2.Views文件夹下面的Web.config 十.Global.asax 在上一篇文章中,讲解了一些MVC的概念,并且创建了第一个ASP.NET MVC项目,这篇文章将讲解ASP.NET MVC程序中的代码解构,新创建的MVC应用程序解构如下图所示: 一.App
-
把ASP.NET MVC项目部署到本地IIS上的完整步骤
前言 默认情况下,在VisualStudio中开发网站,会运行在IISExpress中,如果想把网站部署到本地的IIS服务器上该怎么办呢? 配置IIS的几个关键点: 1.URL重写模块,这个以前是ISAPI筛选器的功能,后来好像就改版了,都成模块化设计了. 2.ASP.NET MVC项目有路由机制,所以不需要用到IIS中默认文档功能以及目录浏览功能. 3.记得检查应用程序池的 .NET Framework版本,配置成v4.0版本. 4.身份验证上一般不用管,IIS默认使用的是"匿名身份验证&qu
-
ASP.NET MVC项目部署方式介绍
目录 一.直接用源代码部署 1.新建网站 2.配置添加网站 3.浏览 二.使用发布文件部署 1.发布文件 2.部署 ASP.NET MVC编写的程序需要部署到IIS上面才能进行访问,部署方式分为两种. 一.直接用源代码部署 第一种方式可以直接使用源代码进行部署.部署步骤: 1.新建网站 在IIS里面选择网站,然后右键选择“添加网站” 然后打开“添加网站”对话框: 2.配置添加网站 界面配置如下: 然后点击确定,这时在左侧的网站列表中就可以看到新添加的网站. 3.浏览 在左侧列表选中要浏览的网站,
-
ASP.NET MVC项目实现三级联动无刷新
本篇实现有关客户.订单和产品的无刷新三级联动,先看最终效果: 没有选择时,后2个Select状态为禁用: 当选择第1个Select,第2个Select可供选择,第3个Select依旧禁用: 当选择第2个Select,第3个Select可供选择: 当选择第3个Select,界面出现"显示产品信息"按钮: 当点击"显示产品信息"按钮,显示产品信息: 当点击"清空"按钮,恢复到初始状态: View Models Model之间的关系为: using S
-
JSP开发中在spring mvc项目中实现登录账号单浏览器登录
JSP开发中在spring mvc项目中实现登录账号单浏览器登录 在很多web产品中都需要实现在同一时刻,只能允许一个账号同时只能在一个浏览器当中登录.通俗点讲就是当A账号在 浏览器1当中登录了,此时在浏览器2中登录A账号.那么在浏览器1中的A账号将会被挤出去,当用户操作浏览器1的页面,页面会 跳到登录页面,需要重新登录.那么我们怎么实现这样的功能呢?下面将给大家进行详细的介绍: 原理 用户A使用账号a在浏览器当中登录,然后用户B在另外一台电脑上的浏览器登录账号a,当用户B登录验证成功时,将会触
-
asp.net core项目中如何使用html文件
前言 大家应该都知道,在asp.net core 项目中,使用html文件一般通过使用中间件来提供服务: 打开 NuGet程序管理控制台 输入install-package Microsoft.aspnetcore.staticfiles 进行添加 ASP.NET Core static files middleware. Includes middleware for serving static files, directory browsing, and default files. 在S
-
Spring MVC项目中的异常处理详解
目录 前言 1. 基于配置的简单异常处理 2. 基于注解的全局异常处理 总结 前言 我们在项目的开发中,难免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合度高,工作量大且不好统一,维护的工作量也很大. 那么,能不能将所有类型的异常处理从各处理过程解耦出来,这样既保证了相关处理过程的 功能较单一,也实现了异常信息的统一处理和维护?答案是肯定的.下面将介绍Spring MVC是如何处理异常的. 1. 基于配置的简单异常处理 在SpringMVC中拥有一套非常强大的