أضف مراجع CSS إلى Page من عرض جزئي

StackOverflow https://stackoverflow.com/questions/4210391

سؤال

هل هناك طريقة لإضافة إشارات CSS إلى صفحة من عرض جزئي ، وجعلهم يقدمون في الصفحة <head> (كما هو مطلوب من قبل HTML 4.01 Spec)?

هل كانت مفيدة؟

المحلول 4

يمكنك استخدام أ HttpModule لمعالجة استجابة HTML ونقل أي إشارات CSS/Script إلى الأماكن المناسبة. هذا ليس مثاليًا ، ولست متأكدًا من الآثار المترتبة على الأداء ، ولكن يبدو أن الطريقة الوحيدة لحل المشكلة دون (أ) حل قائم على JavaScript ، أو (ب) العمل ضد مبادئ MVC.

نصائح أخرى

إذا كنت تستخدم MVC3 و Razor ، فإن أفضل طريقة لإضافة العناصر لكل صفحة إلى القسم الخاص بك هي: 1) Call Rendersection () من داخل صفحة التخطيط الخاصة بك) تعلن قسمًا مقابلًا داخل صفحات طفلك:

/views/shared/_layout.cshtml:

<head>
    <!-- ... Rest of your head section here ... ->
    @RenderSection("HeadArea")
</head>

/views/entries/index.cshtml:

@section HeadArea {
    <link rel="Stylesheet" type="text/css" href="/Entries/Entries.css" />
}

تتضمن صفحة HTML الناتجة بعد ذلك قسمًا يشبه هذا:

<head>
    <!-- ... Rest of your head section here ... ->
    <link rel="Stylesheet" type="text/css" href="/Entries/Entries.css" />
<head>

يمكنك أيضًا استخدام عناصر التحكم في المصدر المفتوح Telerik لـ MVC والقيام بشيء مثل:

<%= Html.Telerik().StyleSheetRegistrar()
                  .DefaultGroup(group => group
                     .Add("stylesheet.css"));

في قسم الرأس و 

<%= Html.Telerik().ScriptRegistrar()
                  .DefaultGroup(group => group
                     .Add("script.js"));

في قسم البرنامج النصي في BottTom من صفحتك.

ويمكنك الاستمرار في إضافة البرامج النصية في أي عرض أو عرض جزئي ويجب أن تعمل.

إذا كنت لا ترغب في استخدام المكون ، فيمكنك دائمًا إلهام نفسك من هناك والقيام بشيء مخصص.

أوه ، مع Telerik ، لديك أيضًا خيارات للجمع بين البرامج النصية وضغطها.

يمكن أن يكون لديك تحميل العرض الجزئي في كتلة JavaScript التي تسقط في النمط إلى الرأس ، ولكن سيكون ذلك سخيفًا بالنظر إلى أنك ربما تريد كتلة JavaScript في قسم الرأس لنفس السبب.

لقد اكتشفت مؤخرًا شيئًا رائعًا. يمكنك تسلسل طريقة عرض جزئية في سلسلة وإرسالها مرة أخرى إلى العميل كجزء من كائن JSON. يمكّنك ذلك من تمرير معلمات أخرى أيضًا ، إلى جانب العرض.

إرجاع طريقة العرض كجزء من كائن JSON

يمكنك الحصول على كائن JSON مع jQuery و Ajax وتحميله مع العرض الجزئي ، ثم قد تكون خاصية أخرى JSON هي كتلة أسلوبك. يمكن لـ JQuery التحقق مما إذا كنت قد قمت بإرجاع كتلة النمط ، إذا كان الأمر كذلك ، فقم بإسقاطه في قسم الرأس.

شيء مثل:

$.ajax(
{
     url: "your/action/method",
     data: { some: data },
     success: function(response)
     {
          $('#partialViewContainer).html(response.partialView);
          if (response.styleBlock != null)
               $('head').append(response.styleBlock);
     }
});

هناك نهج آخر ، يهزم مبادئ MVC هو استخدام عرض ViewModel والرد على الحدث الأول لصفحتك لتعيين CSS/JavaScript المطلوب (أي MyViewModel.css.add (". محتوى جمع CSS على ViewModel الخاص بك.

للقيام بذلك ، تقوم بإنشاء فئة ViewModel الأساسية التي ترثها جميع نماذجك الأخرى ، ALA

public class BaseViewModel
{
    public string Css { get; set; }
}

في صفحتك الرئيسية ، تقوم بتعيينها لاستخدام ViewModel هذا

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage<BaseViewModel>" %>

ومقاطع رأسك يمكنك كتابة قيمة خاصية CSS

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

    <%= Model.Css %>
</head>

الآن ، في عرضك الجزئي ، تحتاج إلى الحصول على هذا الرمز ، وهو أمر قبيح نوعًا ما في MVC

<script runat="server">
    protected override void OnInit(EventArgs e)
    {
        Model.Css = "hej";

        base.OnInit(e);
    }
</script>

لن يعمل التالي إلا إذا تم تمكين JavaScript. إنه مساعد صغير أستخدمه بالضبط للسيناريو الذي ذكرته:

// standard method - renders as defined in as(cp)x file
public static MvcHtmlString Css(this HtmlHelper html, string path)
{
    return html.Css(path, false);
}
// override - to allow javascript to put css in head
public static MvcHtmlString Css(this HtmlHelper html, 
                                string path, 
                                bool renderAsAjax)
{
    var filePath = VirtualPathUtility.ToAbsolute(path);

    HttpContextBase context = html.ViewContext.HttpContext;
    // don't add the file if it's already there
    if (context.Items.Contains(filePath))
        return null;

    // otherwise, add it to the context and put on page
    // this of course only works for items going in via the current
    // request and by this method
    context.Items.Add(filePath, filePath);

    // js and css function strings
    const string jsHead = "<script type='text/javascript'>";
    const string jsFoot = "</script>";
    const string jsFunctionStt = "$(function(){";
    const string jsFunctionEnd = "});";
    string linkText = string.Format("<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}\"></link>", filePath);
    string jsBody = string.Format("$('head').prepend('{0}');", linkText);

    var sb = new StringBuilder();

    if (renderAsAjax)
    {
        // join it all up now
        sb.Append(jsHead);
        sb.AppendFormat("\r\n\t");
        sb.Append(jsFunctionStt);
        sb.AppendFormat("\r\n\t\t");
        sb.Append(jsBody);
        sb.AppendFormat("\r\n\t");
        sb.Append(jsFunctionEnd);
        sb.AppendFormat("\r\n");
        sb.Append(jsFoot);
    }
    else
    {
        sb.Append(linkText);
    }

    return MvcHtmlString.Create( sb.ToString());
}

الاستخدام:

<%=Html.Css("~/content/site.css", true) %>

يعمل بالنسبة لي ، كما هو مذكور ، فقط إذا تم تمكين JavaScript ، وبالتالي الحد من فائدته قليلاً.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top