Die Injektion Inhalte in bestimmte Abschnitte eine teilweise Ansicht ASP.NET MVC 3 mit Razor View Engine

Abschnitte gibt, die nicht in teilweise Ansichten und das ist auch so gewollt. Sie dürfen einige eigene Helfer zu erreichen ein ähnliches Verhalten, aber ehrlich, es ist die Sicht, die Verantwortung, die nötigen Skripte, nicht die partielle Verantwortung. Ich würde empfehlen die Verwendung des @ - Skripte Abschnitt von der Hauptansicht zu tun, und nicht die Teiltöne sorgen über Skripte.

InformationsquelleAutor Darin Dimitrov

Aus den Lösungen in dieser thread, ich kam mit dem folgenden wahrscheinlich zu kompliziert Lösung, mit der Sie Verzögerung darstellen von html (scripts) in einem using-block.

NUTZUNG

Erstellen "Abschnitt"

1. Typisches Szenario: In einer Teilansicht, nur den block ein mal, egal wie viele Male die eingeschränkte Sicht ist wiederholt in die Seite:

   @using (Html.Delayed(isOnlyOne: "some unique name for this section")) {
       <script>
           someInlineScript();
       </script>
   }

2. In einer Teilansicht, gehören in den block für jedes mal, die teilweise verwendet wird:

   @using (Html.Delayed()) {
       <b>show me multiple times, @Model.Whatever</b>
   }

3. In einer Teilansicht, wird nur der block einmal, egal wie viele Zeiten, die teilweise wiederholt, aber später machen es gezielt nach name when-i-call-you:

   @using (Html.Delayed("when-i-call-you", isOnlyOne: "different unique name")) {
       <b>show me once by name</b>
       <span>@Model.First().Value</span>
   }

Stellt die "Abschnitte"

(also der Darstellung der verzögerten Abschnitt in einem übergeordneten Ansicht)

@Html.RenderDelayed(); //writes unnamed sections (#1 and #2, excluding #3)
@Html.RenderDelayed("when-i-call-you", false); //writes the specified block, and ignore the `isOnlyOne` setting so we can dump it again
@Html.RenderDelayed("when-i-call-you"); //render the specified block by name
@Html.RenderDelayed("when-i-call-you"); //since it was "popped" in the last call, won't render anything due to `isOnlyOne` provided in `Html.Delayed`

CODE

public static class HtmlRenderExtensions {

    ///<summary>
    ///Delegate script/resource/etc injection until the end of the page
    ///<para>@via https://stackoverflow.com/a/14127332/1037948 and http://jadnb.wordpress.com/2011/02/16/rendering-scripts-from-partial-views-at-the-end-in-mvc/</para>
    ///</summary>
    private class DelayedInjectionBlock : IDisposable {
        ///<summary>
        ///Unique internal storage key
        ///</summary>
        private const string CACHE_KEY = "DCCF8C78-2E36-4567-B0CF-FE052ACCE309"; //"DelayedInjectionBlocks";

        ///<summary>
        ///Internal storage identifier for remembering unique/isOnlyOne items
        ///</summary>
        private const string UNIQUE_IDENTIFIER_KEY = CACHE_KEY;

        ///<summary>
        ///What to use as internal storage identifier if no identifier provided (since we can't use null as key)
        ///</summary>
        private const string EMPTY_IDENTIFIER = "";

        ///<summary>
        ///Retrieve a context-aware list of cached output delegates from the given helper; uses the helper's context rather than singleton HttpContext.Current.Items
        ///</summary>
        ///<param name="helper">the helper from which we use the context</param>
        ///<param name="identifier">optional unique sub-identifier for a given injection block</param>
        ///<returns>list of delayed-execution callbacks to render internal content</returns>
        public static Queue<string> GetQueue(HtmlHelper helper, string identifier = null) {
            return _GetOrSet(helper, new Queue<string>(), identifier ?? EMPTY_IDENTIFIER);
        }

        ///<summary>
        ///Retrieve a context-aware list of cached output delegates from the given helper; uses the helper's context rather than singleton HttpContext.Current.Items
        ///</summary>
        ///<param name="helper">the helper from which we use the context</param>
        ///<param name="defaultValue">the default value to return if the cached item isn't found or isn't the expected type; can also be used to set with an arbitrary value</param>
        ///<param name="identifier">optional unique sub-identifier for a given injection block</param>
        ///<returns>list of delayed-execution callbacks to render internal content</returns>
        private static T _GetOrSet<T>(HtmlHelper helper, T defaultValue, string identifier = EMPTY_IDENTIFIER) where T : class {
            var storage = GetStorage(helper);

            //return the stored item, or set it if it does not exist
            return (T) (storage.ContainsKey(identifier) ? storage[identifier] : (storage[identifier] = defaultValue));
        }

        ///<summary>
        ///Get the storage, but if it doesn't exist or isn't the expected type, then create a new "bucket"
        ///</summary>
        ///<param name="helper"></param>
        ///<returns></returns>
        public static Dictionary<string, object> GetStorage(HtmlHelper helper) {
            var storage = helper.ViewContext.HttpContext.Items[CACHE_KEY] as Dictionary<string, object>;
            if (storage == null) helper.ViewContext.HttpContext.Items[CACHE_KEY] = (storage = new Dictionary<string, object>());
            return storage;
        }


        private readonly HtmlHelper helper;
        private readonly string identifier;
        private readonly string isOnlyOne;

        ///<summary>
        ///Create a new using block from the given helper (used for trapping appropriate context)
        ///</summary>
        ///<param name="helper">the helper from which we use the context</param>
        ///<param name="identifier">optional unique identifier to specify one or many injection blocks</param>
        ///<param name="isOnlyOne">extra identifier used to ensure that this item is only added once; if provided, content should only appear once in the page (i.e. only the first block called for this identifier is used)</param>
        public DelayedInjectionBlock(HtmlHelper helper, string identifier = null, string isOnlyOne = null) {
            this.helper = helper;

            //start a new writing context
            ((WebViewPage)this.helper.ViewDataContainer).OutputStack.Push(new StringWriter());

            this.identifier = identifier ?? EMPTY_IDENTIFIER;
            this.isOnlyOne = isOnlyOne;
        }

        ///<summary>
        ///Append the internal content to the context's cached list of output delegates
        ///</summary>
        public void Dispose() {
            //render the internal content of the injection block helper
            //make sure to pop from the stack rather than just render from the Writer
            //so it will remove it from regular rendering
            var content = ((WebViewPage)this.helper.ViewDataContainer).OutputStack;
            var renderedContent = content.Count == 0 ? string.Empty : content.Pop().ToString();
            //if we only want one, remove the existing
            var queue = GetQueue(this.helper, this.identifier);

            //get the index of the existing item from the alternate storage
            var existingIdentifiers = _GetOrSet(this.helper, new Dictionary<string, int>(), UNIQUE_IDENTIFIER_KEY);

            //only save the result if this isn't meant to be unique, or
            //if it's supposed to be unique and we haven't encountered this identifier before
            if( null == this.isOnlyOne || !existingIdentifiers.ContainsKey(this.isOnlyOne) ) {
                //remove the new writing context we created for this block
                //and save the output to the queue for later
                queue.Enqueue(renderedContent);

                //only remember this if supposed to
                if(null != this.isOnlyOne) existingIdentifiers[this.isOnlyOne] = queue.Count; //save the index, so we could remove it directly (if we want to use the last instance of the block rather than the first)
            }
        }
    }


    ///<summary>
    ///<para>Start a delayed-execution block of output -- this will be rendered/printed on the next call to <see cref="RenderDelayed"/>.</para>
    ///<para>
    ///<example>
    ///Print once in "default block" (usually rendered at end via <code>@Html.RenderDelayed()</code>).  Code:
    ///<code>
    ///@using (Html.Delayed()) {
    ///    <b>show at later</b>
    ///    <span>@Model.Name</span>
    ///    etc
    ///}
    ///</code>
    ///</example>
    ///</para>
    ///<para>
    ///<example>
    ///Print once (i.e. if within a looped partial), using identified block via <code>@Html.RenderDelayed("one-time")</code>.  Code:
    ///<code>
    ///@using (Html.Delayed("one-time", isOnlyOne: "one-time")) {
    ///    <b>show me once</b>
    ///    <span>@Model.First().Value</span>
    ///}
    ///</code>
    ///</example>
    ///</para>
    ///</summary>
    ///<param name="helper">the helper from which we use the context</param>
    ///<param name="injectionBlockId">optional unique identifier to specify one or many injection blocks</param>
    ///<param name="isOnlyOne">extra identifier used to ensure that this item is only added once; if provided, content should only appear once in the page (i.e. only the first block called for this identifier is used)</param>
    ///<returns>using block to wrap delayed output</returns>
    public static IDisposable Delayed(this HtmlHelper helper, string injectionBlockId = null, string isOnlyOne = null) {
        return new DelayedInjectionBlock(helper, injectionBlockId, isOnlyOne);
    }

    ///<summary>
    ///Render all queued output blocks injected via <see cref="Delayed"/>.
    ///<para>
    ///<example>
    ///Print all delayed blocks using default identifier (i.e. not provided)
    ///<code>
    ///@using (Html.Delayed()) {
    ///    <b>show me later</b>
    ///    <span>@Model.Name</span>
    ///    etc
    ///}
    ///</code>
    ///-- then later --
    ///<code>
    ///@using (Html.Delayed()) {
    ///    <b>more for later</b>
    ///    etc
    ///}
    ///</code>
    ///-- then later --
    ///<code>
    ///@Html.RenderDelayed() //will print both delayed blocks
    ///</code>
    ///</example>
    ///</para>
    ///<para>
    ///<example>
    ///Allow multiple repetitions of rendered blocks, using same <code>@Html.Delayed()...</code> as before.  Code:
    ///<code>
    ///@Html.RenderDelayed(removeAfterRendering: false); /* will print */
    ///@Html.RenderDelayed() /* will print again because not removed before */
    ///</code>
    ///</example>
    ///</para>

    ///</summary>
    ///<param name="helper">the helper from which we use the context</param>
    ///<param name="injectionBlockId">optional unique identifier to specify one or many injection blocks</param>
    ///<param name="removeAfterRendering">only render this once</param>
    ///<returns>rendered output content</returns>
    public static MvcHtmlString RenderDelayed(this HtmlHelper helper, string injectionBlockId = null, bool removeAfterRendering = true) {
        var stack = DelayedInjectionBlock.GetQueue(helper, injectionBlockId);

        if( removeAfterRendering ) {
            var sb = new StringBuilder(
#if DEBUG
                string.Format("<!-- delayed-block: {0} -->", injectionBlockId)
#endif
                );
            //.count faster than .any
            while (stack.Count > 0) {
                sb.AppendLine(stack.Dequeue());
            }
            return MvcHtmlString.Create(sb.ToString());
        } 

        return MvcHtmlString.Create(
#if DEBUG
                string.Format("<!-- delayed-block: {0} -->", injectionBlockId) + 
#endif
            string.Join(Environment.NewLine, stack));
    }


}

InformationsquelleAutor drzaus

Wenn Sie haben ein berechtigtes Bedürfnis, einige js aus einer partial, hier ist, wie Sie es tun könnte, jQuery ist erforderlich:

<script type="text/javascript">        
    function scriptToExecute()
    {
        //The script you want to execute when page is ready.           
    }

    function runWhenReady()
    {
        if (window.$)
            scriptToExecute();                                   
        else
            setTimeout(runWhenReady, 100);
    }
    runWhenReady();
</script>

InformationsquelleAutor Serj Sagan

Es ist ein grundlegender Fehler in der Art, wie wir denken über web, insbesondere bei der Verwendung von MVC. Der Fehler ist, dass JavaScript irgendwie die Ansicht in der Verantwortung. Eine Ansicht ist eine Ansicht, JavaScript - (Verhaltens-oder anderweitig), ist JavaScript. In Silverlight-und WPF-MVVM-Muster das wir sind konfrontiert mit dem "ersten Blick" oder "model first". Im MVC-wir sollten immer versuchen, auf Grund von dem Modell, den Standpunkt und JavaScript ist, ein Teil von diesem Modell in vielerlei Hinsicht.

Ich würde vorschlagen, mit der AMD Muster (ich selbst wie RequireJS). Separate JavaScript-Module, definieren Sie Ihre Funktionen und Haken in den html-von JavaScript anstelle des Bauens auf einen Blick, laden Sie die JavaScript. Dies wird bereinigen Sie Ihren code, können Sie Ihr Anliegen und machen das Leben einfacher alle auf einen Schlag.

InformationsquelleAutor Mr. Baudin

Sie können diese Erweiterung Methoden: (Speichern als PartialWithScript.cs)

namespace System.Web.Mvc.Html
{
    public static class PartialWithScript
    {
        public static void RenderPartialWithScript(this HtmlHelper htmlHelper, string partialViewName)
        {
            if (htmlHelper.ViewBag.ScriptPartials == null)
            {
                htmlHelper.ViewBag.ScriptPartials = new List<string>();
            }

            if (!htmlHelper.ViewBag.ScriptPartials.Contains(partialViewName))
            {
                htmlHelper.ViewBag.ScriptPartials.Add(partialViewName);
            }

            htmlHelper.ViewBag.ScriptPartialHtml = true;
            htmlHelper.RenderPartial(partialViewName);
        }

        public static void RenderPartialScripts(this HtmlHelper htmlHelper)
        {
            if (htmlHelper.ViewBag.ScriptPartials != null)
            {
                htmlHelper.ViewBag.ScriptPartialHtml = false;
                foreach (string partial in htmlHelper.ViewBag.ScriptPartials)
                {
                    htmlHelper.RenderPartial(partial);
                }
            }
        }
    }
}

Verwenden, wie diese:

Beispiel teilweise: (_MyPartial.cshtml)
Setzen Sie den html-Code in die if-und die js in die andere.

@if (ViewBag.ScriptPartialHtml ?? true)
    <p>I has htmls</p>
}
else {
    <script type="text/javascript">
        alert('I has javascripts');
    </script>
}

In Ihrem _Layout.cshtml, oder wo immer Sie wollen, dass die Skripte von der partials auf gerendert werden, setzen Sie die folgende (sobald): Es wird gerendert, nur das javascript von allen teiltönen, die auf der aktuellen Seite an dieser Stelle.

@{ Html.RenderPartialScripts(); }

Dann zu verwenden, die partielle, machen Sie einfach Folgendes: Es Rendern wird nur das html an dieser Stelle.

@{Html.RenderPartialWithScript("~/Views/MyController/_MyPartial.cshtml");}

InformationsquelleAutor Lomak

Gibt es eine Möglichkeit zum einfügen von Abschnitten in teilweise Ansichten, obwohl es nicht hübsch ist. Sie müssen Zugriff auf zwei Variablen aus der übergeordneten Ansicht. Da ein Teil Ihrer Teilansicht der Zweck ist, die zum erstellen dieser Abschnitt macht es Sinn, zu verlangen, diese Variablen.

Hier ist, was es aussieht wie, um einen Abschnitt einfügen, in der Teilansicht:

@model KeyValuePair<WebPageBase, HtmlHelper>
@{
    Model.Key.DefineSection("SectionNameGoesHere", () =>
    {
        Model.Value.ViewContext.Writer.Write("Test");
    });
}

Und in die Seite einfügen der Teilansicht...

@Html.Partial(new KeyValuePair<WebPageBase, HtmlHelper>(this, Html))

Sie können dieses Verfahren auch verwenden, um zu definieren, den Inhalt eines Abschnitts programmgesteuert in jeder Klasse.

Genießen!

InformationsquelleAutor Pluto

Ziel der OP ist, dass er will, um zu definieren, inline-Skripte in seine eingeschränkte Sicht, was ich davon ausgehen, dass dieses Skript ist ausschließlich für diesen Teil die Sicht, und der block in seiner Skript-Abschnitt.

Ich bekommen, die er haben will, die Teilweise Sicht auf sich selbst enthalten. Die Idee ist ähnlich Komponenten bei der Verwendung von Angular.

Mein Weg wäre, nur halten Sie die Skripte in der Teilansicht. Nun das problem ist beim aufrufen Teilansicht, kann das Skript ausführen, in der es vor allen anderen scripts (die in der Regel Hinzugefügt, um den unteren Rand der layout-Seite). In diesem Fall, Sie müssen nur die Partiellen View Skript warten, bis die anderen scripts. Es gibt mehrere Möglichkeiten, dies zu tun. Die einfachste, die ich verwendet habe, vor, eine Veranstaltung auf body.

Auf meinem layout, ich würde etwas auf den Boden wie diesem:

//global scripts
<script src="js/jquery.min.js"></script>
//view scripts
@RenderSection("scripts", false)
//then finally trigger partial view scripts
<script>
  (function(){
    document.querySelector('body').dispatchEvent(new Event('scriptsLoaded'));
  })();
</script>

Dann auf meine Teilansicht (unten):

<script>
  (function(){
    document.querySelector('body').addEventListener('scriptsLoaded', function() {

      //.. do your thing here

    });
  })();
</script>

Andere Lösung ist die Verwendung eines stack zu schieben Sie alle Ihre Skripts und rufen Sie jeweils am Ende. Andere Lösung, wie bereits erwähnt, ist RequireJS/AMD-Muster, das funktioniert wirklich gut, auch.

InformationsquelleAutor alans

Ich hatte ein ähnliches problem, wo ich eine master-Seite wie folgt:

@section Scripts {
<script>
    $(document).ready(function () {
        ...
    });
</script>
}

...

@Html.Partial("_Charts", Model)

aber den seitlichen Blick hing auf einige JavaScript im Script-Abschnitt. Ich löste es, indem die Codierung der partiellen view als JSON, lade diese in eine JavaScript-variable und dann mit diesem zu füllen, ein div, also:

@{
    var partial = Html.Raw(Json.Encode(new { html = Html.Partial("_Charts", Model).ToString() }));
}

@section Scripts {
<script>
    $(document).ready(function () {
        ...
        var partial = @partial;
        $('#partial').html(partial.html);
    });
</script>
}

<div id="partial"></div>

InformationsquelleAutor John M

Pluto Idee in ein schöner Weg:

CustomWebViewPage.cs:

    public abstract class CustomWebViewPage<TModel> : WebViewPage<TModel> {

    public IHtmlString PartialWithScripts(string partialViewName, object model) {
        return Html.Partial(partialViewName: partialViewName, model: model, viewData: new ViewDataDictionary { ["view"] = this, ["html"] = Html });
    }

    public void RenderScriptsInBasePage(HelperResult scripts) {
        var parentView = ViewBag.view as WebPageBase;
        var parentHtml = ViewBag.html as HtmlHelper;
        parentView.DefineSection("scripts", () => {
            parentHtml.ViewContext.Writer.Write(scripts.ToHtmlString());
        });
    }
}

Views\web.config:

<pages pageBaseType="Web.Helpers.CustomWebViewPage">

Anzeigen:

@PartialWithScripts("_BackendSearchForm")

Teilweise (_BackendSearchForm.cshtml):

@{ RenderScriptsInBasePage(scripts()); }

@helper scripts() {
<script>
    //code will be rendered in a "scripts" section of the Layout page
</script>
}

Layout-Seite:

@RenderSection("scripts", required: false)

InformationsquelleAutor PaulSanS

Gut, ich denke, die anderen Poster haben Sie ein Mittel, um direkt ein @ - Abschnitt in Ihrem teilweise (durch die Verwendung von 3rd-party-html-Helfer).

Aber ich rechne damit, dass, wenn Ihr Skript ist eng gekoppelt an die partielle, legen Sie einfach Ihren javascript direkt innerhalb einer inline - <script> tag innerhalb Ihrer Teil-und mit ihm getan werden (nur vorsichtig sein, von Skript Vervielfältigung, wenn Sie beabsichtigen, mit den teilweise mehr als einmal in einer einzigen Ansicht);

InformationsquelleAutor CShark

davon aus, dass Sie eine teilweise Ansicht mit dem Namen " _contact.cshtml, Ihr Kontakt kann eine juristische (name) oder einen physischen Gegenstand (Vorname, Nachname). Ihre Ansicht sollte man aufpassen was dargestellt werden kann und dass dies mit javascript. so verzögerte rendering-und JS in der Ansicht kann erforderlich sein.

die einzige Art, wie ich denke, wie kann es entfallen, wenn wir es schaffen eine unaufdringliche Art und Weise im Umgang mit der Benutzeroberfläche betrifft.

beachten Sie auch, dass MVC 6 eine sogenannte View-Komponente, auch MVC futures hatten einige ähnliche Sachen und Telerik unterstützt auch so eine Sache...

InformationsquelleAutor user4298890