نظرات اشتراکها
با اینکه نوع متدهایی که اطلاعات رو از سرور درخواست میکنه به صورت post تنظیم شده
<script type="text/javascript"> $(function() { $('#jqgStarWarsCharacters').jqGrid({ url: '@Url.Action("Characters", "StarWars")', datatype: 'json', mtype: 'POST', cmTemplate: { align: 'center' }, colNames: [ 'Name', 'Gender', 'Height', 'Weight', 'Birth Year', 'Skin Color', 'Hair Color', 'Eye Color' ], colModel: [ { name: 'Name' }, { name: 'Gender', sortable: false, formatter: demo.jqGrid.character.genderFormatter }, { name: 'Height', summaryType: 'avg' }, { name: 'Weight', summaryType: 'avg' }, { name: 'BirthYear' }, { name: 'SkinColor', sortable: false, formatter: demo.jqGrid.character.skinColorFormatter }, { name: 'HairColor', sortable: false, formatter: demo.jqGrid.character.hairColorFormatter }, { name: 'EyeColor', sortable: false, formatter: demo.jqGrid.character.eyeColorFormatter } ], caption: 'StarWars Characters', grouping: true, groupingView: { groupField: ['Gender'], groupDataSorted: true, groupColumnShow: [false], groupSummary: [true] }, footerrow: true, userDataOnFooter: true, jsonReader: { repeatitems: false, id: 'Id' }, pager: $('#jqgpStarWarsCharacters'), rowNum: 100, sortname: 'Id', sortorder: 'asc', viewrecords: true, height: '100%' }); }); </script>
کد نوشته شده در بالا در asp.net Core 2.2 درست کار میکرد ولی الان در asp.net core 3.0 بخش network این نمایش زیر رو داره
در این پروژه ارتقا از ASP . NET Core 2.2 به Core 3.0 کلا برای اینکه متدهای Ajax قبلی کار کنه تنظیمات خاص دیگری هم لازمه؟
توی startup پروژه هم با ارتقا به Core 3.0 متدها به صورت زیر نوشته شده که متد UseMVC قبلی رو حذف کردم
public void ConfigureServices(IServiceCollection services) { services.AddControllersWithViews(); services.AddRazorPages(); services.AddControllers() .AddNewtonsoftJson(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseHttpsRedirection(); app.UseStaticFiles();
JqGridRequest.ParametersNames = new JqGridParametersNames() { PagesCount = "npage" }; app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapDefaultControllerRoute(); endpoints.MapControllerRoute( name: "default", pattern: "{controller=JavaScript}/{action=Basics}"); endpoints.MapControllerRoute( name: "default2", pattern: "{controller=StarWars}/{action=Characters}/{id?}"); endpoints.MapRazorPages(); }); }
چقدر طول میکشه که با syntax این کتابخانه آشنا شویم.
آیا همکاری با ماکروسافت و تلفیق با asp.net سینتکس آن با asp.net و MSAjax شبیه تر می شود؟(jquery فقط یک نوع syntax و روش برنامه نویسی دارد؟-چون آخه این syntax خیلی راحت بود،ولی نفهمیدم دلیل = در برنامه هاتون چی هست،مگه می خواییم مقداری را چاپ کنیم).
آیا همکاری با ماکروسافت و تلفیق با asp.net سینتکس آن با asp.net و MSAjax شبیه تر می شود؟(jquery فقط یک نوع syntax و روش برنامه نویسی دارد؟-چون آخه این syntax خیلی راحت بود،ولی نفهمیدم دلیل = در برنامه هاتون چی هست،مگه می خواییم مقداری را چاپ کنیم).
اگر مطلب «استفاده از Twitter Bootstrap در کارهای روزمره طراحی وب» را مطالعه کرده باشید، قسمتی از آن، به فرمها و همچنین جلب توجه کاربران به فیلدها، برای نمایش خطاهای اعتبارسنجی اختصاص داشت. در مطلب جاری قصد داریم تا این موارد را به یک فرم ASP.NET MVC که به صورت پیش فرض از jQuery Validator برای اعتبارسنجی استفاده میکند، اعمال کنیم تا حالت نمایشی پیش فرض این فرمها و همچنین خطاهای اعتبارسنجی آن، با Twitter Bootstrap همخوانی پیدا کند.
مدل برنامه
در اینجا یک مدل ساده را به همراه دو خاصیت و اعتبارسنجیهای ساده مرتبط با آنها، مشاهده میکنید.
کنترلر برنامه
کنترلر برنامه نیز نکته مهمی نداشته و بیشتر برای نمایش خطاهای اعتبارسنجی سفارشی این مثال طراحی شده است.
طراحی View سازگار با Twitter bootstrap
در اینجا View متناظر با اکشن متد Index را ملاحظه میکنید که نکات ذیل به آن اعمال شده است:
1) کلاس form-horizontal به فرم جاری اضافه شده است تا در ادامه بتوانیم برچسبها را در کنار تکست باکسها به صورت افقی نمایش دهیم.
2) به ValidationSummary کلاسهای alert alert-error alert-block انتساب داده شدهاند تا نمایش خطای کلی یک فرم، متناسب با Twitter bootstrap شود.
3) هر خاصیت، با یک div دارای کلاس control-group محصور شده است.
4) هر برچسب دارای کلاس control-label است.
5) به هر ValidationMessageFor کلاس help-inline انتساب داده شده است.
6) کنترلهای ورودی برنامه در divایی با کلاس controls محصور شدهاند.
7) قسمت دکمه فرم، در div ایی با کلاس form-actions قرار گرفته تا یک زمینه خاکستری در اینجا ظاهر شود.
8) دکمه فرم، با کلاس btn خاص bootstrap تزئین شده.
در این حالت به شکل فوق خواهیم رسید. همانطور که ملاحظه میکنید در صورتیکه بر روی دکمه ارسال کلیک شود، همان رنگهای متداول jQuery Validator ظاهر میشوند و کل ردیف همانند روشهای متداول Twitter bootstrap دارای رنگ قرمز انتساب یافته توسط کلاس error نخواهد شد.
برای رفع این مشکل باید اندکی اسکریپت نویسی کرد:
کاری که در اینجا انجام شده، تغییر پیش فرضهای jQuery Validator جهت سازگار سازی آن با کلاس error مرتبط با bootstrap است. همچنین در حالت postback و نمایش خطاهای سفارشی، قسمت بررسی field-validation-error انجام شده و در صورت یافتن موردی، سطر مرتبط با آن، با کلاس error مزین میشود.
اینبار در حالت اعتبار سنجی، به شکل ذیل خواهیم رسید:
و یا اگر کاربر فیلد را تکمیل کند، رنگ فیلد و ردیف تعیین اعتبار شده، سبز میشود:
و در حالت خطاهای سفارشی سمت سرور، پس از postback، شکل زیر نمایش داده میشود:
مدل برنامه
using System.ComponentModel; using System.ComponentModel.DataAnnotations; namespace Mvc4TwitterBootStrapTest.Models { public class User { [DisplayName("نام")] [Required(ErrorMessage="لطفا نام را تکمیل کنید")] public string Name { set; get; } [DisplayName("نام خانوادگی")] [Required(ErrorMessage = "لطفا نام خانوادگی را تکمیل کنید")] public string LastName { set; get; } } }
کنترلر برنامه
using System.Web.Mvc; using Mvc4TwitterBootStrapTest.Models; namespace Mvc4TwitterBootStrapTest.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(User user) { if (this.ModelState.IsValid) { if (user.Name != "Vahid") { this.ModelState.AddModelError("", "لطفا مشکلات را برطرف کنید!"); this.ModelState.AddModelError("Name", "نام فقط باید وحید باشد!"); return View(user); } // todo: save ... return RedirectToAction("Index"); } return View(user); } } }
طراحی View سازگار با Twitter bootstrap
@model Mvc4TwitterBootStrapTest.Models.User @{ ViewBag.Title = "تعریف کاربر"; } @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form-horizontal" })) { @Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" }) <fieldset> <legend>تعریف کاربر</legend> <div class="control-group"> @Html.LabelFor(x => x.Name, new { @class = "control-label" }) <div class="controls"> @Html.TextBoxFor(x => x.Name) @Html.ValidationMessageFor(x => x.Name, null, new { @class = "help-inline" }) </div> </div> <div class="control-group"> @Html.LabelFor(x => x.LastName, new { @class = "control-label" }) <div class="controls"> @Html.TextBoxFor(x => x.LastName) @Html.ValidationMessageFor(x => x.LastName, null, new { @class = "help-inline" }) </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary"> ارسال</button> </div> </fieldset> }
1) کلاس form-horizontal به فرم جاری اضافه شده است تا در ادامه بتوانیم برچسبها را در کنار تکست باکسها به صورت افقی نمایش دهیم.
2) به ValidationSummary کلاسهای alert alert-error alert-block انتساب داده شدهاند تا نمایش خطای کلی یک فرم، متناسب با Twitter bootstrap شود.
3) هر خاصیت، با یک div دارای کلاس control-group محصور شده است.
4) هر برچسب دارای کلاس control-label است.
5) به هر ValidationMessageFor کلاس help-inline انتساب داده شده است.
6) کنترلهای ورودی برنامه در divایی با کلاس controls محصور شدهاند.
7) قسمت دکمه فرم، در div ایی با کلاس form-actions قرار گرفته تا یک زمینه خاکستری در اینجا ظاهر شود.
8) دکمه فرم، با کلاس btn خاص bootstrap تزئین شده.
در این حالت به شکل فوق خواهیم رسید. همانطور که ملاحظه میکنید در صورتیکه بر روی دکمه ارسال کلیک شود، همان رنگهای متداول jQuery Validator ظاهر میشوند و کل ردیف همانند روشهای متداول Twitter bootstrap دارای رنگ قرمز انتساب یافته توسط کلاس error نخواهد شد.
برای رفع این مشکل باید اندکی اسکریپت نویسی کرد:
@section javaScript { <script type="text/javascript"> $.validator.setDefaults({ highlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).addClass(errorClass).removeClass(validClass); } else { $(element).addClass(errorClass).removeClass(validClass); $(element).closest('.control-group').removeClass('success').addClass('error'); } $(element).trigger('highlated'); }, unhighlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).removeClass(errorClass).addClass(validClass); } else { $(element).removeClass(errorClass).addClass(validClass); $(element).closest('.control-group').removeClass('error').addClass('success'); } $(element).trigger('unhighlated'); } }); $(function () { $('form').each(function () { $(this).find('div.control-group').each(function () { if ($(this).find('span.field-validation-error').length > 0) { $(this).addClass('error'); } }); }); }); </script> }
اینبار در حالت اعتبار سنجی، به شکل ذیل خواهیم رسید:
و یا اگر کاربر فیلد را تکمیل کند، رنگ فیلد و ردیف تعیین اعتبار شده، سبز میشود:
و در حالت خطاهای سفارشی سمت سرور، پس از postback، شکل زیر نمایش داده میشود:
jQuery نسخهی 1.9 و 2.0 بتا منتشر شدند. در این نسخه ها، تغییرات گسترده ای رخ داده که اگر به اونها دقت نشه، کدهای زیادی رو از کار میندازن. jQuery 1.9 همچنان بر روی IE 6,7,8 اجرا میشه اما در jQuery 2.0، این پشتیبانی حذف شده.
تیم توسعهی jQuery، امروز همزمان با ارائهی نسخههای 1.9 و 2.0 بتا، پلاگینی با نام jQuery Migrate رو هم منتشر کرد که حاوی متدهای حذف شده در نسخههای 1.9 و 2.0 هست تا مهاجرت به نسخههای جدید، باعث از کار افتادن کدهای قدیمی نشه و پس از مهاجرت کامل کدها، میتونید jQuery Migrate رو حذف کنید. کار خوبی که انجام شده این هست که jQuery Migrate از طریق Console بهتون اطلاع میده که در کدها از فلان متد منسوخ یا حذف شده استفاده شده.
چند نکته در اینجا حائز اهمیت هستند:
- متد jQuery live منسوخ و حذف شده معادل هست با اتصال تمام رخدادها در سطح document یا همان (document).on('event', 'selector', function) (+).
- مشکلات متد live و خصوصا بحث انتشار رخدادها و بررسی هر بارهی انواع و اقسام آنها و در نتیجه کند شدن صفحه، مهمتر هستند تا میزان مصرف حافظه (+).
- متد jQuery live منسوخ و حذف شده معادل هست با اتصال تمام رخدادها در سطح document یا همان (document).on('event', 'selector', function) (+).
- مشکلات متد live و خصوصا بحث انتشار رخدادها و بررسی هر بارهی انواع و اقسام آنها و در نتیجه کند شدن صفحه، مهمتر هستند تا میزان مصرف حافظه (+).