Wielu użytkowników generatorów raportów interesuje ustawienie paska narzędzi podczas przeglądania raportu. Takie pytania pojawiają się okresowo na forach i w ankietach. Podobnie jest w przypadku tego użytkownika generatora raportów DevExpress, który chce dostosować pasek narzędzi raportów webowych ASP.Net MVC.
Czasami użytkownikowi wystarczy po prostu ukrycie niepotrzebnych kontrolek. Ale co jeśli w ogóle nie będzie zadowolony ze standardowego paska narzędzi do przeglądania raportów?
Standardowy pasek narzędzi raportu webowego może nie odpowiadać użytkownikowi pod względem dizajnu lub zestawu narzędzi. W tej sytuacji, jedynym rozwiązaniem może być wdrożenie własnego paska narzędzi. Oczywiście, nie musi to być panel, kontrolki można umieścić na stronie internetowej w dowolny sposób. Wystarczy, że „pociągniemy raport za właściwe sznurki”, aby uzyskać to, czego potrzebujemy. Za przykład posłuży nam standardowa aplikacja ASP.Net MVC.
Metoda webowa przywraca wygląd raportu i własne kontrolki. Używamy statycznego obiektu raportu webowego, aby móc z nich korzystać w całej aplikacji. Na przykład, przewracając strony.
1 |
public static WebReport webReport = new WebReport();
|
Metoda webowa obejmuje kilka parametrów: rodzaj eksportu, wyświetlanie paska narzędzi, styl panelu, rodzaj przejścia na inną stronę.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
public ActionResult Index(string ExportType,string toolbar, string page) { SetReport();//Method of the loading template into the report object if (ExportType != null) Export(ExportType); //Report export method SetPage(page); //Go to the particular report page method ShowToolbar(toolbar); //Hide/display toolbar method webReport.Width = Unit.Percentage(100); webReport.Height = Unit.Percentage(100); ViewBag.WebReport = webReport; return View(); } //Upload the report object method private void SetReport() { string report_path = GetReportPath(); System.Data.DataSet dataSet = new System.Data.DataSet(); dataSet.ReadXml(report_path + "nwind.xml"); webReport.Report.RegisterData(dataSet, "NorthWind"); webReport.Report.Load(report_path + "Master-Detail.frx"); } // Go to the particular report page method public void SetPage(string page) { switch (page) { case "Next": NextPage(); break; case "Prev": PrevPage(); break; case "First": FirstPage(); break; case "Last": LastPage(); break; case "Print": Print(); break; } } |
Metoda ta zasadniczo wybiera czynność w zależności od tego, na którą kontrolkę klikamy. Oprócz czynności związanych z nawigowaniem po raporcie, dostępna jest również kontrolka do wydrukowania raportu.
1 2 3 4 5 |
//Next page public void NextPage() { webReport.NextPage(); } |
Te i inne metody nawigacji po raportach wykorzystują standardowe kontrolki funkcyjne na pasku narzędzi raportu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//Previous page public void PrevPage() { webReport.PrevPage(); } //First page public void FirstPage() { webReport.FirstPage(); } //Last page public void LastPage() { webReport.LastPage(); } //Print report public void Print() { webReport.PrintHtml(); } |
Druk raportu można również ustawić jako PrintPDF(). W tym samym czasie, raport zostanie wyeksportowany do formatu pdf.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//Report export nethod public void Export(string type) { switch (type) { case "pdf": webReport.ExportPdf(); break; case "csv": webReport.ExportCsv(); break; case "doc": webReport.ExportWord2007(); break; } } |
Aby określić format eksportu ponownie użyliśmy instrukcji wyboru. W zależności od wyboru, format jest zgodny z metodą eksportu.
1 2 3 4 5 6 7 8 9 10 11 |
//Set the path of the report folder private string GetReportPath() { return this.Server.MapPath("~/App_Data/"); } //Hide/display the toolbar default method public void ShowToolbar(string toolbar) { webReport.ShowToolbar = toolbar; } |
Teraz spójrzmy na program. Jak wiadomo, naszym zadaniem jest stworzenie wydruku, eksport i nawigowanie po raportach.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
@{ ViewBag.Title = "Home Page"; } <div style="float:left"> <div align="left"> @using (Html.BeginForm("Index", "Home")) { <table> <tr> <td> <input id="Print" type="submit" value="Print" onclick="document.getElementById('page').value='Print'" /> </td> <td> @Html.DropDownList("ExportType", new List<SelectListItem>() { new SelectListItem(){ Text= "PDF", Value = "pdf"}, new SelectListItem(){ Text= "CSV", Value = "csv"}, new SelectListItem(){ Text= "Word", Value = "doc"}, }, "Select export type", { @onchange = "this.form.submit()" } ) </td> <td> @Html.CheckBox("Show toolbar", true, new { @onchange = "this.form.submit()" }) Toolbar </td> <td> <input id="first" type="submit" value="<<" onclick="document.getElementById('page').value='First'" /> <input id="prev" type="submit" value="<" onclick="document.getElementById('page').value='Prev'" /> <input id="next" type="submit" value=">" onclick="document.getElementById('page').value='Next'" /> <input id="Last" type="submit" value=">>" onclick="document.getElementById('page').value='Last'" /> <input id="page" type="hidden" name="page"> </td> </tr> </table> } </div> </div> <div> @ViewBag.WebReport.GetHtml() </div> |
Dodaliśmy kontrolkę drukowania, listę rozwijaną z rodzajami eksportu, pole wyboru ukrywające standardowy pasek narzędzi oraz przycisk przejścia stron (pierwsza, poprzednia, następna i ostatnia strona). Zobaczmy, co się stało:
Stworzyliśmy własny pasek narzędzi do interakcji z raportem. Pozwoli nam to na osadzenie tych elementów w dizajn strony internetowej i rezygnację ze standardowego panelu. W tym przykładzie nie wdrożyliśmy wszystkich funkcjonalności standardowego paska narzędzi, a jedynie podstawowe funkcje. Inne funkcje można łatwo zaimplementować analogicznie do przedstawionego wyżej przykładu.
