@model MvcApplication1.Models.Com <script> var onSuccess = function (result) { $.validator.unobtrusive.parse("#result"); }; </script> <div id="result" > @using (Ajax.BeginForm( "SendCommentAction", "Home", null, new AjaxOptions { OnSuccess = "onSuccess", UpdateTargetId = "result" }, null) ) { @Html.TextBoxFor(x=>x.Contect) <br/> @Html.ValidationMessageFor(x=>x.Contect) <br/> @Html.ValidationSummary() <input type="submit" value="Save" /> } </div>
آموزش (jQuery) جی کوئری 5#
قسمت اسکریپتی رو اینطوری تغییر بدین
<script type="text/javascript"> $(document).ready(function () { slideShow(); }); var leftPos = 0; var numberOfImages = 5; var sliderWidth = 500; var ltr = true; function slideShow() { $("div.slider-item").animate({ left: leftPos + "px" }, 1500); if(ltr){ leftPos -= sliderWidth; } else{ leftPos += sliderWidth; } if((Math.abs(leftPos) == (numberOfImages-1) * sliderWidth) || (leftPos == 0)){ ltr = !ltr; } //console.log({ leftPos:leftPos , ltr: ltr }); s = setTimeout("slideShow()", 3000); } </script>
<!DOCTYPE html> <html> <head> <script src="./jquery.min.js"></script> <meta charset="utf-8"> <title></title> <script> $(document).ready(()=> { alert("Welcome"); }); </script> </head> <body> </body> </html>
win.openDevTools();
module و module.exports
در اکثر کتابخانههای جاوااسکریپتی شما با عبارت require زیاد مواجه شدهاید و این امکان از طریق شیءایی به نام module.exports امکان پذیر شده است. شما با کدی مشابه زیر:
exports.sayHelloInEnglish=()=> { console.log("hello"); } exports.sayHelloInPersian=()=> { console.log('salam'); }
const test=require("./test.js"); test.sayHelloInPersian(); test.sayHelloInEnglish();
if ( typeof module === "object" && typeof module.exports === "object" ) { // set jQuery in `module` } else { // set jQuery in `window` }
کد بالا بررسی میکند که آیا module.export وجود دارد یا خیر. اگر وجود داشته باشد، در اختیار آن قرار میگیرد و اگر نداشته باشد در اختیار شیء window قرار میگیرد. پس کاری که جی کوئری اینجا انجام میدهد این است که توابع آن در اختیار شیء window نیست و در اختیار exports است. به همین علت ما باید شیء جی کوئری را از طریق آن دریافت کنیم. پس کد زیر را قبل از کدهای جی کوئری مینویسیم:
<script src="./jquery.min.js"></script> <script> window.$=window.jQuery=module.exports; </script>
window.$ = window.jQuery = require('./jquery.min.js');
در این آموزش قصد دارم نحوه ایجاد یک Slideshow به صورت داینامیک را با ASP.NET طراحی کنم(منظور از ایجاد Slideshow به صورت داینامیک این است که عکسها را به صورت داینامیک از DB بخواند).
اولین گام این است که Plugin مورد نظر را دریافت کنید که من از پلاگین Orbit استفاده کرده ام
ابتدا یک DataBase با نام DynamicSlideShow ایجاد و یک جدول با ساختار زیر با نام Picturesدرون آن ایجاد میکنیم
گام بعدی ایجاد یک پروژه Asp.Net با زبان C# و اضافه کردن فایلهای پلاگین به پروژه و ایجاد یک Handler برای بازیابی دادهها از DB است. ساختار Solutionما باید به صورت زیر باشد
برای اینکه بتوانیم با DB ارتباط برقرار کنیم از EF استفاده میکنیم به همین منظور ابتدا یک Model به نام DynamicSlideShowModel ایجاد میکنیم
در گام بعد بر روی GenerateFromDatabase انتخاب کرده و بر روی دکمه Next کلیک میکنیم و در مراحل بعد ابتدا DB مربوط به مثال (DynamicSlideShow) و جدول آن را انتخاب میکنیم . حال یک Model به درون پوشه App_Code اضافه شده استدر ادامه برای واکشی رکوردهای موجود در جدول Pictures کدهای زیر را درون Handler مینویسیم
var ctx = new DynamicSlideShowEntities(); var list = ctx.Pictures.ToList(); string str = JsonConvert.SerializeObject(list); context.Response.Write(str);
در این کدها تنها نکتهای که احتیاج به توضیح دارد این است که ابتدا یک لیست از
رکوردها را از جدول Pictures
واکشی میکنیم و برای پاس دادن به کلاینت ما آنها را به فرمت Json تبدیل کرده ایم که برای تبدبل از
کنابخانه آماده Newtonsoft.Json.dll
استفاده کرده ایم
حال باید با استفاده از jQuery کدهای درون Handler را اجرا کنیم؛ برای همین منظور یک صفحه با نام default.aspx ایجاد کرده و کدهای زیر را درون آن مینویسیم
<head runat="server"> <title>Dynamic SlideShow</title> <link href="CSS/orbit-1.2.3.css" rel="stylesheet" type="text/css" /> <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="Script/jquery.orbit-1.2.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.ajax({ url: "Handler.ashx", contentType: "application/json; charset=utf-8", success: function (data) { $.each(data, function (i, b) { var str = '<img src="' + b.PicturePath + '" alt="' + b.PictureText + '"/>'; $("#featured").append(str); }); $('#featured').orbit(); }, dataType: "json" }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="featured"> </div> </form> </body>
در اینجا ابتدا با استفاده از متد ajax کتابخانه jQuery کدهای درون Handler را اجرا کرده و به ازای هر المان موجود در جدول یک تگ img به صفحه اضافه میکنیم.
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")"rel="stylesheet" type="text/css" /> <link href="@System.Web.Optimization.BundleTable. Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" /> <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<link href="/Content/css?v=ji3nO1pdg6VLv3CVUWntxgZNf1z" rel="stylesheet" type="text/css" /> <link href="/Content/themes/base/css?v=UM624qf1uFt8dYti" rel="stylesheet" type="text/css" /> <script src="/Scripts/js?v=4h5lPNUsLiFoa0vqrItjS2Jp"></script>
BundleTable.Bundles.RegisterTemplateBundles();
public static void EnableBootstrapBundle(this BundleCollection bundles) { var bootstrapCss = new Bundle("~/bootstrap/css", new CssMinify()); bootstrapCss.AddFile("~/css/bootstrap.css"); bootstrapCss.AddFile("~/css/bootstrap-responsive.css"); bootstrapCss.AddFile("~/css/application.css"); bootstrapCss.AddFile("~/css/prettify.css"); bundles.Add(bootstrapCss); var bootstrapJs = new Bundle("~/bootstrap/js", new JsMinify()); bootstrapJs.AddFile("~/js/jquery-1.7.1.js"); bootstrapJs.AddFile("~/js/bootstrap.js"); bootstrapJs.AddFile("~/js/prettify.js"); bundles.Add(bootstrapJs); }
BundleTable.Bundles.EnableBootstrapBundle();
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bootstrap/css")" rel="stylesheet"> <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bootstrap/js")"></script>
<link href="/bootstrap/css?v=uBlJsuIAGAF93nUTTez8" rel="stylesheet"> <script src="/bootstrap/js?v=O6HaHC8QqtB"></script>
حذف تمامی تگهای یک عبارت HTML
این تابع و عبارت باقاعده به کار رفته در آن هنگام جستجو بر روی یک فایل html که حاوی انبوهی از تگها است میتواند مفید باشد و یا جهت حذف هر نوع فرمت اعمالی به یک متن.
private static readonly Regex _htmlRegex = new Regex("<.*?>", RegexOptions.Compiled);
/// <summary>
/// حذف تمامی تگهای موجود
/// </summary>
/// <param name="html">ورودی اچ تی ام ال</param>
/// <returns></returns>
public static string CleanTags(string html)
{
return _htmlRegex.Replace(html, string.Empty);
}
حذف یک تگ ویژه بدون حذف محتویات آن
فرض کنید میخواهید تمام تگهای script بکار رفته در یک محتوای html را حذف کنید.
private static readonly Regex _contentRegex = new Regex(@"<\/?script[^>]*?>", RegexOptions.Compiled | RegexOptions.IgnoreCase);
/// <summary>
/// تنها حذف یک تگ ویژه
/// </summary>
/// <param name="html">ورودی اچ تی ام ال</param>
/// <returns></returns>
public static string CleanScriptTags(string html)
{
return _contentRegex.Replace(html, string.Empty);
}
حذف یک تگ خاص به همراه محتویات آن تگ
فرض کنید میخواهیم در محتوای html دریافتی اثری از تگها و کدهای جاوا اسکریپتی یافت نشود.
private static readonly Regex _safeStrRegex = new Regex(@"<script[^>]*?>[\s\S]*?<\/script>",
RegexOptions.Compiled | RegexOptions.IgnoreCase);
/// <summary>
/// حذف یک تگ ویژه به همراه محتویات آن
/// </summary>
/// <param name="html">ورودی اچ تی ام ال</param>
/// <returns></returns>
public static string CleanScriptsTagsAndContents(string html)
{
return _safeStrRegex.Replace(html, "");
}
و اگر فرض کنیم که متدهای فوق در کلاسی به نام CRegExHelper قرار گرفتهاند، کلاس آزمون واحد آن به صورت زیر میتواند باشد:
using NUnit.Framework;
namespace testWinForms87
{
[TestFixture]
public class CTestRegExHelper
{
#region Methods (3)
// Public Methods (3)
[Test]
public void TestCleanScriptsTagsAndContents()
{
Assert.AreEqual(
CRegExHelper.CleanScriptsTagsAndContents("data1 <script> ... </script> data2"),
"data1 data2");
}
[Test]
public void TestCleanScriptTags()
{
Assert.AreEqual(
CRegExHelper.CleanScriptTags("<b>data1</b> <script> ... </script> data2"),
"<b>data1</b> ... data2");
}
[Test]
public void TestCleanTags()
{
Assert.AreEqual(
CRegExHelper.CleanTags("<b>data</b>"),
"data");
}
#endregion Methods
}
}
نمایش گزارش در پنجره جدید
<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>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
عدم سازگاری پیش فرض jquery.validate با بعضی از ویجتهای Kendo UI
در حالت استفاده از Kendo UI، این سیستم هنوز هم کار میکند؛ اما با یک مشکل. اگر برای مثال از kendoComboBox استفاده کنید، اعتبارسنجیهای تعریف شده در برنامه، توسط jquery.validate دیده نخواهند شد. برای مثال فرض کنید یک چنین مدلی در اختیار View برنامه قرار گرفته است:
public class OrderDetailViewModel { [StringLength(15)] [Required] public string Destination { get; set; } }
@model Mvc4TestViewModel.Models.OrderDetailViewModel @using (Ajax.BeginForm(actionName: "Index", controllerName: "Home", ajaxOptions:new AjaxOptions(), htmlAttributes: new { id = "Form1", name ="Form1" }, routeValues: new { } )) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>OrderDetail</legend> <div class="editor-label"> @Html.LabelFor(model => model.Destination) </div> <div class="editor-field"> @Html.TextBoxFor(model => model.Destination, new { @class = "k-textbox" }) @Html.ValidationMessageFor(model => model.Destination) </div> <p> <button class="k-button" type="submit" title="Sumbit"> Sumbit </button> </p> </fieldset> } @section JavaScript { <script type="text/javascript"> $(function () { $("#Destination").kendoComboBox({ dataSource: [ "loc 1", "loc 2" ] }); </script> }
همانطور که در تصویر مشاهده میکنید، با اتصال kendoComboBox به یک فیلد، این فیلد در حالت مخفی قرار میگیرد و ویجت کندو یو آی بجای آن نمایش داده خواهد شد. در این حالت چون در فایل jquery.validate.js چنین تنظیمی وجود دارد:
$.extend( $.validator, { defaults: { //… ignore: ":hidden",
راه حل آن نیز سادهاست. تنها باید خاصیت ignore را بازنویسی کرد و تغییر داد:
<script type="text/javascript"> $(function () { var form = $('#Form1'); form.data('validator').settings.ignore = ''; // default is ":hidden". }); </script>
<script type="text/javascript"> $.validator.setDefaults({ ignore: "" }); </script>
یکپارچه کردن سیستم اعتبارسنجی Kendo UI با سیستم اعتبارسنجی ASP.NET MVC
در مطلب «اعتبار سنجی ورودیهای کاربر در Kendo UI» با زیرساخت اعتبارسنجی Kendo UI آشنا شدید. برای اینکه بتوان این سیستم را با ASP.NET MVC یکپارچه کرد، نیاز است دو کار صورت گیرد:
الف) تعریف فایل kendo.aspnetmvc.js به صفحه اضافه شود:
<script src="~/Scripts/kendo.aspnetmvc.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $("form").kendoValidator(); }); </script>
فایل kendo.aspnetmvc.js که در بستهی مخصوص Kendo UI تهیه شده برای ASP.NET MVC موجود است (در پوشهی js آن)، عملکردی مشابه فایل jquery.validate.unobtrusive مایکروسافت دارد. کار آن وفق دادن و ترجمهی اعتبارسنجی unobtrusive به روش Kendo UI است.
این فایل را از اینجا میتوانید دریافت کنید:
kendo.mvc.zip
البته باید دقت داشت که در حال حاضر فقط ویژگیهای ذیل از ASP.NET MVC توسط kendo.aspnetmvc.js پشتیبانی میشوند:
Required StringLength Range RegularExpression
/** * Template Name: NiceAdmin - v2.1.0 * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ */ (function() { "use strict"; /** * Easy selector helper function */ const select = (el, all = false) => { el = el.trim() if (all) { return [...document.querySelectorAll(el)] } else { return document.querySelector(el) } } /** * Easy event listener function */ const on = (type, el, listener, all = false) => { if (all) { select(el, all).forEach(e => e.addEventListener(type, listener)) } else { select(el, all).addEventListener(type, listener) } } /** * Easy on scroll event listener */ const onscroll = (el, listener) => { el.addEventListener('scroll', listener) } /** * Sidebar toggle */ if (select('.toggle-sidebar-btn')) { on('click', '.toggle-sidebar-btn', function(e) { select('body').classList.toggle('toggle-sidebar') }) } /** * Search bar toggle */ if (select('.search-bar-toggle')) { on('click', '.search-bar-toggle', function(e) { select('.search-bar').classList.toggle('search-bar-show') }) } . . . })();
<!DOCTYPE html> <html dir="rtl"> . . . <body> <div id="app">Loading...</div> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="">Reload</a> <a>🗙</a> </div> <script src="_framework/blazor.webassembly.js"></script> <!-- Vendor JS Files --> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script> <script src="assets/vendor/php-email-form/validate.js"></script> <script src="assets/vendor/quill/quill.min.js"></script> <script src="assets/vendor/tinymce/tinymce.min.js"></script> <script src="assets/vendor/simple-datatables/simple-datatables.js"></script> <script src="assets/vendor/chart.js/chart.min.js"></script> <script src="assets/vendor/apexcharts/apexcharts.min.js"></script> <script src="assets/vendor/echarts/echarts.min.js"></script> <!-- Template Main JS File --> <script src="assets/js/main.js"></script> </body> </html>
/** * Template Name: NiceAdmin - v2.1.0 * Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/ * Author: BootstrapMade.com * License: https://bootstrapmade.com/license/ */ function initilizeNiceAdminJs() { "use strict"; /** * Easy selector helper function */ const select = (el, all = false) => { el = el.trim() if (all) { return [...document.querySelectorAll(el)] } else { return document.querySelector(el) } } /** * Easy event listener function */ const on = (type, el, listener, all = false) => { if (all) { select(el, all).forEach(e => e.addEventListener(type, listener)) } else { select(el, all).addEventListener(type, listener) } } /** * Easy on scroll event listener */ const onscroll = (el, listener) => { el.addEventListener('scroll', listener) } /** * Sidebar toggle */ if (select('.toggle-sidebar-btn')) { on('click', '.toggle-sidebar-btn', function(e) { select('body').classList.toggle('toggle-sidebar') }) } /** * Search bar toggle */ if (select('.search-bar-toggle')) { on('click', '.search-bar-toggle', function(e) { select('.search-bar').classList.toggle('search-bar-show') }) } . . . }
@page "/" @inject IJSRuntime JSRuntime <div> this is index page </div> @code { protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await JSRuntime.InvokeVoidAsync("initilizeNiceAdminJs");// Initialize main.js after site completely loaded } } }
- آشنایی کامل با جاوااسکریپت
- آشنایی با Object-oriented در جاوااسکریپت
اولین قدم برای استفاده از Vue.js، نصب آن میباشد که مرحله به مرحله توضیح خواهم داد. جهت نصب، سایت Vue.js به ما چندین راه پیشنهاد میدهد که ما آنها را در ذیل بررسی میکنیم:
https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
$ npm install vue
3- CLI
$ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
<html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script> </body> </html>