.NET Tips | جستجوها: نتایج مشابه «CORS چیست؟»، صفحه: ۶۴

مطالب

Vue.js - بحث Computed Properties و خروجی بلادرنگ - قسمت سوم

با استفاده از Computed Properties ها می‌توانید برای هر خاصیت، یک شرط بنویسید و آنرا مقداردهی کنید. در این بحث بسیار مهم نیز قادر خواهید بود تا به صورت بلادرنگ (Real Time) خروجی بگیرید. در واقع به محض ارسال اطلاعات، خروجی مورد نظر برای شما نمایش داده می‌شود.

ابتدا لازم است تا یک ویو را ایجاد کنید. یک new vue جدید ساخته و مشخصه‌های لازم را وارد کنید؛ مطابق کد زیر

    <html> <body>

    <div id="dotnet"> 
       <h2>New Sample: {{ a }}</h2> 
       <input type="text" v-model="a"> 
    </div> 
  
       <script src="https://unpkg.com/vue@2.2.6">
       </script>

       <script type="text/javascript">
        new Vue({ 
        el: '#dotnet', 
        data:{ 
            a:'' 
        }, 
        computed: { 
            a:{ 
                get: function () { 
                    return this.a + ''; 
                } 
            } 
        } 
    });
        </script>

        </body>
</html>

در کد بالا ویوی جدیدی ساخته شده و مقدار data نیز مشخص شده‌است. مقدار data برابر a می‌باشد.

data:{ 
            a:'' 
        },

دقت نمائید هدف این است وقتی مقداری درون یک input وارد می‌شود، بلافاصله نمایش داده شود که این کار با استفاده از خاصیت v-model به صورت بلادرنگ امکان‌پذیر است.

در کد زیر مقدار a درون data باید به v-model نسبت داده شود تا درون input اطلاعات نمایش داده شوند.

<input type="text" v-model="a">

حال، یک property به نام computed ایجاد کرده و مقدار a را توسط یک تابع برگشت می‌دهیم.

  computed: { 
            a:{ 
                get: function () { 
                    return this.a + ''; 
                } 
            } 
        }

دقت کنید function بالا به دلخواه نوشته شده‌است و شما قادرید هرکدی را که لازم است، جای آن بنویسید. اما بدنه کلی ساختار یک computed باید به همین شکل حفظ شود.

پس از اجرای کد درون مرورگر هر نوع مقداری که درون input وارد شود، توسط خاصیت v-model بلافاصله نمایش داده می‌شود.

‫۷ سال و ۶ ماه قبل، چهارشنبه ۱۶ فروردین ۱۳۹۶، ساعت ۰۰:۰۰

امین دانش

مطالب

Vue.js - نحوه‌ی استفاده از list item ها و تخصیص item - قسمت چهارم

در این قسمت به بحث item list‌‌ها پرداخته می‌شود. روند کلی بدین صورت است که ابتدا یک آرایه را ایجاد کرده (با مقادیر مشخص) و سپس درون تگ مورد نظری از صفحه، آرایه را فراخوانی می‌کنیم.

برای این منظور ابتدا یک vue جدید را ساخته و سپس آرایه مورد نظر را تعریف کرده و آیتم‌های آرایه را مشخص می‌کنیم. به صورت زیر:

     var dotnettips = new Vue({
         el: '#dotnettips',
         data: {
            items: [
                  { message: 'one' },
                  { message: 'two' }
    ]
  }
});

در کد بالا یک ویژگی با نام dotnettips تعریف شده و مقادیری به آن اختصاص داده شده است.

حال زمان آن فرارسیده است تا بدنه اصلی ساختار صفحه را بنویسیم.

<html>
    <body>
    <ul id="dotnettips">
       <li v-for="item in items">
           {{ item.message }}
       </li>
    </ul>
  
    <script src="https://unpkg.com/vue@2.2.6">
    </script>

    <script type="text/javascript">
         var dotnettips = new Vue({
         el: '#dotnettips',
         data: {
            items: [
                  { message: 'one' },
                  { message: 'two' }
            ]
          }
        });
        </script>      
        </body>
</html>

برای نمایش خروجی کار به صورت دلخواه، ابتدا یک تگ ul و درون آن تگ li را ایجاد کردیم و سپس با استفاده از دستور v-for، اقدام به فراخوانی list item مورد نظر کردیم و سپس ویژگی مورد نظر را که همان item.message می‌باشد، درون علامت {{ }} قرار دادیم، تا خروجی نهایی به نمایش درآید.

.حال با اجرای کد فوق تمامی آیتم‌های مورد نظر روی صفحه به نمایش در می‌آیند

.دقت نمائید که کدهای فوق و بدنه اسکریپت به دلخواه نوشته شده‌است و شما طبق نیاز خود می‌توانید آن‌ها را تغییر دهید

‫۷ سال و ۶ ماه قبل، شنبه ۱۹ فروردین ۱۳۹۶، ساعت ۱۹:۳۵

وحید نصیری

مطالب

رفع تداخل jQuery با کتابخانه‌های مشابه

قبل از شروع، یک خبر!
VsDoc for jQuery 1.3.1 (جهت فعال سازی intellisense آخرین نگارش جی کوئری در VS.Net)

اگر سعی کنید jQuery را به همراه سایر کتابخانه‌های جاوا اسکریپتی دیگر به صورت همزمان استفاده کنید (مثلا mootools یا ASP.Net Ajax و امثال آن)، احتمالا قسمتی و یا تمامی کدهای جاوا اسکریپتی شما کار نخواهند کرد. برای مثال update panel شما در ASP.Net Ajax از کار می‌افتد، یا کدهای mootools شما دیگر کار نمی‌کنند. علت اینجا است که تمامی این کتابخانه‌ها از نشانه $ به عنوان متغیری عمومی که بیانگر نام مستعار کتابخانه مربوطه است استفاده می‌کنند و در نهایت تمام این‌ها با هم تداخل خواهند کرد.

خوشبختانه jQuery امکان رفع این تداخل را پیش بینی کرده است که به صورت زیر می‌باشد:


<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript">
   jQuery.noConflict();
   jQuery(document).ready(function($) {
       //tip-1
       $("select > option").each(function() {
           var obj = $(this);
           obj.attr("title", obj.attr("value"));
       });
       //tip-1
   });
</script>

کد مثال فوق، به تمامی آیتم‌های drop down list‌ های شما در یک صفحه، بر اساس value هر آیتم موجود در آن‌ها، یک tooltip اضافه می‌کند. (با IE7 به بعد و فایرفاکس سازگار است)
در اینجا ابتدا jQuery.noConflict فراخوانی شده و سپس document ready متداول هم باید اندکی مطابق کد فوق تغییر کند. مابقی کدهای شما از این پس نیازی به تغییر نخواهند داشت. (روش‌های دیگری هم برای تغییر نام $ وجود دارند که در مستندات مربوطه قابل مشاهده است)

‫۱۵ سال و ۱۰ ماه قبل، یکشنبه ۲۰ بهمن ۱۳۸۷، ساعت ۱۴:۰۱

م شیخی

بازخوردهای دوره

نگاهی به SignalR Hubs

با سلام

من یک برنامه وب فرم دارم که کلاینت signalr من می‌باشد. این برنامه در شرایط معمولی به درستی کار می‌کند و ارتباط برقرار می‌شود.

ولی زمانی که در کامپیوتر از kerio control vpn client استفاده می‌کنم، و برنامه وب فرم را باز می‌کنم، برنامه در کنسول خطای زیر را نمایش می‌دهد:

Uncaught Error: SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. <script src='/signalr/js'></script>.
    at Object.start (jquery.signalR-2.4.0.min.js:9)
    at HTMLDocument.<anonymous> (Default.aspx:716)
.......


hubs:1 Failed to load resource: net::ERR_CONNECTION_TIMED_OUT

متوجه شدم که خطا در این خط ایجاد می‌شود:

 $.connection.hub.start().done(function ()

آیا می‌توانید در این مورد من رو راهنمایی کنید؟

‫۵ سال و ۴ ماه قبل، شنبه ۲۵ خرداد ۱۳۹۸، ساعت ۱۷:۰۵

پژمان پارسائی

نظرات اشتراک‌ها

DateTime Picker های شمسی

با تشکر بابت معرفی این Date Picker ها.
میخوام در mvc کنترل DatePicker آخری (AMIB) که معرفی کردید رو استفاده کنم. من یک EditorTemplate به اسم DateTime دارم که فیلدهای با نوع DateTime پروژه از اون استفاده می‌کنن. بدین صورت :

@model DateTime?

@Html.TextBox("", (Model.HasValue ? Model.Value.ToString() : string.Empty))

برای استفاده از این DatePicker، همون طور که توی سایت سازندش نوشته، اول یک text box با id مثلا برابر با pcal1 داریم :

<input type="text" id="pcal1" value="" />

بعد این id به اسکریپت زیر داده می‌شود :

<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar( 'objCal1', 'pcal1' );
</script>

به نظرتون چطور میشه AMIB Date Picker رو برای Html.TextBox معماری mvc استفاده کنم؟ با توجه به این که معلوم نیست id این Text Box چیه. یک بار مثلا id میشه BirthDate یک بار دیگه میشه RegisterDate و .... .

‫۱۱ سال و ۱۰ ماه قبل، سه‌شنبه ۲۶ دی ۱۳۹۱، ساعت ۱۸:۰۳

علی یگانه مقدم

اشتراک‌ها

Number Spinner با امکانات بسیار مناسب

در صورتی که نیاز دارید برای برنامه خود یک شمارنده که توسط کاربر تنظیم میشود قرار دهید این پلاگین جی کوئری مورد بسیار مناسبی است. تمامی پراپرتی‌ها و رویدادهایی که کاربردی و مورد نیاز هستند در این کتابخانه گنجانده شده اند.

<script>
$(document).ready(function(){
$("#number-picker").dpNumberPicker({
min: false, // Minimum value.
max: false, // Maximum value.
value: 0, // Initial value
step: 1, // Incremental/decremental step on up/down change.
format: false,
editable: true,
addText: "+",
subText: "-",
formatter: function(val){return val;},
beforeIncrease: function(){},
afterIncrease: function(){},
beforeDecrease: function(){},
afterDecrease: function(){},
beforeChange: function(){},
afterChange: function(){},
onMin: function(){},
onMax: function(){}
});
</script>

‫۴ سال و ۱ ماه قبل، یکشنبه ۲۶ مرداد ۱۳۹۹، ساعت ۰۰:۴۸

وحید نصیری

نظرات مطالب

Blazor 5x - قسمت یازدهم - مبانی Blazor - بخش 8 - کار با جاوا اسکریپت

امکان رندر کامل یک کامپوننت Blazor توسط کدهای جاوااسکریپتی در Blazor 6x

مرحله‌ی اول آماده سازی یک کامپوننت، جهت دسترسی به آن توسط کدهای جاوااسکریپتی، ثبت آن به نحو زیر در فایل Program.cs است:

builder.RootComponents.RegisterForJavaScript<Counter>(identifier: "counter");

البته نمونه‌ی blazor server آن به صورت زیر است:

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterForJavaScript<Counter>(identifier: "counter");
});

پس از آن، کدهای جاوااسکریپتی فراخوان کامپوننت Counter، به صورت زیر خواهند بود:

<button onclick="callCounter()">Call Counter</button>

<script>
  async function callCounter() {
     let containerElement = document.getElementById('my-counter');
     await Blazor.rootComponents.add(containerElement, 'counter', { incrementAmount: 10 });      
  }
</script>
 
<div id="my-counter">
</div>

که نتیجه‌ی نهایی این فراخوانی، در div ای با id مساوی my-counter، رندر خواهد شد. در اینجا نحوه‌ی ارسال پارامتری را نیز به این کامپوننت، مشاهده می‌کنید.

‫۲ سال و ۱۰ ماه قبل، شنبه ۲۲ آبان ۱۴۰۰، ساعت ۲۱:۰۹

وحید نصیری

نظرات مطالب

آزمایش Web APIs توسط Postman - قسمت چهارم - نوشتن آزمون‌ها و اسکریپت‌ها

یک نکته‌ی تکمیلی: اجرای دستوراتی پیش از اجرای درخواست‌ها در postman

همانطور که در مطلب جاری نیز عنوان شد، آزمون‌های Postman، پس از پایان اجرای یک درخواست و بر روی محتوای response دریافتی از سرور، اجرا می‌شوند. اگر نیاز به اجرای دستوراتی پیش از اجرای یک درخواست وجود داشته باشد، می‌توان از گزینه‌ی Pre-request script استفاده کرد:

مهم‌ترین کاربرد آن، تنظیم یکسری متغیر، پیش از اجرای درخواست اصلی است. برای مثال فرض کنید که می‌خواهید id ارسالی به سمت سرور را random کنید. برای این منظور یک متغیر محیطی جدید را در قسمت Pre-request script درخواست جاری، تنظیم می‌کنیم (در مورد متغیرهای محیطی در قسمت بعد، مفصل بحث می‌شود):

pm.environment.set("newId", "name " + parseInt(Math.random() * 10000));

سپس برای استفاده‌ی از آن، اینبار url را به صورت زیر تنظیم می‌کنیم:

https://localhost:5001/users/{{newId}}

که در اینجا متغیر {{newId}} هربار پیش از اجرای درخواست، به یک مقدار اتفاقی تنظیم شده و سپس از آن برای ساخت URL نهایی استفاده می‌شود.

‫۵ سال و ۵ ماه قبل، جمعه ۲۰ اردیبهشت ۱۳۹۸، ساعت ۱۴:۱۴

رضا منصوری

نظرات مطالب

نحوه استفاده از افزونه Firebug برای دیباگ برنامه‌های ASP.NET مبتنی بر jQuery

با تشکر از مطلب بسیار کاربردیتون ، در هنگام استفاده از URL Routing همانطور که قبلا راهنماییم کرده بودید برای آدرس فایل‌های جاوا اسکریپت از

<%=ResolveUrl("~/App_Themes/MainTheme/jquery.js")%>

استفاده کردم و مشکل حل شد ولی برای یو آر ال این تصاویر آیکون که در Jquery تعریف شدند میتونید کمکم کنید

<script type="text/javascript">
    $(document).ready(function () {

        $('#exampleMenu').sweetMenu({
            top: 200,
            padding: 8,
            iconSize: 48,
            easing: 'easeOutBounce',
            duration: 500,
            icons: [
'images/home.png',
'images/comments.png',
'images/red_heart.png',
'images/computer.png',
'images/male_user.png',
'images/yellow_mail.png'
]
        });
    });
</script>

اگر آدرس آیکون‌ها را به صورت

'http://site.ir/images/home.png'

تعریف کنم مشکل حل میشه ولی فکر کنم راه حل درستی نباشه . بسیار ممنون

‫۱۱ سال و ۱ ماه قبل، یکشنبه ۷ مهر ۱۳۹۲، ساعت ۱۴:۲۸

مسعود پاکدل

نظرات مطالب

آموزش Knockout.Js #2

ممنون دوست عزیز.
بله امکان پذیر است. باید از المان‌های تودرتو استفاده کنیم. به این صورت که المان ریشه با استفاده از with به model مربوطه مقید می‌شود و المان‌های داخلی به خواص مدل bind می‌شوند. برای مثال:

<div data-bind="text: teacher"> </div>//مقید سازی به مدل اول
<p data-bind="with: student">//مقید سازی المان ریشه به مدل دوم
    Name: <span data-bind="text: name"> </span>,//مقید سازی خواص به المان‌های داخلی
    Family: <span data-bind="text: family"> </span>
</p>
 
<script type="text/javascript">
    ko.applyBindings({
        teacher: "myTeacher",
        student: {
            name:  "Masoud",
            family: "Pakdel" 
       }
    });
</script>

‫۱۱ سال و ۲ ماه قبل، سه‌شنبه ۱۹ شهریور ۱۳۹۲، ساعت ۰۲:۴۵