MVC4 में शैलियाँ

Question

एक .NET MVC4परियोजना में कैसे काम @Styles.Renderकरता है?

मेरा मतलब है, @Styles.Render("~/Content/css")यह किस फ़ाइल में कॉल कर रहा है?

मेरे पास कोई फ़ाइल या फ़ोल्डर नहीं है जिसे मेरे Contentफ़ोल्डर के अंदर "css" कहा जाता है ।

Comments

मेरे asp.net/mvc/tutorials/mvc-4/bundling-and-minification ट्यूटोरियल देखें

— RickAndMSFT

Answer 1

यह उस विशेष बंडल में शामिल फ़ाइलों को कॉल कर रहा है, जो फ़ोल्डर BundleConfigमें कक्षा के अंदर घोषित किया गया है App_Start।

उस विशेष स्थिति @Styles.Render("~/Content/css")में कॉल "~ / सामग्री / site.css" पर कॉल कर रहा है।

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

Comments

यह जानने के लिए एक बात यह है कि यह एक .css फ़ाइल नहीं जोड़ेगा जो पहले से ही बंडल में छोटा है। उदाहरण: यह bootstrap.min.js के साथ काम नहीं करता है, केवल bootstrap.js के साथ। मुझे उम्मीद है कि यह दूसरों की मदद कर सकता है।

— कोडिया

यह लिपियों के बारे में नहीं बल्कि शैलियों के बारे में बात कर रहा है। यदि आप bootstrap.min.js का उपयोग करना चाहते हैं, तो बस एक बंडल बनाएं जैसे: bundles.Add (नया ScriptBundle ("~ / बंडल / बूटस्ट्रैप")। शामिल करें ("~ / लिपियों / bootraprap.min.js"));

— Xcalibur37

@ कोडा मुझे यकीन नहीं है कि आपका सेट-अप क्या है, लेकिन डिफ़ॉल्ट रूप से बंडलर फाइलों को *.min.*संभाल लेगा *.*।

— स्कमस्क

@skmasq, इन पंक्तियों को लिखने के समय, मैं VS2013 का उपयोग कर रहा था। अब तक हालात बदल गए होंगे। उल्लेख करने के लिए धन्यवाद कि :)

— कोडिया

मुझे यह नहीं मिला .... क्यों बंडल बनाने और एमवीसी में इन पागल वर्गों के लिए उन रास्तों को जोड़ने के लिए जाएं, जब आप बस अपने वेब पेज में फ़ाइल में सीएसएस <लिंक> जोड़ सकते हैं? यदि आप अपने सभी सीएसएस लिंक को अपनी स्टाइल शीट में एक लेआउट फ़ाइल या आंशिक दृश्य के रूप में जोड़ते हैं, तो आप उन्हें एक साधारण स्थान पर भी प्रबंधित कर सकते हैं। यह हार्ड कोड स्टाइल रास्तों के लिए भी खराब डिज़ाइन है, जैसे कि आप अब सीएसएस की खाल नहीं बना सकते हैं जो कि सीएसएस सिस्टम का पूरा उद्देश्य था जब यह 20 साल पहले डिजाइन किया गया था।

— स्टोकली

Answer 2

केस सेंसिटिविटी के लिए देखें। अगर आपके पास फाइल है

/Content/bootstrap.css

और आप अपने बंडल में पुनः निर्देशित करें

.Include ( "~ / सामग्री / Bootstrap.css")

यह सीएसएस को लोड नहीं करेगा।

Comments

इसके अलावा: दूसरे शामिल अलग वर्तनी है।

— दान एस्पेरज़ा

वहाँ sass / कम फ़ाइलों के लिए समर्थन है, भी?

— मांटीकोर

Answer 3

पार्टी करने में थोड़ी देर हो गई। लेकिन ऐसा लगता है जैसे किसी ने
बंडलिंग और के मिनिफिकेशन का उल्लेख नहीं किया है StyleBundle, इसलिए ।।

@Styles.Render("~/Content/css") 

इसमें कॉल Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);            

जो बदले में कॉल करता है

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css"));
}

---

RegisterBundles()प्रभावी ढंग से जोड़ती है और minifies bootstrap.css और Site.css
एक एकल फाइल में,

<link href="/Content/css?v=omEnf6XKhDfHpwdllcEwzSIFQajQQLOQweh_aX9VVWY1" rel="stylesheet">

लेकिन ..

<system.web>
  <compilation debug="false" targetFramework="4.6.1" />
</system.web>

केवल जब debug सेट किया falseजाता है Web.config।
अन्यथा bootstrap.cssऔर Site.cssव्यक्तिगत रूप से परोसा जाएगा।
बंडल नहीं है, और ना ही छोटा:

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">

Answer 4

src="@url.content("~/Folderpath/*.css")" शैलियों को प्रस्तुत करना चाहिए

Answer 5

जैसा कि App_start.BundleConfig में परिभाषित किया गया है, यह सिर्फ कॉलिंग है

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

यदि आप उस अनुभाग को हटाते हैं तो भी कुछ नहीं होता है।

Answer 6

पोलो मैं कई कारणों से MVC में बंडलों का उपयोग नहीं करेगा। यह आपके मामले में काम नहीं करता है क्योंकि आपको अपने Apps_Start फ़ोल्डर में एक कस्टम बंडलकॉन्फ़िग क्लास सेट करना होगा। इसका कोई मतलब नहीं है जब आप अपने html के सिर में एक शैली जोड़ सकते हैं जैसे कि:

<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap.theme.css" />

आप इन्हें एक Layout.cshtml या आंशिक वर्ग में भी जोड़ सकते हैं जो आपके सभी विचारों से पुकारा जाता है और प्रत्येक पृष्ठ में गिरा दिया जाता है। यदि आपकी शैलियाँ बदल जाती हैं, तो आप आसानी से नाम और पथ को बदल नहीं सकते हैं।

सीएसएस में हार्ड-कोडित लिंक को एक वर्ग में जोड़ना यूआई को अलग करने के पूरे उद्देश्य के साथ टूट जाता है और एप्लिकेशन मॉडल से डिजाइन भी। आप हार्ड कोडेड स्टाइल शीट पाथ को भी c # में प्रबंधित नहीं करना चाहते क्योंकि आप अब अलग-अलग डिवाइस, थीम आदि के लिए "खाल" या अलग स्टाइल मॉडल नहीं बना सकते हैं, जैसे:

<link rel="stylesheet" href="~/UI/Skins/skin1/base.css" />
<link rel="stylesheet" href="~/UI/Skins/skin2/base.css" />

इस प्रणाली और रेजर का उपयोग करके अब आप डेटाबेस या उपयोगकर्ता सेटिंग से स्किन पाथ को बदल सकते हैं और अपनी वेबसाइट के पूरे डिजाइन को केवल गतिशील रूप से बदलकर बदल सकते हैं।

सीएसएस 15 साल पहले का पूरा उद्देश्य साइटों के लिए उपयोगकर्ता-नियंत्रित और एप्लिकेशन-नियंत्रित स्टाइल शीट "खाल" दोनों को विकसित करना था ताकि आप यूआई लुक को स्विच कर सकें और एप्लिकेशन से अलग महसूस कर सकें और डेटा संरचना से स्वतंत्र सामग्री का पुनरुत्पादन कर सकें। .... उदाहरण के लिए एक मुद्रण योग्य संस्करण, मोबाइल, ऑडियो संस्करण, कच्चा xml, आदि।

अब इस "पुराने जमाने", हार्ड # कोड वाली पथ प्रणाली का उपयोग करके C # क्लासेस का उपयोग करके, बूटस्ट्रैप जैसी कठोर शैली और एप्लिकेशन कोड के साथ साइटों के विषयों को मर्ज करके, हम फिर से आगे बढ़ गए हैं कि 1998 में वेबसाइटें कैसे बनाई गई थीं।

Comments

तो, minificationउसके साथ बिल्ली करने के लिए ? : s / :(

— स्कॉट फ्रैले

हाँ। क्यों 2019 में डेवलपर्स सीएसएस और जावास्क्रिप्ट को कम कर रहे हैं लेकिन फिर एपीआई की तरह कोणीय और अन्य का निर्माण कर रहे हैं जो ग्राहकों को अनावश्यक ईसीएमएस्क्रिप्ट (जावास्क्रिप्ट) की मेगाबाइट भेजते हैं? हम सीमित बैंडविड्थ वाले ग्राहकों को कम कोड या संपीड़ित कोड भेजते थे ताकि वे बैंडविड्थ द्वारा विवश होने पर कोड प्राप्त कर सकें .... अर्थात 14 k बॉड मोडेम। हमारे पास 5G आ रहा है इसलिए gif संपीड़न या minification isnt जैसे कोड कम्प्रेशन की आवश्यकता है। फिर भी हम परिणामस्वरूप क्लाइंट्स को भारी मात्रा में स्क्रिप्ट भेज रहे हैं। तो कुछ भी क्यों कम करें?

— Stokely

क्योंकि हमें जितना संभव हो उतना कम तार भेजना चाहिए? मैं निश्चित रूप से चीजों को न्यूनतम रखने की कोशिश करता हूं।

— स्कॉट फ्रैले

Answer 7

मैंने एक एमवीसी 3 वेब (मैं मौजूदा समाधान के लिए नया हूं) में बंडलिंग को जोड़ने के लिए आवश्यक सभी चीजें कीं। Styles.Renderमेरे लिए काम नहीं किया। मुझे अंततः पता चला कि मैं बस एक बृहदान्त्र को याद कर रहा था। एक मास्टर पेज में: <%: Styles.Render("~/Content/Css") %> मैं अभी भी इस बात को लेकर असमंजस में हूं कि (एक ही पेज पर) कोलन के बिना क्यों <% Html.RenderPartial("LogOnUserControl"); %>काम करता है ।