.NET Tips | جستجوها: نتایج مشابه «صدور رخدادها از سرویس‌ها به کامپوننت‌ها در برنامه‌های Angular»، صفحه: ۴۴

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

بررسی سیستم جدید گرید بوت استرپ 3

با تشکر و سپاس .من کد ایجاد فاصله بین ستون‌ها رو اجرا می‌کنم مثل کد شما :

<div class="container">
        <h4 class="alert alert-info">ایجاد فاصله بین ستون‌ها</h4>
        <div class="row">
            <div class="col-lg-3 col-sm-4 alert alert-danger">
             ستون اول
            </div>
            <div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1 alert alert-success">
             ستون دوم
            </div>
        </div>   <!-- end row -->
</div>

اما خروجی از نظر ظاهری متفاوت هست :(در حالت lg)

ممکنه راهنمائی بفرمائید

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

ابوالفضل روشن ضمیر

مطالب

Virtual Scrolling در Angular 7

یکی از امکانات Angular 7، ویژگی Virtual Scrolling می‌باشد. در صورتیکه شما قصد داشته باشید یک لیست بزرگ از المنت‌ها را بارگذاری کنید، این‌کار می‌تواند بر روی کارآیی برنامه‌ی شما تاثیر بگذارد . تگ زیر

<cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>

می تواند برای بارگذاری تنها بخش‌های قابل مشاهده‌ی از یک لیست، بر روی صفحه نمایش استفاده شود و همچنین تنها آیتم‌هایی Render خواهند شد که می‌تواند آن‌ها را در صفحه نمایش جا دهد. اگر لیست بارگذاری شده را اسکرول کنیم، در این حالت المنت‌ها در DOM به صورت پویا load و unload می‌شوند.

قبل از پیاده سازی ، لازم است Angular CLI را به آخرین نسخه بروز رسانی کنیم. برای بروز رسانی Angular CLI دستور زیر را اجرا می‌کنیم:

npm install -g @angular/cli

بعد از نصب با استفاده از ng version نسخه‌ی Angular CLI را بررسی می‌کنیم که باید بزرگتر از 7 باشد:

حالا نوبت به ایجاد یک پروژه‌ی جدید می‌باشد. با استفاده از دستور زیر یک پروژه جدید ایجاد می‌شود:

ng new angular7-virtualScrolling

بعد از تایید دستور بالا، دو سؤال از شما پرسیده می‌شود؟

1- آیا قصد دارید Angular routing اضافه شود یا نه؟ ( در نسخه‌های قبلی با استفاده از routing-- این کار را انجام می‌دادیم)

2-انتخاب فرمت stylesheet که قصد استفاده‌ی از آن‌را دارید ( با کلید‌های جهتی بالا و پایین روی صحفه کلید می‌توانید یکی از گزینه‌ها را انتخاب کنید )

برای استفاده از Virtual Scrolling نیاز است پکیج زیر را نصب کنیم :

npm install @angular/cdk@latest

بعد از نصب، دستور ng serve را اجرا می‌کنیم تا بررسی کنیم که برنامه به درستی اجرا می‌شود یا نه. سپس فایل app.module.ts را باز می‌کنیم و ScrollingModule را در بخش imports اضافه می‌کنیم. اکنون نیاز است تا یک آرایه را برای نمایش آیتم‌های لیست، تولید کنیم. قطعه کد زیر در فایل app.component.ts قرار دارد که یک آرایه عددی را ایجاد می‌کند و تعدادی آیتم را به آن اضافه می‌کند:

  title = 'Angular 7 – Virtual Scrolling feature';
  scrollItems: number[] = [];
  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.scrollItems.push(index);
    }
  }

در فایل app.component.html قطعه کد زیر را قرار می‌دهیم:

    <div>
      <h4>
        {{this.title}}
      </h4>
      <cdk-virtual-scroll-viewport itemSize="100">
        <div *cdkVirtualFor="let n of scrollItems">Item {{n}}</div>
      </cdk-virtual-scroll-viewport>
    </div>

داخل تگ cdk-virtual-scroll-viewport، یک div را ایجاد و سپس یک دایرکتیو را به نام cdkVirtualFor* به آن اضافه می‌کنیم. این دایرکتیو، ngFor* را درون cdk-virtual-scroll-viewport، جایگزین می‌کند که شما با استفاده از آن می‌توانید یک حلقه بر روی آرایه scrollItems جهت پیمایش ایجاد کنید.
تمام ! اکنون پروژه را اجرا کنید.
در اولین بار اجرا :

بعد از اسکرول کردن لیست :

همانطور که مشاهده می‌کنیم المنت‌های قبلی unload شدند و المنت‌های جدید load شدند

DEMO

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

ناصر طاهری

مطالب

تخته وایت برد آنلاین توسط SignalR

همانطور که در دوره SignalR سایت نیز مطرح شده‌است : "یکی از کاربردهای جالب SignalR می‌تواند به روز رسانی مداوم صفحه نمایش کاربران، توسط اطلاعات ارسالی از طرف سرور باشد." در ادامه میخواهیم به طراحی یک "تخته وایت برد" آنلاین بپردازیم.

در این پروژه برای ترسم خطوط بر روی صفحه از Canvas در HTML5 استفاده میشود.

پیشنیازها :

پیشنیازهای این مطلب با مطلب «مثال - نمایش درصد پیشرفت عملیات توسط SignalR» یکی است. برای مثال، نحوه دریافت وابستگی‌ها، تنظیمات فایل global.asax و افزودن اسکریپت‌ها، تفاوتی با مقاله‌ی ذکر شده ندارد و تنها تعدادی اسکریپت و CSS جهت زیبایی کار افزوده شده است :

<link href="Styles/bootstrap.min.css" rel="stylesheet" />

//برای نمایش و استفاده از جعبه‌ی رنگ در بوت استراپ
<link href="Styles/bootstrap-colorpalette.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src='Scripts/jquery.signalR-1.1.3.js'></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-colorpalette.js"></script>
<script type="text/javascript" src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>

//حاوی متدهایی برای رسم خط با استفاده از HTML5
<script src="Scripts/draw.js" type="text/javascript"></script>

//تعریف کلاینت‌های متصل به هاب
<script src="Scripts/Whiteboard.js"></script>

تعریف کلاس Hub برنامه :

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using OnlineSignalRWhiteboard.Model;

namespace OnlineSignalRWhiteboard.Hubs
{
    [HubName("onWhiteboard")]
    public class Whiteboard : Hub
    {
        public void OnDrawPen(Point prev, Point current, string color, int width)
        {
            Clients.All.drawPen(prev, current, color, width);
        }

        public void ClearBoard()
        {
            Clients.All.clear();
        }

    }
}

در ابتدا توسط ویژگی HubName یک نام مشخص برای هاب خود انتخاب کرده ایم. سپس متدی به نام OnDrawPen تعریف شده است که پس از فراخوانی از سمت کلاینت، مقادیر دریافتی خود را با صدا زدن متدی در سمت کلاینت به نام drawPen ، به تمام کلاینت‌ها ارسال و نقاط مربوطه در سمت کلاینت، بر روی صفحه رسم میشوند.

متد دیگری به نام ClearBoard نیز تعریف شده است که روال رخدادگردان clear در سمت کلاینت را فراخوانی میکند و باعث پاک شدن صفحه نمایش میشود.

کدهای کلاینت‌های متصل به هاب در فایل Whiteboard.js :

$(function () {
    $.connection.hub.logging = true;
    var whiteboard = $.connection.onWhiteboard;

    $("#clear").click(function () {
        //پاک کردن صفحه نمایش
        whiteboard.server.clearBoard();
    });

    var color = function (colors) {
        //تغییر رنگ قلم
        draw.colour = colors;
    };

    $(".size").click(function () {
        //تغییر سایز قلم
        draw.lineWidth = $(this).height();
        $('#size').css('height', $(this).height());
    });

    $.connection.hub.start().done(function () {
    })
    .fail(function () {
        alert("Could not Connect!");
     });

    draw.onDraw = function (prev, current, color, width) {
        //ارسال پارامترها به سمت سرور تا سرور بتواند داده‌ها را به سمت سایر کلاینت‌ها نیز ارسال کند
        whiteboard.server.onDrawPen(prev, current, color, width);
    };

    whiteboard.client.drawPen = function (prev, current, color, width) {
        draw.drawPen(prev, current, color, width);
    };

    whiteboard.client.clear = function () {
        draw.clear();
    };

    $('#colorpalette3').colorPalette()
      .on('selectColor', function (e) {
          $('#color').css('background-color', e.color);
          color(e.color);
      });

    var canvas = document.getElementById('draw');
    //تغییر سایر کانواس متناسب با پنجره‌ی مرورگر
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        canvas.width = window.innerWidth - 20;
        canvas.height = window.innerHeight - 70;
    }
    resizeCanvas();

});

در این قطعه کد ابتدا ارجاعی به هاب مشخص شده است و سپس روال‌های رخداد گردانی مانند whiteboard.client.drawPen و whiteboard.client.clear تعریف شده اند که به ترتیب متصل هستند به فراخوانی های Clients.All.drawPen و Clients.All.clear در سمت سرور.

همچنین یک متد به نام draw.onDraw تعریف شده است که وظیفه‌ی آن ارسال اطاعاتی نظیر موقعیت موس در صفحه، رنگ، اندازه و ... به سمت متدی به نام onDrawPen در هاب است.

کدهای کامل سمت کلاینت :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/bootstrap.min.css" rel="stylesheet" />
    <link href="Styles/bootstrap-colorpalette.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src='Scripts/jquery.signalR-1.1.3.js'></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/bootstrap-colorpalette.js"></script>
    <script type="text/javascript" src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
    <script src="Scripts/draw.js" type="text/javascript"></script>
    <script src="Scripts/Whiteboard.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div style="position: static;">
              <div>
                <div>
                  <a data-toggle="collapse" data-target=".navbar-inverse-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                  </a>
                  <a href="#">تخته وایت برد آنلاین توسط SignalR و HTML5</a>
                  <div>
                    <ul>
                      <li>
                          <div>
                              <a id="selected-color2" data-toggle="dropdown">
                                  <div style="width: 20px; height: 20px; background: black" id="color">
                                  </div>
                              </a>
                              <ul style="width:293px;">
                                <li style="display:inline-block;">
                                  <div>رنگ پس زمینه</div>
                                  <div id="colorpalette3"></div>
                                </li>
                              </ul>
                          </div>
                      </li>
                      <li></li>
                      <li>
                          <div>
                              <a data-toggle="dropdown" style="width: 120px; height: 20px" href="#">
                                <hr style="width: 120px; height: 1px; background-color: black;margin: 0px; display: table-cell" id="size">
                              </a>
                              <ul style="width: 120px">
                                <li><hr style="width: 140px; height: 1px; background-color: black"></li>
                                  <li></li>
                                <li><hr style="width: 140px; height: 3px; background-color: black"></li>
                                  <li></li>
                                <li><hr style="width: 140px; height: 7px; background-color: black"></li>
                                  <li></li>
                                <li><hr style="width: 140px; height: 10px; background-color: black"></li>
                                  <li></li>
                                <li><hr style="width: 140px; height: 20px; background-color: black"></li>
                              </ul>
                            </div>
                      </li>
                      <li></li>
                      <li>
                          <div>
                            <a href="#" id="clear"><i></i>جدید</a>
                          </div>
                      </li>
                    </ul>
                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div>
        </div>
        
        <div>
            <div>
                 <canvas id="draw" style="cursor: crosshair;border: 1px solid black;"></canvas>
            </div>
       </div>
    </form>
</body>
</html>

در ابتدا یک دکمه برای تغییر رنگ قلم و یک لیست بازشو برای تعیین اندازه‌ی قلم و همچنین یک دکمه برای پاک کردن صفحه نمایش قرار داده شده است. سپس یک Canvas به نام draw ایجاد کرده ایم که بتوانیم خطوط خود را بر روی آن رسم کنیم.

مشاهده نسخه نمایشی

کدهای کامل این مثال را میتوانید از اینجا دانلود کنید : OnlineSignalRWhiteboard.zip

و همچنین میتوانید نمونه‌ی بهینه شده‌ی آن را نیز از این قسمت دانلود کنید : OnlineCustomSignalRWhiteboard.zip

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

محسن موسوی

نظرات مطالب

Repository ها روی UnitOfWork ایده خوبی نیستند

آقای پاکدل لطفا راجع به این جمله بیشتر توضیح بدید:

»بهتر است متد Save را نیز در Repository قرار ندهید. متد Save باید توسط UnitOfWork به اشتراک گذاشته شده فراخوانی شود.

در پروژه http://nopcommerce.codeplex.com/SourceControl/latest اینگونه عمل شده
http://nopcommerce.codeplex.com/SourceControl/latest#src/Libraries/Nop.Data/EfRepository.cs
در نهایت این لایه سرویس است که باید اطمینان از انجام عملیات درخواستی و یا عدم انجام آنرا بدهد و برای عملیات‌های پیچیده‌تر نیز بایستی سیاست خودرا بسط دهد.منظور انجام عملیات Save و ادامه عملیات میباشد.
لایه UI وظیفه فراهم آوری اطلاعات را دارد و مابقی مسائل در لایه سرویس پوشش داده میشوند.
الزام این کار هم به وظیفه این لایه برمیگردد که یا این کار را میتوانم انجام دهم و یا خیر.
پیاده سازی ارائه شده نقضی بر جمله‌ی نقل قول شده میباشد؟

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

وحید نصیری

اشتراک‌ها

معرفی KeyValue Pipe در Angular 6.1

Introducing the New KeyValuePipe in Angular

<div *ngFor="let row of rows | keyvalue">
{{ row | json }}
{{row.key}}: {{row.value}}
</div>

‫۶ سال و ۲ ماه قبل، پنجشنبه ۴ مرداد ۱۳۹۷، ساعت ۱۹:۱۲

ابوالفضل روشن ضمیر

نظرات مطالب

فرم‌های مبتنی بر قالب‌ها در Angular - قسمت سوم - Data binding

اعتبار سنجی برای CheckBox list ( حداقل یک آیتم باید انتخاب شود )

مدل برای آیتم ها

export interface SelectedListItem {
  value: string;
  text: string;
  checked: boolean;
}

کامپوننت :

export class AppComponent implements OnInit {

  selectedListItem: SelectedListItem[] = [];
  
  ngOnInit(): void {
// می‌توان این مقادیر را از یک 
// api 
// دریافت کرد
    this.selectedListItem.push({ value: '1', text: 'Friday', checked: false });
    this.selectedListItem.push({ value: '2', text: 'Monday', checked: false });
    this.selectedListItem.push({ value: '3', text: 'Saturday', checked: false });
    this.selectedListItem.push({ value: '4', text: 'Sunday', checked: false });
    this.selectedListItem.push({ value: '5', text: 'Thursday', checked: false });
    this.selectedListItem.push({ value: '6', text: 'Tuesday', checked: false });
    this.selectedListItem.push({ value: '7', text: 'Wednesday', checked: false });
  }


  save(form, evetn: Event) {
    if (form.valid && this.isValidated()) {
      alert('valid');
    } else {
      alert('invalid');
    }
  }

  isValidated () {
    const selected = this.selectedListItem.filter(x => x.checked === true);
    if (selected && selected.length > 0) {
      return true;
    } else {
      return false;
    }
  }
}

component.html

 <form #form="ngForm" novalidate (submit)="save(form,$event)">
          <div *ngFor="let item of selectedListItem">
            <input type="checkbox" [(ngModel)]="item.checked" name="off">
            <label>
              {{item.text}}
            </label>
          </div>
          
          <p [hidden]=" !form.submitted || isValidated()">
            This field is required
          </p>


          <div>
            <input type="submit">
          </div>
 </form>

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

پرهام دستغیب

نظرات مطالب

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

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

var object;

window.JsFunctionHelper = {MapSuccessResponse: function (instance, address) {
       object = instance;
       return instance.invokeMethodAsync("GetAddress", valuesFromApi);
       }
 };

 function getValuesFromApi() {
      .
      .
      .

      object.invokeMethodAsync("GetAddress", valuesFromApi);
 }

در این مثال API گوگل مپ جزییات یک آدرس درخواست شده را به یک فایل js برمیگرداند، و میخواهم این مقادیر را به کامپوننت برای پرازش ارسال کنم. ابتدا یک متغیر با دسترسی global تعریف میکنیم و آن را برابر با ارجاعی که از وهله‌ی کامپوننت جاری ساخته شده قرار میدهیم. در نهایت شی invokeMethodAsync از این روش برای فراخوانی متد به همراه پارامتر در کامپوننت در دسترس است.

نحوه امکان فراخوانی کدهای #C از طریق کدهای جاوااسکریپت در برنامه‌های Blazor به عنوان یک نکته تکمیلی در بخش نظرات همین پست آمده.

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

زمانی فرهاد

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

رایگان شدن بیش از ۷۰۰۰ دوره سایت Pluralsight

هنگام اجرای پروژه با این خطا روبرو شدم

<div class="hero">
                <div class="branding"></div>
                <h2>One more step.</h2>
                <h4>Please complete the security check to access the site. If you continue to experience problems, let us know.</h4>
</div>

تصاویر

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

وحید نصیری

نظرات مطالب

پیاده سازی Unobtrusive Ajax در ASP.NET Core 1.0

"asp-validation-summary="ModelOnly را در مطلب «قسمت 14 - فعال سازی اعتبارسنجی ورودی‌های کاربران » مطالعه کنید.

@if (ViewData.ModelState.Any(keyValuePair => keyValuePair.Value.Errors.Any()))
{
    <div class="alert alert-danger">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <h4>خطاهای اعتبارسنجی</h4>
        <div asp-validation-summary="ModelOnly"></div>
    </div>
}

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

میثم سلی

نظرات مطالب

React 16x - قسمت 29 - احراز هویت و اعتبارسنجی کاربران - بخش 4 - محافظت از مسیرها

با عرض سلام و احترام

class App extends Component {

  state = {};

  componentDidMount() {
    const currentUser = userService.getCurrentUser();
    this.setState({ currentUser });
    console.log("CUUSer", currentUser);
  }

  render() {
    const { currentUser } = this.state;
    return (
      <React.Fragment>
        <ToastContainer />
        <Switch>
          <Route
            path="/dashboard"
            render={props => {
              console.log("CCCCCCCCC", currentUser);
              if (!currentUser) {
                return <Redirect to="/account/login" />;
              }
              return <DashboardPage {...props} />;
            }}
          />
          <Route path="/account/registercode" component={RegisterCode} />
          <Route path="/account/login" component={LoginForm} />
          <Route path="/notfound" component={NotFound} />
          <Route path="/logout" component={Logout} />
          <Route path="/" exact component={HomePage} />
          <Redirect to="/notfound" />
        </Switch>
      </React.Fragment>
    );
  }
}
export default App;

چه currentUser و چه this.state.currentUser داخل متد return مقداد Undefiend برمی گردونه ولی وقتی log میگیرم قبل متد render مقدار داره.

سناریوی مربوطه هم اینکه بعد از لاگین به کامپوننت dahboard بره و این درحالیه که اگه کاربر بعد از لاگین مستقیما تو مرورگر بخود به آدرس

https://localhost.../dashboard بره مشکلی نداشته باشه ولی currentUser مقدار undefiend داره و همیشه به کامپوننت login هدایت میشه؟!

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