افزودن Jquery و Javascript در Blazor Webassembly

سلام و عرض ادب.امیدوارم حالتون خوب خوببببببببب باشه ?

فرض کنید سره یه پروژه blazor هستیم یهو کارفرما یا مشتری میاد میگه اقا من میخام از jquery و یه سری کدای js کاستوم شده استفاده کنم. خب اون وقت چیکار باید بکنیم؟؟؟مگه بلیزور برای این نیومد که از کد js استفاده نکنیم؟خب الان باید چیکار کنیم؟؟؟ آیا باید دو دستی بزنیم تو سرمون؟؟ بله باید بزنیم ? چون راه حلشو نمیدونیم و باید دنبالش بگردیم ولی خب نگران نباشید راه حلشو پیدا کردم و اصلا هم سخت نیس.

راه حل

من یک سری کد js و jquery دارم. اگر این تگ اسکریپت هارو داخل فایل index.html در پوشه wwwroot کپی کنم و برنامه رو ران کنم، میبینیم که برنامه به درستی کار نمیکنه مثلا دکمه ها کار نمیکنه یا منو باز نمیشه و .... . مشکلشم به این دلیله که کد های js بلافاصله بعد از دانلود اجرا میشن در حالیکه هنوز صفحه blazor ما رندر نشده برای همین یه سری المان ها به درستی کار نمیکنه.

برای اینکه این مشکلو حل کنیم باید یه تابع جاوا اسکریپتی بسازیم بعد داخل اون تابع تگ های script رو به body صفحه، append کنیم بعد داخل کامپوننت MainLayout پروژه، با استفاده از JSRuntime، اون تابع رو صدا میزنیم.

اول از همه یه پوشه به نام scripts داخل wwwroot میسازیم بعد یه فایل javascript (با هر اسمی) میسازیم.

من اینجا یه فایل Main.js ساختم که قراره داخل این فایل، تابع مربوط به افزودن تگ های اسکریپت بنویسم.

function AddSrc() {
var scriptElement = []
    var stringsrc = [];
    stringsrc.push('assets/js/jquery.min.js');
    stringsrc.push('assets/js/bootstrap.min.js');
    stringsrc.push('assets/js/waves.js');
    stringsrc.push('assets/js/wow.min.js');
    stringsrc.push('assets/js/jquery.nicescroll.js');
    for (var i = 0; i < stringsrc.length; i++) {
        scriptElement[i] = document.createElement('script');
        scriptElement[i].src = stringsrc[i];
        document.body(scriptElement[i]);
  }
}

در این جا یه تابع ساختم به نام AddSrc داخل این تابع، دوتا متغیر به نام ScriptElement و StringSrc میسازیم که هردو از نوع آرایه هستن. بعد با استفاده از متد push، ادرس فایل های js اضاف میکنیم. بعد با استفاده از یک حلقه، تگ اسکریپت رو با استفاده از document.createElement میسازیم و آدرس هایی که در آرایه stringSrc ذخیره کرده بودیم، به پراپرتی src متغیر scriptElement اضاف میکنیم و در نهایت با استفاده از متد document.body، اون تگی که ساخته شده رو اضاف میکنیم.

حالا در MainLayout.cshtml باید فراخوانی کنیم

    [Inject]
    public IJSRuntime JsRuntime { get; set; }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeVoidAsync('AddSrc');
        }
  }

در اینجا بعد از اینکه صفحه رندر شد با استفاده از متد InvokeVoidAsync، اسم تابعی که نوشتیم رو به عنوان ورودی ارسال میکنیم.

در نهایت تگ اسکریپت فایل js که ساختیم یعنی Main.js رو به index.html پروژه اضاف میکنیم.

نکته!!!!
تگ : <script src="scripts/Main.js"> باید حتما بعد از تگ :
<script src="_framework/blazor.webassembly.js">
قرار بگیره

تمامممممم! به همین راحتی میتونید فایل های js و jquery به پروژتون اضاف کنید.?