رفع مشکل در نحوه استفاده از Bundle در mvc

[jaykob]

سلام

من به شکل زیر فایل های js پروژه خودم رو Bundle می کنم :



bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/assets/plugins/jquery/jquery-1.11.1.min.js",
"~/assets/plugins/bootstrap/js/bootstrap.min.js",
"~/assets/js/Captcha/jquery.plugin.js"));




و به این شکل در پروژه خودم صداش می زنم :





@Scripts.Render("~/bundles/jquery")



تمامی فایل های js رو هم به همون ترتیب در Bundle وارد می کنم اما فایل های js پروژام کار نمی کنه

ممنون می شم راهنمایی کنید

[Moien Tajik]

کد های Script رو در Layout در قسمت head فراخانی کنید . mvc خودش تو پروژه پیشفرض bootstrap و jQuery رو جدا از هم Bundle میکنه :

BundlesConfig :



public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));


bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));


bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));


bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));


bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}



در Layout :



@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap"

[jaykob]

سلام

دقیقا کاری که گفتید انجام دادم اما بازم همون شکلی بود . تعداد js های من حدود ۱۰ تا ۱۲ تا هست که به همون ترتیبی که دونه دونه لینک می دم در Bundle هم لینک دادم اما نمی شه ...

[Moien Tajik]

توی head در Layout فایل هاتونو Drag & Drop بکنید ببینین بازم مشکل داره یا نه :متفکر:

[alireza_s_84]

سلام

من به شکل زیر فایل های js پروژه خودم رو Bundle می کنم :



bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/assets/plugins/jquery/jquery-1.11.1.min.js",
"~/assets/plugins/bootstrap/js/bootstrap.min.js",
"~/assets/js/Captcha/jquery.plugin.js"));




و به این شکل در پروژه خودم صداش می زنم :





@Scripts.Render("~/bundles/jquery")



تمامی فایل های js رو هم به همون ترتیب در Bundle وارد می کنم اما فایل های js پروژام کار نمی کنه

ممنون می شم راهنمایی کنید
دلیلش اینه که در حالت پیش فرض سیستم باندل MVC کاری به ترتیب تعریف شده توسط شما نداره بلکه فایلها رو براساس حروف الفبا مرتب میکنه. در این باندل گروه که شما تعریف کردن از لحاظ الفبایی به ترتیب زیر پردازش میشه:
"~/assets/js/Captcha/jquery.plugin.js"
و بعد این:
"~/assets/plugins/bootstrap/js/bootstrap.min.js"
و بعد این:
"~/assets/plugins/jquery/jquery-1.11.1.min.js"

به همین دلیل چون دو پلاگین شما به فایل اول وابسته هستن و این فایل آخر همه رندر میشه شما در سمت کلاینت خطا دریافت میکنی. در مرورگر کلید F12 و قسمت کنسول دقیقا خطا رو به شما نشون میده.
حالا راه حل این مشکل چیه؟ ما باید کاری کنیم که MVC فایلها رو به همون ترتیبی که بهش معرف کردیم باهم باندل کنه. برای اینکار ابتدا دو کلاس زیر رو تعریف کنید:

using System.Collections.Generic;
using System.Web.Optimization;


namespace DoctorCode.Core
{
public class AsIsBundleOrderer : IBundleOrderer
{
public virtual IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
{
return files;
}
}


public static class BundleExtensions
{
public static Bundle ForceOrdered(this Bundle sb)
{
sb.Orderer = new AsIsBundleOrderer();
return sb;
}
}
}


کار متد ForceOrdered اینه که لیست فایلهای شما رو از باندل گروهی که تعریف کردین دریافت میکنه. همونطور که میبینید بصورت Extension متد تعریف شده تا قابلیتی رو به کلاس Bundle اضافه کنه. در بدنه این متد ما خصوصیت Orderer شیئ Bundle دریافت شده رو میتونیم مقدار دهی کنیم. این خصوصیت کلاسی رو دریافت میکنه که اینترفیس IBundleOrderer رو پیاده سازی کرده باشه و برای مرتب سازی فایلها استفاده میشه. اینجا ما با ایجاد کلاسی که اینترفیس IBundleOrderer رو پیاده سازی کرده یعنی کلاس AsIsBundleOrderer فایلها رو به همون ترتیبی که تعریف کردیم برگشت میدیم. توی این کلاس میتونستیم هرطور دلمون بخواد فایلها رو مرتب کنیم.
در نهایت برای استفاده از این متد الحاقی جدید به شکل زیر عمل میکنیم:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/assets/plugins/jquery/jquery-1.11.1.min.js",
"~/assets/plugins/bootstrap/js/bootstrap.min.js",
"~/assets/js/Captcha/jquery.plugin.js").ForceOrdered());



حالا دیگه نباید مشکلی داشته باشین.

[keyone72]

سلام

من به شکل زیر فایل های js پروژه خودم رو Bundle می کنم :



bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/assets/plugins/jquery/jquery-1.11.1.min.js",
"~/assets/plugins/bootstrap/js/bootstrap.min.js",
"~/assets/js/Captcha/jquery.plugin.js"));




و به این شکل در پروژه خودم صداش می زنم :





@Scripts.Render("~/bundles/jquery")



تمامی فایل های js رو هم به همون ترتیب در Bundle وارد می کنم اما فایل های js پروژام کار نمی کنه

ممنون می شم راهنمایی کنید

مورد گفته شده را اضافه کنید
اون خطی که نوشتم اضافه شود




public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{

//اضافه شود
bundles.IgnoreList.Clear();
//اضافه شود



bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));

}

}

[parsdarab]

سلام دوستان

من باندلینگ به صورت زیر پیاده کردم



#region toastr
bundles.Add(new ScriptBundle("~/bundles/toastr/js").Include(
"~/Content/toastr/toastr.js"));
bundles.Add(new StyleBundle("~/bundles/toastr/css").Include(
"~/Content/toastr/toastr.css"));
#endregion


#region jquery-ui
bundles.Add(new ScriptBundle("~/bundles/jquery-ui/js").Include(
"~/Content/jquery-ui-1.11.4/jquery-ui.js"));
//بخاطر مسیر دهی نسبی عکس
bundles.Add(new StyleBundle("~/Content/jquery-ui-1.11.4/css").Include(
"~/Content/jquery-ui-1.11.4/jquery-ui.css"));
#endregion


bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css"));


#region http://rbootstrap.ir/getting-started.html
bundles.Add(new ScriptBundle("~/bundles/bootstrap/js").Include(
"~/Content/bootstrap/Scripts/bootstrap-rtl.js"));


bundles.Add(new StyleBundle("~/bundles/bootstrap/css").Include(
"~/Content/bootstrap/css/bootstrap-rtl.css"));
#endregion




هر css و java script رو داخل پوشه مشخص گذاشتم
و ممکنه در پلاگینی که استفاده شده داخل فایل های css و جاوا عکسی هایی استفاده شده باشد.

من وقتی این رو پابلیش گرفتم رو روی iis گذاشتم و قسمت درخواستهایی که به iis ارسال می شد رو مانیتور کردم دیدم که به ازای هر باندلینگی که تریف شده یک request به سرور ارسال میشه مانند شکل زیر

142082


حالا سئوال من اینجاست که چطوری میشه تمام این درخواست را یکی کنم؟؟؟
یعنی یه درخواست برود سمت سرور تمام فایل های css و جاوا اسکریپت رو بگیره.
همان طور که گفته شده یکی از خواص باندلینگ فشرده کردن فایل ها و به هم چسپاندن آنها و ارسال به سمت کلاینت می باشد.
در ضمن به خاطر مسیردهی نسبی بعضی از فایل نمیشه نام باندلینگ رو یکی کرد

اگه کسی به این مشکل برخورد کرده ماروهم راهنمایی کنه
با تشکر

[parsdarab]

up......................

[Moien Tajik]

سلام ,
تو مقالات و آموزش هایی که من خوندم بهتر هستش که اسکریپت های Library های مختلف مثل jQuery , Bootstrap و ... رو بصورت جدا یک باندل و سایر اسکریپت های برنامتون رو هم یک باندل کنید . برای css ها همرو رو در یک باندل قرار بدید .
به این صورت مثلا همه ی اسکریپت هارو میتونید باهم در یک باندل قرار بدید :


bundles.Add(new ScriptBundle("~/bundles/lib").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/underscore.min.js",
"~/Scripts/moment.min.js",
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/bootbox.min.js"));

[parsdarab]

اگه داخل فایل cssعکسی استفاده شده باشه دیگه نمی تونه لود بشه
چون مسیری که ساخته میشه اولش با این ~/bundles/lib ست میشه

[hakim22]

می توانید دستی کلاسهایی که به هم مرتبط هستند رو یکی کنید و تبدیل به یک فایل کنید. می توانید شرط کنید که هنگام دیباگ یا روی لوکال هاست همه ی فایلها جدا جدا لود شود (روش جاری) و وقتی روی سرور قرار گرفت از آن فایل یکی شده استفاده کنه. ابزار زیادی برای تولید Bundle یکپارچه وجود داره. می توانید از ابزاری مثل gulp برای یکپارچه سازی خودکار قبل از لود پروژه استفاده کنید.

[parsdarab]

می توانید دستی کلاسهایی که به هم مرتبط هستند رو یکی کنید و تبدیل به یک فایل کنید. می توانید شرط کنید که هنگام دیباگ یا روی لوکال هاست همه ی فایلها جدا جدا لود شود (روش جاری) و وقتی روی سرور قرار گرفت از آن فایل یکی شده استفاده کنه. ابزار زیادی برای تولید Bundle یکپارچه وجود داره. می توانید از ابزاری مثل gulp برای یکپارچه سازی خودکار قبل از لود پروژه استفاده کنید.

بی خیالش شدم:گیج::گیج::گیج: