Injecting content into specific sections from a partial view ASP NET MVC 3 with Razor View Engine

Question

I have this section defined in my  Layout cshtml   RenderSection  Scripts   false    I can easily use it from a view     section Scripts          Stuff comes here       What I m struggling with is how to get some content injected inside this section from a partial view   Let s assume this is my view page     section Scripts          lt script gt            code comes here      lt  script gt      lt div gt      poo bar poo  lt  div gt    lt div gt     Html Partial   myPartial    lt  div gt    I need to inject some content inside the Scripts section from  myPartial partial view   How can I do this

User · Answer

Using Mvc Core you can create a tidy TagHelper scripts as seen below. This could easily be morphed into a section tag where you give it a name as well (or the name is taken from the derived type). Note that dependency injection needs to be setup for IHttpContextAccessor.

When adding scripts (e.g. in a partial)

<scripts>
    <script type="text/javascript">
        //anything here
    </script>
</scripts>

When outputting the scripts (e.g. in a layout file)

<scripts render="true"></scripts>

Code

public class ScriptsTagHelper : TagHelper
    {
        private static readonly object ITEMSKEY = new Object();

        private IDictionary<object, object> _items => _httpContextAccessor?.HttpContext?.Items;

        private IHttpContextAccessor _httpContextAccessor;

        public ScriptsTagHelper(IHttpContextAccessor httpContextAccessor)
        {
            _httpContextAccessor = httpContextAccessor;
        }

        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            var attribute = (TagHelperAttribute)null;
            context.AllAttributes.TryGetAttribute("render",out attribute);

            var render = false;

            if(attribute != null)
            {
                render = Convert.ToBoolean(attribute.Value.ToString());
            }

            if (render)
            {
                if (_items.ContainsKey(ITEMSKEY))
                {
                    var scripts = _items[ITEMSKEY] as List<HtmlString>;

                    var content = String.Concat(scripts);

                    output.Content.SetHtmlContent(content);
                }
            }
            else
            {
                List<HtmlString> list = null;

                if (!_items.ContainsKey(ITEMSKEY))
                {
                    list = new List<HtmlString>();
                    _items[ITEMSKEY] = list;
                }

                list = _items[ITEMSKEY] as List<HtmlString>;

                var content = await output.GetChildContentAsync();

                list.Add(new HtmlString(content.GetContent()));
            }
        }
    }

User · Answer

I had this problem and used this technique   Its the best solution i found which is very flexible    Also please vote here to add support for cumulative section declaration

User · Answer

If you do have a legitimate need to run some js from a partial  here s how you could do it  jQuery is required    lt script type  text javascript  gt              function scriptToExecute                   The script you want to execute when page is ready                        function runWhenReady                 if  window                scriptToExecute                                               else             setTimeout runWhenReady  100             runWhenReady     lt  script gt

User · Answer

Well  I guess the other posters have provided you with a means to directly include an  section within your partial  by using 3rd party html helpers    But  I reckon that  if your script is tightly coupled to your partial  just put your javascript directly inside an inline  lt script gt  tag within your partial and be done with it  just be careful of script duplication if you intend on using the partial more than once in a single view

User · Answer

Sections don t work in partial views and that s by design  You may use some custom helpers to achieve similar behavior  but honestly it s the view s responsibility to include the necessary scripts  not the partial s responsibility  I would recommend using the  scripts section of the main view to do that and not have the partials worry about scripts

User · Answer

This worked for me allowing me to co-locate javascript and html for partial view in same file  Helps with thought process to see html and related part in same partial view file     In View which uses Partial View called   MyPartialView cshtml    lt div gt       Html Partial   MyPartialView   lt  model for partial view gt               new ViewDataDictionary      Region    HTMLSection          lt  div gt    section scripts        Html Partial   MyPartialView   lt model for partial view gt                      new ViewDataDictionary      Region    ScriptSection               In Partial View file   model SomeType         var region   ViewData  Region   as string      if  region     HTMLSection           if  region     ScriptSection              lt script type  text javascript  gt       lt  script  gt

User · Answer

I had a similar problem  where I had a master page as follows    section Scripts    lt script gt        document  ready function                           lt  script gt           Html Partial   Charts   Model    but the partial view depended on some JavaScript in the Scripts section  I solved it by encoding the partial view as JSON  loading it into a JavaScript variable and then using this to populate a div  so          var partial   Html Raw Json Encode new   html   Html Partial   Charts   Model  ToString            section Scripts    lt script gt        document  ready function                          var partial    partial              partial   html partial html            lt  script gt      lt div id  partial  gt  lt  div gt

User · Answer

From the solutions in this thread  I came up with the following probably overcomplicated solution that lets you delay rendering any html  scripts too  within a using block   USAGE  Create the  section    Typical scenario  In a partial view  only include the block one time no matter how many times the partial view is repeated in the page    using  Html Delayed isOnlyOne   some unique name for this section           lt script gt          someInlineScript         lt  script gt     In a partial view  include the block for every time the partial is used    using  Html Delayed           lt b gt show me multiple times   Model Whatever lt  b gt     In a partial view  only include the block once no matter how many times the partial is repeated  but later render it specifically by name when-i-call-you    using  Html Delayed  when-i-call-you   isOnlyOne   different unique name           lt b gt show me once by name lt  b gt       lt span gt  Model First   Value lt  span gt       Render the  sections    i e  display the delayed section in a parent view    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             lt summary gt          Delegate script resource etc injection until the end of the page          lt para gt  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   lt  para gt           lt  summary gt      private class DelayedInjectionBlock   IDisposable                lt summary gt              Unique internal storage key              lt  summary gt          private const string CACHE KEY    DCCF8C78-2E36-4567-B0CF-FE052ACCE309       DelayedInjectionBlocks                 lt summary gt              Internal storage identifier for remembering unique isOnlyOne items              lt  summary gt          private const string UNIQUE IDENTIFIER KEY   CACHE KEY                lt summary gt              What to use as internal storage identifier if no identifier provided  since we can t use null as key               lt  summary gt          private const string EMPTY IDENTIFIER                     lt summary gt              Retrieve a context-aware list of cached output delegates from the given helper  uses the helper s context rather than singleton HttpContext Current Items              lt  summary gt               lt param name  helper  gt the helper from which we use the context lt  param gt               lt param name  identifier  gt optional unique sub-identifier for a given injection block lt  param gt               lt returns gt list of delayed-execution callbacks to render internal content lt  returns gt          public static Queue lt string gt  GetQueue HtmlHelper helper  string identifier   null                return  GetOrSet helper  new Queue lt string gt     identifier    EMPTY IDENTIFIER                           lt summary gt              Retrieve a context-aware list of cached output delegates from the given helper  uses the helper s context rather than singleton HttpContext Current Items              lt  summary gt               lt param name  helper  gt the helper from which we use the context lt  param gt               lt param name  defaultValue  gt 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 lt  param gt               lt param name  identifier  gt optional unique sub-identifier for a given injection block lt  param gt               lt returns gt list of delayed-execution callbacks to render internal content lt  returns gt          private static T  GetOrSet lt T gt  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                            lt summary gt              Get the storage  but if it doesn t exist or isn t the expected type  then create a new  bucket               lt  summary gt               lt param name  helper  gt  lt  param gt               lt returns gt  lt  returns gt          public static Dictionary lt string  object gt  GetStorage HtmlHelper helper                var storage   helper ViewContext HttpContext Items CACHE KEY  as Dictionary lt string  object gt               if  storage    null  helper ViewContext HttpContext Items CACHE KEY     storage   new Dictionary lt string  object gt                  return storage                      private readonly HtmlHelper helper          private readonly string identifier          private readonly string isOnlyOne                lt summary gt              Create a new using block from the given helper  used for trapping appropriate context               lt  summary gt               lt param name  helper  gt the helper from which we use the context lt  param gt               lt param name  identifier  gt optional unique identifier to specify one or many injection blocks lt  param gt               lt param name  isOnlyOne  gt 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  lt  param gt          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                          lt summary gt              Append the internal content to the context s cached list of output delegates              lt  summary gt          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 lt string  int gt     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                                           lt summary gt           lt para gt Start a delayed-execution block of output -- this will be rendered printed on the next call to  lt see cref  RenderDelayed   gt   lt  para gt           lt para gt           lt example gt          Print once in  default block   usually rendered at end via  lt code gt  Html RenderDelayed   lt  code gt     Code           lt code gt           using  Html Delayed                   lt b gt show at later lt  b gt               lt span gt  Model Name lt  span gt              etc                    lt  code gt           lt  example gt           lt  para gt           lt para gt           lt example gt          Print once  i e  if within a looped partial   using identified block via  lt code gt  Html RenderDelayed  one-time   lt  code gt    Code           lt code gt           using  Html Delayed  one-time   isOnlyOne   one-time                   lt b gt show me once lt  b gt               lt span gt  Model First   Value lt  span gt                     lt  code gt           lt  example gt           lt  para gt           lt  summary gt           lt param name  helper  gt the helper from which we use the context lt  param gt           lt param name  injectionBlockId  gt optional unique identifier to specify one or many injection blocks lt  param gt           lt param name  isOnlyOne  gt 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  lt  param gt           lt returns gt using block to wrap delayed output lt  returns gt      public static IDisposable Delayed this HtmlHelper helper  string injectionBlockId   null  string isOnlyOne   null            return new DelayedInjectionBlock helper  injectionBlockId  isOnlyOne                   lt summary gt          Render all queued output blocks injected via  lt see cref  Delayed   gt            lt para gt           lt example gt          Print all delayed blocks using default identifier  i e  not provided           lt code gt           using  Html Delayed                   lt b gt show me later lt  b gt               lt span gt  Model Name lt  span gt              etc                    lt  code gt          -- then later --          lt code gt           using  Html Delayed                   lt b gt more for later lt  b gt              etc                    lt  code gt          -- then later --          lt code gt           Html RenderDelayed      will print both delayed blocks          lt  code gt           lt  example gt           lt  para gt           lt para gt           lt example gt          Allow multiple repetitions of rendered blocks  using same  lt code gt  Html Delayed      lt  code gt  as before   Code           lt code gt           Html RenderDelayed removeAfterRendering  false      will print             Html RenderDelayed      will print again because not removed before             lt  code gt           lt  example gt           lt  para gt            lt  summary gt           lt param name  helper  gt the helper from which we use the context lt  param gt           lt param name  injectionBlockId  gt optional unique identifier to specify one or many injection blocks lt  param gt           lt param name  removeAfterRendering  gt only render this once lt  param gt           lt returns gt rendered output content lt  returns gt      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   lt  -- delayed-block   0  -- gt    injectionBlockId   endif                                    count faster than  any             while  stack Count  gt  0                    sb AppendLine stack Dequeue                               return MvcHtmlString Create sb ToString                         return MvcHtmlString Create   if DEBUG                 string Format   lt  -- delayed-block   0  -- gt    injectionBlockId      endif             string Join Environment NewLine  stack

User · Answer

Following the unobtrusive principle  it s not quite required for   myPartial  to inject content directly into scripts section  You could add those partial view scripts into separate  js file and reference them into  scripts section from parent view

User · Answer

There is a fundamental flaw in the way we think about web  especially when using MVC  The flaw is that JavaScript is somehow the view s responsibility  A view is a view  JavaScript  behavioral or otherwise  is JavaScript  In Silverlight and WPF s MVVM pattern we we re faced with  view first  or  model first   In MVC we should always try to reason from the model s standpoint and JavaScript is a part of this model in many ways    I would suggest using the AMD pattern  I myself like RequireJS   Seperate your JavaScript in modules  define your functionality and hook into your html from JavaScript instead of relying on a view to load the JavaScript  This will clean up your code  seperate your concerns and make life easier all in one fell swoop

User · Answer

assume you have a partial view called  contact cshtml  your contact can be a legal  name  or a physical subject  first name  lastname   your view should take care about what s rendered and that can be achived with javascript  so delayed rendering and JS inside view may be needed   the only way i think  how it can be ommitted  is when we create an unobtrusive way of handling such UI concerns   also note that MVC 6 will have a so called View Component  even MVC futures had some similar stuff and Telerik also supports such a thing

User · Answer

I ran into a nearly identical problem the other day  except that the partial view was a response to an AJAX request  In my situation  the partial was actually a full page  but I wanted it to be accessible as a partial from other pages   If you want to render sections in a partial  the cleanest solution is to create a new layout and use a ViewBag variable  This does not work with  Html Partial   or the new  lt partial gt  lt  partial gt   use AJAX   Main view  that you want to be rendered as a partial elsewhere     if ViewBag Partial    true        Layout     layoutPartial       lt div gt             lt  div gt        section Scripts        lt script type  text javascript  gt                     lt  script gt      Controller   public IActionResult GetPartial          ViewBag Partial   true         Do not return PartialView      return View   path to view        layoutPartial cshtml  new     RenderSection  Scripts    RenderBody     Then use AJAX in your page   If you want to render the page in the main layout  not a partial   then don t set ViewBag Partial   true  No HTML helpers necessary

User · Answer

choicely  you could use a your Folder index cshtml as a masterpage then add section scripts  Then  in your layout you have    RenderSection  scripts   required  false     and your index cshtml    section scripts        Scripts Render    Scripts file js       and it will working over all your partialviews  It work for me

User · Answer

I have just added this code on my partial view and solved the problem  though not very clean  it works  You have to make sure the the Ids of the objects you are rendering    lt script gt        document  ready function                  Profile ProfileID   selectmenu   icons    button   ui-icon-circle-arrow-s                    TitleID FK   selectmenu   icons    button   ui-icon-circle-arrow-s                    CityID FK   selectmenu   icons    button   ui-icon-circle-arrow-s                    GenderID FK   selectmenu   icons    button   ui-icon-circle-arrow-s                    PackageID FK   selectmenu   icons    button   ui-icon-circle-arrow-s                 lt  script gt

User · Answer

This is quite a popular question  so I ll post my solution up  I had the same problem and although it isn t ideal  I think it actually works quite well and doesn t make the partial dependant on the view  My scenario was that an action was accessible by itself but also could be embedded into a a view - a google map  In my  layout I have   RenderSection  quot body scripts quot   false   In my index view I have   Html Partial  quot Clients quot    section body scripts        Html Partial  quot Clients Scripts quot      In my clients view I have  all the map and assoc  html    section body scripts        Html Partial  quot Clients Scripts quot      My Clients Scripts view contains the javascript to be rendered onto the page  This way my script is isolated and can be rendered into the page where required  with the body scripts tag only being rendered on the first occurrence that the razor view engine finds it  That lets me have everything separated - it s a solution that works quite well for me  others may have issues with it  but it does patch the  quot by design quot  hole

User · Answer

Pluto s idea in a nicer way   CustomWebViewPage cs       public abstract class CustomWebViewPage lt TModel gt    WebViewPage lt TModel gt         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        gt                parentHtml ViewContext Writer Write scripts ToHtmlString                           Views web config    lt pages pageBaseType  Web Helpers CustomWebViewPage  gt    View    PartialWithScripts   BackendSearchForm     Partial   BackendSearchForm cshtml       RenderScriptsInBasePage scripts         helper scripts      lt script gt        code will be rendered in a  scripts  section of the Layout page  lt  script gt      Layout page    RenderSection  scripts   required  false

User · Answer

The first solution I can think of  is to use ViewBag to store the values that must be rendered    Onestly I never tried if this work from a partial view  but it should imo

User · Answer

You can use these Extension Methods   Save as 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 lt string gt                                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                                                       Use like this   Example partial    MyPartial cshtml  Put the html in the if  and the js in the else    if  ViewBag ScriptPartialHtml    true       lt p gt I has htmls lt  p gt    else        lt script type  text javascript  gt          alert  I has javascripts         lt  script gt      In your  Layout cshtml  or wherever you want the scripts from the partials on to be rendered  put the following  once   It will render only the javascript of all partials on the current page at this location      Html RenderPartialScripts        Then to use your partial  simply do this  It will render only the html at this location     Html RenderPartialWithScript    Views MyController  MyPartial cshtml

User · Answer

There is a way to insert sections in partial views  though it s not pretty  You need to have access to two variables from the parent View  Since part of your partial view s very purpose is to create that section  it makes sense to require these variables   Here s what it looks like to insert a section in the partial view    model KeyValuePair lt WebPageBase  HtmlHelper gt         Model Key DefineSection  SectionNameGoesHere        gt                Model Value ViewContext Writer Write  Test                And in the page inserting the partial view      Html Partial new KeyValuePair lt WebPageBase  HtmlHelper gt  this  Html     You can also use this technique to define the contents of a section programmatically in any class   Enjoy

User · Answer

I had the similar problem solved it with this    section       RenderSection         required  false      Thats a pretty way to inject i guesse

User · Answer

You can t need using sections in partial view   Include in your Partial View  It execute the function after jQuery loaded  You can alter de condition clause for your code    lt script type  text javascript  gt      var time   setInterval function          if  window jQuery    undefined            window clearInterval time              Begin           document  ready function                                              End           10    lt  script gt    Julio Spader

User · Answer

I solved this a completely different route  because I was in a hurry and didn t want to implement a new HtmlHelper    I wrapped my Partial View in a big if-else statement    if   bool ViewData  ShouldRenderScripts      true      Scripts  else     Html     Then  I called the Partial twice with a custom ViewData    Html Partial  MyPartialView   Model       new ViewDataDictionary      ShouldRenderScripts   false        section scripts       Html Partial  MyPartialView   Model           new ViewDataDictionary      ShouldRenderScripts   true

User · Answer

I had this issue today  I ll add a workaround that uses  lt script defer gt  as I didn t see the other answers mention it    on a JS file somewhere  i e partial-view-caller js        gt   lt your partial view script gt         in your Partial View  lt script src  quot   partial-view-caller js quot  defer gt  lt  script gt     you can actually just straight call your partial view script living in an external file - I just prefer having an initialization method     Code above is an excerpt from a quick post I made about this question

User · Answer

The goal of the OP is that he wants to define inline scripts into his Partial View  which I assume that this script is specific only to that Partial View  and have that block included into his script section   I get that he wants to have that Partial View to be self contained  The idea is similar to components when using Angular    My way would be to just keep the scripts inside the Partial View as is  Now the problem with that is when calling Partial View  it may execute the script in there before all other scripts  which is typically added to the bottom of the layout page   In that case  you just have the Partial View script wait for the other scripts  There are several ways to do this  The simplest one  which I ve used before  is using an event on body    On my layout  I would have something on the bottom like this      global scripts  lt script src  js jquery min js  gt  lt  script gt     view scripts  RenderSection  scripts   false     then finally trigger partial view scripts  lt script gt     function        document querySelector  body   dispatchEvent new Event  scriptsLoaded              lt  script gt    Then on my Partial View  at the bottom     lt script gt     function        document querySelector  body   addEventListener  scriptsLoaded   function                  do your thing here                   lt  script gt    Another solution is using a stack to push all your scripts  and call each one at the end  Other solution  as mentioned already  is RequireJS AMD pattern  which works really well also

[asp.net] Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine

Examples related to asp.net

Examples related to asp.net-mvc

Examples related to asp.net-mvc-3

Examples related to razor

Examples related to partial-views