• <menu id="w2i4a"></menu>
  •
    logo FastReport.Net 教程2017（完結(jié)）
    文檔首頁(yè)>>FastReport.Net 教程2017（完結(jié)）>>使用Ajax更新ASP.Net MVC項(xiàng)目中的報(bào)表對(duì)象

    使用Ajax更新ASP.Net MVC項(xiàng)目中的報(bào)表對(duì)象

    Ajax技術(shù)顯著加快了Web應(yīng)用程序的速度。另外，視覺(jué)效果方面也有提升。大家都同意，每次點(diǎn)擊按鈕時(shí)整個(gè)頁(yè)面都會(huì)被刷新這一點(diǎn)不太友好。如果你的網(wǎng)速不是很快，那么這個(gè)過(guò)程會(huì)很煩人，因?yàn)樗械脑囟紩?huì)先消失，再慢慢重新出現(xiàn)。如果只刷新一部分頁(yè)面，那就美滋滋了。而這正是Ajax所提供的。該腳本向服務(wù)器發(fā)送一個(gè)請(qǐng)求，以更新所需的部分信息。然后，腳本將更新的數(shù)據(jù)插入頁(yè)面上的正確位置。

    在這個(gè)頁(yè)面中，我想用一個(gè)簡(jiǎn)單的方法通過(guò)Ajax更新ASP .Net MVC項(xiàng)目中的信息。這種方法被稱為“unobtrusive Ajax” - Microsoft Unobtrusive Ajax。其底線是使用Unobtrusive庫(kù)，并且，輔助程序允許你使用Ajax而無(wú)需編寫(xiě)任何JavaScript代碼。這個(gè)例子會(huì)非常簡(jiǎn)單，適合初學(xué)者。那么，我們開(kāi)始吧。

    要在一個(gè)MVC項(xiàng)目中使用FastReport.Net報(bào)表生成器自帶的WebReport組件，你需要調(diào)整一些配置。即，編輯Web.Config文件并添加必要的庫(kù)。

    將FastReport和FastReport.Web庫(kù)添加到你的項(xiàng)目中。

    在Web.config中添加處理句柄，它位于項(xiàng)目的根目錄中：

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

    現(xiàn)在我們切換到HomeController.cs。在這里，我們放置業(yè)務(wù)邏輯：

    我已經(jīng)創(chuàng)建了全局報(bào)表對(duì)象：

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

    如你所見(jiàn)，Index方法只包含了報(bào)表的加載，并通過(guò)ViewBag將其傳遞給視圖。我將報(bào)表上傳到單獨(dú)的 SetReport() 方法。

    現(xiàn)在考慮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>

    在開(kāi)始的時(shí)候，我決定從官網(wǎng)上源https://www.asp.net/ajax/cdn下載必要的庫(kù)。但是你也可以使用NuGet包安裝庫(kù)。

    最有趣的是助手Ajax.BeginForm()。前兩個(gè)參數(shù)表示動(dòng)作（方法）和控制器。更新方法將在稍后創(chuàng)建。這個(gè)助手與 Html.BeginForm() 非常相似。只多加了一個(gè)參數(shù) - "AjaxOptions"。你可以在MSDN中閱讀有關(guān)這些選項(xiàng)的更多信息。其中最重要的是UpdateTargetId。正如你所理解的，它指示了要顯示更改的元素的標(biāo)識(shí)符。在我們的例子中，是 <div id="UpdateHere"> 。但 @ ViewBag.WebReport.GetHtml() 元素已經(jīng)顯示在其中。這樣做是為了在頁(yè)面首次加載時(shí)從Index方法顯示報(bào)表。

    我在助手中顯示復(fù)選框和按鈕。該復(fù)選框?qū)⒅甘緢?bào)表工具欄的狀態(tài) - 啟用/禁用。

    讓我們回到控制器：     

    public ActionResult Index(string condition)
 {
 SetReport();
 ToolbarCondition(condition);
 ViewBag.WebReport = webReport; 
 return View();
 }

    在Index方法中，我們傳遞條件參數(shù) - 視圖中復(fù)選框的狀態(tài)。此外，它還添加了一個(gè)調(diào)用ToolbarCondition方法（條件）。它將處理參數(shù)并啟用或禁用報(bào)表工具欄。我們來(lái)寫(xiě)這個(gè)方法：

    public void ToolbarCondition(string condition)
 {
 if (condition=="true")
 webReport.ShowToolbar = true;
 else
 webReport.ShowToolbar = false;
 }

    現(xiàn)在，添加另一個(gè)將返回分部視圖的方法。這要求Ajax請(qǐng)求僅更新頁(yè)面的一部分，而不是整個(gè)頁(yè)面：

    [HttpPost]
 public ActionResult Update(string condition)
 {
 SetReport();
 ToolbarCondition(condition);
 ViewBag.WebReport = webReport;
 return PartialView("Update");
 }

    [HttpPost] 行表示該方法接受Post請(qǐng)求。我們的行動(dòng)需要一個(gè)參數(shù)條件，以及索引。實(shí)際上，一切都是重復(fù)的，但最終我們得到了將被插入視圖索引的分部視圖?，F(xiàn)在我們需要添加這個(gè)視圖。右鍵點(diǎn)擊方法名稱：

    使用Ajax更新ASP.Net MVC項(xiàng)目中的報(bào)表對(duì)象

    然后選擇“添加視圖...”：

    使用Ajax更新ASP.Net MVC項(xiàng)目中的報(bào)表對(duì)象

    添加一個(gè)新的視圖。讓我們編輯它：

    @ViewBag.WebReport.GetHtml()

    這就是我所有的代碼。

    你可以運(yùn)行該應(yīng)用程序：

    使用Ajax更新ASP.Net MVC項(xiàng)目中的報(bào)表對(duì)象

    打開(kāi)復(fù)選框并點(diǎn)擊按鈕：

    使用Ajax更新ASP.Net MVC項(xiàng)目中的報(bào)表對(duì)象

    在這種情況下，只有WebReport對(duì)象被更新，而不是整個(gè)頁(yè)面。當(dāng)頁(yè)面上有很多信息，且完全刷新會(huì)占用過(guò)多的時(shí)間和資源成本，這就很有用了。

    產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動(dòng) | 在線客服 | 聯(lián)系Elyn

     

    推薦閱讀
    FastReport 2018 最新版本下載
    掃碼咨詢


    添加微信 立即咨詢

    電話咨詢

    客服熱線
    023-68661681

    TOP
    三级成人熟女影院,欧美午夜成人精品视频,亚洲国产成人乱色在线观看,色中色成人论坛 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();