<asp:Button ID="btnGenerateReport" runat="server"
Text="Generate Report"
CssClass="btn btn-success btn-generate"
resourcekey="GenerateReportButton"
OnClientClick="return openNewWindow();"
OnClick="btnGenerateReport_Click" />
<script type="text/javascript">
function openNewWindow () {
document.forms[0].target = '_blank';
setTimeout(function () { window.document.forms[0].target = ''; }, 0);
}
</script>
using System.Web.Mvc; namespace jQueryImpromptu.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string postId, string filename) { return Content("ok"); } } }
@{ ViewBag.Title = "Index"; var postUrl = Url.Action(actionName: "Index", controllerName: "Home"); } <h2> Index</h2> <input type="button" id="btnDelete" value="delete" /> <div id="infoDiv"> Some Info .... </div> @section JavaScript { <script type="text/javascript"> $(function () { $('#btnDelete').click(function () { $.prompt("آیا برای حذف اطلاعات موجود اطمینان دارید ؟", { title: 'Title', buttons: { "بله": true, "خیر": false }, focus: 2, submit: function (e, v, m, f) { //debugger; if (!v) { return; } var postId = 10; var fileName = "test.jpg" $.ajax({ type: "POST", url: '@postUrl', data: JSON.stringify({ postId: postId, fileName: fileName }), contentType: "application/json; charset=utf-8", dataType: "json", complete: function (xhr, status) { var data = xhr.responseText; if (status === 'error' || !data || data == "nok") { $.prompt("! حذف فایل با خطا مواجه شده است", { title: 'Title', buttons: { "بستن": true } }); } else { $("#infoDiv").fadeOut("slow").remove(); } } }); } }); }); }); </script> }
کتابخانه scroll-out
ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects! Demo
Why should I use this?
- Animate or reveal elements as they scroll into view using CSS or JavaScript
- Super tiny JavaScript library at 1KB minified and gzipped.
- Free for commercial and non-commercial use under the MIT license.
<script src="/path/to/jquery.cookie.js"></script>
$.cookie('the_cookie', 'the_value');
$.cookie('the_cookie'); // => "the_value"
<script type="text/javascript"> $(function () { $('#write').click(function () { $.cookie('data', '{"iri":"Iran","usa":"United States"}', { expires: 365, json: true }); alert('Writed'); }); $('#show').click(function () { var obj = jQuery.parseJSON($.cookie('data')); alert(obj.iri); }); $('#remove').click(function () { $.removeCookie('data'); }); }) </script>
<body> <a href="#" id="write">Write</a> <br /> <a href="#" id="show">Show</a> <br /> <a href="#" id="remove">Remove</a> </body>
$('#write').click(function () { $.cookie('data', '{"iri":"Iran","usa":"United States"}', { expires: 365, json: true }); alert('Writed'); });
با کلیک بر روی لینک Write کوکی data با مقدار مشخص پر میشود.
$('#show').click(function () { var obj = jQuery.parseJSON($.cookie('data')); alert(obj.iri);
$('#remove').click(function () { $.removeCookie('data'); });
$.cookie('data', JSON.stringify(jsonobject), { expires: 365, json: true });
export class ShowHtmlComponent { htmlContent = "Template <script>alert(\"Hello!\")</script> <b>Syntax</b>"; }
<h3>Binding innerHTML</h3> <p>Bound value:</p> <p>{{htmlContent}}</p>
همچنین اگر به کنسول developer tools مرورگر مراجعه کنیم، چنین اخطاری نیز درج شده است:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
روش نمایش HTML در برنامههای Angular
اما اگر خواستیم اطلاعات HTML ایی را به همان صورتی که هستند نمایش دهیم چطور؟ در این حالت باید از روش ویژهی ذیل استفاده کرد:
<p>Result of binding to innerHTML:</p> <p [innerHTML]="htmlContent"></p>
همانطور که مشاهده میکنید، هنوز هم عملیات پاکسازی قسمتهایی که ممکن است مخرب باشند صورت میگیرد (برای مثال تگ script حذف شدهاست). اما مابقی تگهای امن به همان حالتی که هستند نمایش داده خواهند شد.
روش دیگر کار با innerHTML، تعریف یک template reference variable در قالب کامپوننت است:
<p #dataContainer></p>
export class ShowHtmlComponent implements OnInit { @ViewChild("dataContainer") dataContainer: ElementRef; ngOnInit() { this.dataContainer.nativeElement.innerHTML = "nativeElement <script>alert(\"Hello!\")</script> <b>Syntax</b>"; } }
که اینبار قسمت script آن به طور کامل حذف شدهاست.
حالات مختلفی که Angular برنامه را از حملات XSS محافظت میکند
در ذیل، لیست مواردی را مشاهده میکنید که به صورت پیشفرض توسط Angular در مقابل حملات XSS محافظت میشوند و اطلاعات انتساب داده شدهی به آنها تمیزسازی خواهند شد:
HTML Attributes – <div [innerHTML]="UNTRUSTED"></div> OR <input value="UNTRUSTED"> Style— <div [style]="height:UNTRUSTED"></div> URL — <a [href]="UNTRUSTED-URL"></a> OR <script [src]="UNTRUSTED-URL"></script> OR <iframe src="UNTRUSTED-URL" /> GET Parameter – <a href="/user?id=UNTRUSTED">link</a> JavaScript Variable – <script> var value='UNTRUSTED';</script>
تبدیل کردن یک HTML نا امن ورودی به یک HTML امن در Angular
بهتر است اطلاعات دریافتی از کاربران پیش از ارسال به سرور تمیز شوند. برای این منظور میتوان از سرویس ویژهای به نام DomSanitizer کمک گرفت. کار این سرویس، امن سازی اطلاعات نمایش داده شدهی در برنامههای Angular است.
export class ShowHtmlComponent implements OnInit { sanitizedHtml: string; constructor(private sanitizer: DomSanitizer) { } ngOnInit() { this.sanitizedHtml = this.sanitizer.sanitize(SecurityContext.HTML, "<b>Sanitize</b><script>attackerCode()</script>"); } }
در این حالت میتوان موارد ذیل را کنترل کرد. برای مثال اگر مقدار دریافتی CSS است، میتوان از SecurityContext.STYLE استفاده کرد و سایر حالات آن مانند امن سازی HTML، اسکریپت و آدرسهای اینترنتی به شرح ذیل هستند:
SecurityContext.NONE SecurityContext.HTML SecurityContext.STYLE SecurityContext.SCRIPT SecurityContext.URL SecurityContext.RESOURCE_URL
غیرفعال کردن سیستم امنیتی Angular جهت نمایش کامل یک مقدار HTML ایی
اگر خواستیم اطلاعات HTML ایی را با فرض امن بودن آن، به همان نحوی که هست نمایش دهیم چطور؟
سرویس DomSanitizer شامل متدهای ذیل نیز میباشد:
export enum SecurityContext { NONE, HTML, STYLE, SCRIPT, URL, RESOURCE_URL } export abstract class DomSanitizer implements Sanitizer { abstract sanitize(context: SecurityContext, value: SafeValue|string|null): string|null; abstract bypassSecurityTrustHtml(value: string): SafeHtml; abstract bypassSecurityTrustStyle(value: string): SafeStyle; abstract bypassSecurityTrustScript(value: string): SafeScript; abstract bypassSecurityTrustUrl(value: string): SafeUrl; abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl; }
برای کار با آنها همانند مثال استفادهی از متد sanitize میتوان سرویس DomSanitizer را به سازندهی یک کامپوننت تزریق کرد و یا میتوان این عملیات تکراری فرمت اطلاعات ورودی را تبدیل به یک Pipe جدید کرد:
import { Pipe, PipeTransform } from "@angular/core"; import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from "@angular/platform-browser"; @Pipe({ name: "safe" }) export class SafePipe implements PipeTransform { constructor(protected sanitizer: DomSanitizer) { } public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { switch (type) { case "html": return this.sanitizer.bypassSecurityTrustHtml(value); case "style": return this.sanitizer.bypassSecurityTrustStyle(value); case "script": return this.sanitizer.bypassSecurityTrustScript(value); case "url": return this.sanitizer.bypassSecurityTrustUrl(value); case "resourceUrl": return this.sanitizer.bypassSecurityTrustResourceUrl(value); default: throw new Error(`Invalid safe type specified: ${type}`); } } }
برای استفادهی از آن، ابتدا این Pipe به قسمت declarations ماژول مدنظر اضافه خواهد شد:
@NgModule({ imports: [ // ... ], declarations: [ SafePipe] })
<p [innerHTML]="htmlContent | safe: 'html'"></p>
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید.
آشنایی با Leaflet
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
#map { height: 600px; }
var map = L.map('map').setView([29.6760859,52.4950737], 13);
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; var osm = new L.TileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib}).addTo(map);
Marker، دایره و چندضلعی
در کنار نمایش Tileها میتوان اشکال گرافیکی نیز به نقشه اضافه کرد؛ مثل مارکر(نقطه)، مستطیل، دایره و یا یک Popup. اضافه کردن یک Marker به سادگی، با کد زیر صورت میپذیرد:
var marker = L.marker([29.623116,52.497856]).addTo(map);
محل مورد نظر به شیء مارکر پاس داده شده و مقدار بازگشتی به map اضافه شده است.
نمایش چند ضلعی و دایره هم کار ساده ای است. برای دایره باید ابتدا مختصات مرکز دایره و شعاع به متر را به L.circle پاس داد:
var circle = L.circle([29.6308217,52.5048021], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map);
در کد بالا علاوه بر محل و اندازه دایره، رنگ محیط، رنگ داخل و شفافیت (opacity) نیز مشخص شدهاند.
برای چند ضلعیها میتوان به این صورت عمل کرد:
var polygon = L.polygon([ [29.628453, 52.488838], [29.637368, 52.493987], [29.637168, 52.503987] ]).addTo(map);
کار کردن با Popup ها
از Popup میتوان برای نمایش اطلاعات اضافهای بر روی یک محل خاص یا یک عنوان به مانند Marker استفاده کرد. برای مثال میتوان اطلاعاتی دربارهی محل یک Marker یا دایره نمایش داد. در هنگام ایجاد marker، دایره و چندضلعی مقادیر بازگشتی در متغیرهای جدایی ذخیره شدند. اکنون میتوان به آن اشیاء یک popup اضافه کرد:
marker.bindPopup("باغ عفیف آباد").openPopup(); circle.bindPopup("I am a circle."); polygon.bindPopup("I am a polygon.");
به علت اینکه openPopup برای Marker صدا زده شده، به صورت پیشفرض popup را نمایش میدهد. اما برای بقیه، نمایش با کلیک خواهد بود. البته الزاما نیازی نیست که popup روی یک شیء نمایش داده شود، میتوان popupهای مستقلی نیز ایجاد کرد:
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(map);
Kendo UI Q1 2015 منتشر شد
آخرین نگارش آنرا از CDN مرتبط میتوانید دریافت کنید:
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.material.min.css" /> <script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
کتابخانه GMap.Net
سال گذشته بود که به بررسی کتابخانههای موجود برای دات نت که به ساخت نقشههای گوگل (+ ) میپردازند پرداختم. ولی مشکلی که وجود داشت، همه آنها در نهایت یک تصویر jpeg تحویل میدادند. ولی من میخواستم نقشهی من زنده و واکنشگرا باشد تا کاربر بتواند روی آن حرکت کند، زوم کند، مارکرها را جابجا کند و امکانات دیگری که در این نقشه در دسترس است را داشته باشد. برای همین شروع به ساخت یک class library کردم تا کاربر بتواند در محیط سی شارپ، تنظیمات را با اسامی قابل شناخت و یک intellisense قدرتمند بنویسد و در نهایت بر اساس اطلاعات کاربر، این کدها به صورت جاوا اسکریپت تولید شود. میتوانید سورس نهایی کتابخانهی GMap.Net را در گیت هاب، به همراه یک پروژهی نمونه ببینید.
پروژهی وابسته این کتابخانه، MS Ajax Minifier جهت کم حجم کردن کدهای جاوا اسکریپت است. در مورد این کتابخانه در سایت جاری بحث شده است.
برای نصب این کتابخانه میتوانید از طریق دستور زیر در Nuget عمل کنید:
Install-Package GMap.Net
در این کتابخانه مواردی که مورد توجه قرار گرفته است، تنظیمات نقشه و بعد از آن overlayها هستند که شامل مارکرها و اشکال مختلف میباشند. این اشکال شامل رسم مستطیل بر روی نقشه، چند ضلعیها و ... نیز میشوند.
برای شروع نیاز است که یک نمونه از کلاس GoogleMapApi را ایجاد کنید. بعد از آن با استفاده از خصوصیت SetLocation، مختصات مرکز نقشه را تنظیم نمایید. سپس با استفاده از خصوصیات دیگر نیز میتوانید نقشه را تنظیم نمایید. تعدادی از این خصوصیات مثل SetZoomVisibility هستند که با استفاده از آن میتوانید تنظیمات زوم را روی نقشه پیاده سازی کنید. البته فعال کردن این گزینه به تنهایی کافی نیست و باید از طریق خصوصیت ZoomControlOption پیکربندی کنترل زوم را نیز اینجام دهید که این پیکربندی شامل موقعیت قرارگیری کنترلهای زوم و اندازهی دکمهها میباشد و مابقی تنظیمات هم بدین شکل هستند:
به غیر از تنظیمات نقشه، Overlayهای زیر در این کلاس پشتیبانی میشوند:
عنوان | توضیحات |
Marker | یک نشانه گذار که برای مشخص کردن یک محل بر روی نقشه به کار میرود. این علامت گذار شامل خصوصیتهایی چون نقطهی قرارگیری، آیکن، عنوان و انیمیشنی برای نحوهی نمایش آن میباشد. همچنین شامل یک خصوصیت دیگر از نوع InfoWindow است که به شما امکان نمایش یک پنجرهی توضیحات را نیز بر روی مارکر میدهد. این محتوا میتواند به صورت HTML نمایش یابد. |
Circle | در صورتیکه بخواهید ناحیهای دایرهای شکل را بر روی نقشه مشخص کنید، کاربرد دارد. با دادن نقطهی مرکزی و شعاع میتوانید دایره را ترسیم کنید. همچنین شامل خصوصیات ظاهری چون رنگ داخل و حاشیهها و میزان شفافیت نیز میباشد. |
Rectangle | به رسم یک مستطیل میپردازد و تنها لازم است دو مختصات را به آن بدهید و بر اساس این دو نقطه، ناحیهی مستطیلی شکل ترسیم میگردد. در صورتیکه نقاط بیشتری را به آن اضافه کنید، فقط دوتای اولی در نظر گرفته میشوند. این گزینه شامل خصوصیات ظاهری نیز میگردد. |
Polyline | برای ترسیم مسیرها به صورت چند ضلعی به کار میرود و الزامی به بستن مسیرها نیست. دارای خصوصیات ظاهری نیز میباشد. |
polygon | کاملا شبیه Ployline است؛ با این تفاوت که یک چند ضلعی بسته است و میتواند داخل آن با رنگ پر باشد. برای بستن این چند ضلعی لازم نیست تا کاری انجام دهید. خود کلاس، نقطهی اول و آخر را به هم وصل میکند. |
خصوصیات آیتمهای بالا، شامل موارد زیر میشود:
نام خصوصیت | توضیحات |
Id | در سازندهی هر کدام به طور اجباری قرار گرفته است. این id برای زمانی است که بخواهید با استفاده از جاوااسکرپیت با آن ارتباط برقرار کنید. |
Editable | با فعال کردن این خاصیت، به کاربر این اجازه را میدهید که بتواند روی Overlay ویرایش انجام دهد. |
StrokeWeight | ضخامت لبهها را مشخص میکند. |
StrokeColor | رنگ لبه را مشخص میکند. |
StrokeOpacity | میزان شفافیت لبه را بین 0 تا 1 مشخص میکند. |
FillColor | بعضی از المانها مانند چند ضلعیهای بسته و مستطیل که ناحیهی داخلی دارند، شامل این گزینه هستند و رنگ داخل این ناحیه را مشخص میکنند. |
FillOpacity | میزان شفافیت خصوصیت بالا را از 0 تا 1 مشخص میکند. |
Points | با استفاده از این خاصیت میتوانید مختصات را با استفاده از کلاس Location به آن اضافه کنید. برای دایره خصوصیت Point وجود دارد. |
Radius | برای دایره کاربرد دارد. با مقدار نوع Int میتوانید شعاع آن را مقدار دهی کنید. |
public class MiladTower { public GoogleMapApi TestMarker() { var map=new GoogleMapApi(true); var location = new Location(35.7448416, 51.3753212); map.SetLocation(location); map.SetZoom(17); map.SetMapType(MapTypes.ROADMAP); map.SetBackgroundColor(Color.Aqua); map.ZoomControlVisibilty(true); map.ZoomOptions = new zoomControlOptions() { Position = Position.TOP_LEFT, ZoomStyle = ZoomStyle.SMALL }; Marker marker=new Marker("mymarker1"); marker.InfoWindow=new InfoWindow("iw1") { Content = "<b>Milad Tower</b><i>in Tehran</i><br/>Milad Tower is the highest tower in iran,many people and tourists visit it each year, but it's so expensive that i cant afford it as iranian citizen<br/>please see more info at <a href=\"https://en.wikipedia.org/wiki/Milad_Tower\"><img width='16px' height='16px' src='https://en.wikipedia.org/favicon.ico'/>wikipedia</a>" }; marker.MarkerPoint = location; map.Markers.Add(marker); var circle=new CircleMarker("mymarker2"); circle.FillColor = Color.Green; circle.FillOpacity = 0.6f; circle.StrokeColor = Color.Red; circle.StrokeOpacity = 0.8f; circle.Point = location; circle.Radius = 30; circle.Editable = true; circle.StrokeWeight = 3; map.Circles.Add(circle); Rectangle rect=new Rectangle("rect1"); rect.FillColor = Color.Black; rect.FillOpacity = 0.4f; rect.Points.Add(new Location(35.74728723483808, 51.37550354003906)); rect.Points.Add(new Location(35.74668641224311, 51.376715898513794)); map.Rectangles.Add(rect); Polyline polyline=new Polyline("poly1"); polyline.Points.Add(new Location(35.74457043569041, 51.373915672302246)); polyline.Points.Add(new Location(35.74470976097927, 51.37359380722046)); polyline.Points.Add(new Location(35.744378863020074, 51.37337923049927)); polyline.StrokeColor = Color.Blue; polyline.StrokeWeight = 2; map.Polylines.Add(polyline); Polygon polygon=new Polygon("poly2"); polygon.Points.Add(new Location(35.746494844665094, 51.374655961990356)); polygon.Points.Add(new Location(35.74635552250061, 51.37283205986023)); polygon.Points.Add(new Location(35.74598109297522, 51.372681856155396)); polygon.Points.Add(new Location(35.7454934611854, 51.37361526489258)); polygon.FillColor = Color.Black; polygon.FillOpacity = 0.5f; polygon.StrokeColor = Color.Gray; polygon.StrokeWeight = 1; map.Polygons.Add(polygon); return map; } }
@section javascript { @{ var map = new MiladTower().TestMarker(); @map.ShowMapForMvc("mapdiv") } } <br/><br/> <div id="mapdiv" style="width:600px;height:600px;"></div>
در نهایت نقشهی زیر نمایش داده میشود:
کم حجم کردن کدها
در صورتیکه به سورس صفحه نگاهی بیندازید، میبینید که کدهای جاوا اسکریپت، داخل صفحه نوشته شدهاند. اگر بخواهید برای کم حجمتر شدن کد، عملیات minify را انجام دهید، با true شدن خصوصیت minified با استفاده از کتابخانهی وابستهاش (MS Ajax Minifier) اینکار را انجام میدهد.
انتقال کدها به یک فایل خارجی
بسیاری از ما برای نوشتن کدهای جاوا اسکریپت، از یک فایل خارجی استفاده میکنیم. برای داشتن این قابلیت میتوانید به جای ShowMapForMVC متد CallJs را صدا بزنید تا کتابخانه api گوگل را صدا بزند و سپس در یک اکشن متد، متد GiveJustJS را صدا بزنید و طبق مقالهی موجود در سایت جاری محتوای آن را برگردانید و به عنوان یک فایل JS به این اکشن متد لینک بدهید. کدهای زیر به شما نحوهی این کار را نشان میدهند:
ابتدا در یک اکشن متد، کد زیر را وارد میکنیم:
public ActionResult MiladJs() { var output = new MiladTower().TestMarker().GiveJustJs("mapdiv"); Response.ContentType = "text/javascript"; return Content(output); }
بعد از آن در ویووی مربوطه کد زیر را داریم:
@section javascript { @{ var map = new MiladTower().TestMarker(); @map.CallJs() <script type="text/javascript" src="@Url.Action("MiladJs","Home")"></script> } } <br/><br/> <div id="mapdiv" style="width:600px;height:600px;"></div>
نحوهی کارکرد این کتابخانه
برای آشنایی با نحوهی کارکرد آن باید بدانید که اساس کار این کتابخانه string interpolation است. این کتابخانه کلاسی را به صورت Partial دارد که بین چندین فایل تقسیم شده است و هر یک از فایلها، با نام محتوای آن نامگذاری شدهاند. Public methods متدهای عمومی، private methods متدهای خصوصی، Constants یا ثابتها که حاوی تمام دستورات جاوا اسکریپتی هستند و در نهایت خود کلاس اصلی GoogleMapApi که حاوی کدهای اجرایی و تشکیل کد جاوا اسکریپت میباشد. در کنار کلاس اصلی، کلاسهای Overlay هم قرار دارند که شامل اطلاعات اشیاء روی نقشهها هستند؛ مثل مارکرها و چندضلعیها و ... و در نهایت یک سری کلاس و نوع شمارشی Enum شامل خصوصیتهایی که برای تنظیمات و پیکربندی نقشه به کار میروند.
کلاس GoogleMapApi برای ایجاد کدها، دادههایی را که برای هر کلاس در نظر گرفتهاید، با استفاده از interpolation و ثابتهای حاوی کد جاوا اسکریپت، در یک رشتهی جدید قرار میدهند و این رشتهها با اتصال درست در موقعیت خود، کد نهایی جاوا اسکریپت را تولید میکنند.
ابتدا یک سرویس به نام BaseService ایجاد کنید:
angular.module('myApp').service('BaseService', function() { var BaseService = function(title) { this.title = title; }; BaseService.prototype.getMessage = function() { var self = this; return 'Hello ' + self.title; }; return BaseService; });
حال اگر ماژول و کنترلری جهت نمایش خروجی به صورت زیر ایجاد کنیم:
var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope,BaseService) { var instance = new BaseService('Masoud'); $scope.title = instance.getMessage(); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp"> <head> <title></title> </head> <body ng-controller="myCtrl"> <div> {{title}} </div> </body> <script src="Scripts/jquery-2.1.1.min.js"></script> <script src="Scripts/angular.js"></script> <script src="App/app.js"></script> </html>
تا اینجای کار روال معمول تعاریف سرویس در انگولار بوده است. اما قصد داریم سرویس جدیدی را ایجاد نمایم تا خروجی سرویس قبلی را اندکی تغییر دهد. به جای اینکه سرویس قبلی را تغییر دهیم یا بدتر از آن سرویس جدیدی بسازیم و کدهای قبلی را در آن کپی کنیم کافیست به صورت زیر عمل نماییم:
app.service('ExtService', function(BaseService) { var ExtService = function() { BaseService.apply(this, arguments); }; ExtService.prototype = new BaseService(); ExtService.prototype.getMessage = function() { var self = this; return BaseService.prototype.getMessage.apply(this, arguments) + ' From Ext Service'; }; return ExtService; });
app.controller('myCtrl', function ($scope,BaseService , ExtService) { var baseInstance = new BaseService('Masoud'); var extInstance = new ExtService('Dotnettips'); $scope.title = baseInstance.getMessage() + ' and ' + extInstance.getMessage(); });
حذف یک ردیف از اطلاعات به همراه پویانمایی محو شدن اطلاعات آن توسط jQuery در ASP.NET MVC
مدل و منبع داده برنامه
namespace jQueryMvcSample06.Models { public class BlogPost { public int Id { set; get; } public string Title { set; get; } public string Body { set; get; } } }
using System.Collections.Generic; using jQueryMvcSample06.Models; namespace jQueryMvcSample06.DataSource { /// <summary> /// منبع داده فرضی جهت سهولت دموی برنامه /// </summary> public static class BlogPostDataSource { private static IList<BlogPost> _cachedItems; static BlogPostDataSource() { _cachedItems = createBlogPostsInMemoryDataSource(); } /// <summary> /// هدف صرفا تهیه یک منبع داده آزمایشی ساده تشکیل شده در حافظه است /// </summary> private static IList<BlogPost> createBlogPostsInMemoryDataSource() { var results = new List<BlogPost>(); for (int i = 1; i < 30; i++) { results.Add(new BlogPost { Id = i, Title = "عنوان " + i, Body = "متن ... متن ... متن " + i}); } return results; } public static IList<BlogPost> LatestBlogPosts { get { return _cachedItems; } } } }
کنترلر برنامه
using System.Web.Mvc; using System.Web.UI; using jQueryMvcSample06.DataSource; using jQueryMvcSample06.Security; namespace jQueryMvcSample06.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index() { var postsList = BlogPostDataSource.LatestBlogPosts; return View(postsList); } [AjaxOnly] [HttpPost] [OutputCache(Location = OutputCacheLocation.None, NoStore = true)] public ActionResult DeleteRow(int? postId) { if (postId == null) return Content(null); //todo: delete post from db return Content("ok"); } } }
data: JSON.stringify({ postId: postId }),
View برنامه
@model IEnumerable<jQueryMvcSample06.Models.BlogPost> @{ ViewBag.Title = "Index"; var postUrl = Url.Action(actionName: "DeleteRow", controllerName: "Home"); } <h2> حذف یک ردیف از اطلاعات به همراه پویانمایی محو شدن اطلاعات آن</h2> <table> <tr> <th> عملیات </th> <th> عنوان </th> </tr> @foreach (var item in Model) { <tr> <td> <span id="row-@item.Id">حذف</span> </td> <td> @item.Title </td> </tr> } </table> @section JavaScript { <script type="text/javascript"> $(function () { $('span[id^="row"]').click(function () { var span = $(this); var postId = span.attr('id').replace('row-', ''); var tableRow = span.parent().parent(); $.ajax({ type: "POST", url: '@postUrl', data: JSON.stringify({ postId: postId }), contentType: "application/json; charset=utf-8", dataType: "json", complete: function (xhr, status) { var data = xhr.responseText; if (xhr.status == 403) { window.location = "/login"; } else if (status === 'error' || !data || data == "nok") { alert('خطایی رخ داده است'); } else { $(tableRow).fadeTo(600, 0, function () { $(tableRow).remove(); }); } } }); }); }); </script> }
در کدهای اسکریپتی صفحه، ابتدا کلیک بر روی کلیه spanهایی که id آنها با row شروع میشود را مونیتور خواهیم کرد:
$('span[id^="row"]').click(function () {
var span = $(this); var postId = span.attr('id').replace('row-', ''); var tableRow = span.parent().parent();
دریافت کدها و پروژه کامل این قسمت
jQueryMvcSample06.zip