We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

Managing partial views and scripts with jQuery[Answered] RSS

5 replies

Last post Jun 02, 2020 02:55 PM by bruce (sqlwork.com)

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
JDias
Member

7 Points

18 Posts
Managing partial views and scripts with jQuery

Jun 01, 2020 03:39 PM|JDias|LINK
I am creating an app that has several partial views, some of them loaded by jQuery. These partial views consist of a html body, scripts and html modals.

In order not to load twice the same script and modal, mainly, not to load modals inside the main form, once in my app the modals must be outside of the form, I need to manage the modals and the scripts. What's the best way?

I created a partial view that loads with jQuery into the active page, with code:
```
<section id="body">
   @RenderBody()
</section>

<section id="scripts">
    @RenderSection("Scripts", required: false)
    
    @Html.RenderPartialSectionScripts()
</section>
```
The contents of this view must be loaded into different parts of the active page, once they have modals and scripts that mustn't be placed inside the main form.

Thus, I programmed this script in the active view (the view that was originally loaded...):
```
            $.get("@Url.Action("GetPartial","Home")?" + $.param(p), function (data) {
                var body = $("section#body", data);
                var scripts = $("section#scripts", data);

                $("div.itf-main-div").html(body);
                $("body").append(scripts);
            });
```
However, this script is wrong, once it loads in the active page, blank sections...

Does anyone know how to load the sections of the partial view (GetPartial) in the correct place?

How can I use a selector in raw html in data?
- Reply
bruce (sqlwo...
All-Star

58474 Points

15790 Posts

Re: Managing partial views and scripts with jQuery

Jun 01, 2020 03:53 PM|bruce (sqlwork.com)|LINK

when you render a partial, the layout is set to null, so only the page body is rendered (but no @sections). for more help, show a sample page

note: while setInnerHTML, ignore scripts, jQuery.html(), finds the script blocks in the html, and executes them.

bruce (sqlwork.com)
- Reply
JDias
Member

7 Points

18 Posts
Re: Managing partial views and scripts with jQuery

Jun 01, 2020 04:22 PM|JDias|LINK
@bruce, in my partial view I set the layout, when it is loaded by jQuery, to "_Empty", which is the "view" that I presented above. When this partial view is loaded by the usual request, I set the layout to "_Layout", which is a proper layout view.

Thus, the scripts and modals are rendered by RenderSection and RenderPartialScripts... My problem is to divide the loaded page in sections #body and #scripts...

Is jQuery .filter the solution? I tried and it appeared to work well... Code:
```
            $.get("@Url.Action("GetPartial","Home")?" + $.param(p), function (data) {
                var body = $(data).filter("section#body");
                var scripts = $(data).filter("section#scripts");

                $("div.itf-main-div").html(body);
                $("body").append(scripts);
            });
```
Besides inserting modals (which have their own form) into forms, I have the problem of duplication of modals and scripts, which I try to, at least partially, solve with the separation of the sections #body and #scripts.

Any idea on managing these scripts and modals?
- Reply
bruce (sqlwo...
All-Star

58474 Points

15790 Posts
Re: Managing partial views and scripts with jQuery

Jun 01, 2020 08:34 PM|bruce (sqlwork.com)|LINK
just show a sample of the rendered partial view, and what you want extracted.

you should not try to manage scripts, let jquery do that. if the page html defines a function, when jquery executes the script, it will replace the existing function. your code to append scripts to the boy, just appends the scripts text, they are not parted, nor available to javascript.

I don't know why you just don't use standard partial views, which should just return the page html, that you can load into any div.
```
$("div.itf-main-div").load("@Url.Action("GetPartial","Home")?" + $.param(p));
```
bruce (sqlwork.com)

JDias

Member

7 Points

18 Posts

Re: Managing partial views and scripts with jQuery

Jun 02, 2020 08:14 AM|JDias|LINK

So, I have a partial view _Main.cshtml like this:

@{
    if (ViewBag.IsIndexCshtmlCalling ?? false)
    {
        Layout = null;
    }
    else
    {
        Layout = "_Empty";
    }
}
@model MainViewModel

<div class="row">
    <div class="col-lg-5 col-sm-6">
        <div class="itf-calendar-div">
            @await Html.PartialAsync("_Cal", Model.Data)
        </div>
        <hr />
        <div class="itf-carkms-div">
            @await Html.PartialAsync("_Car", Model.Car)
        </div>
    </div>
    <div class="col-lg-7 itf-day-div">
        @await Html.PartialAsync("_DayData", Model.DayData)
    </div>
</div>
<hr />
<div class="row itf-deleg-div itf-font-md">
    <div class="col-4">
        @Html.DropDownList("ChosenPerson", (SelectList)ViewBag.Colaborators, new { @class = "form-control itf-font-md", @onchange = "ReloadData();" })
    </div>
    <div class="itf-btn-div col-8">
        @await Html.PartialAsync("_SubmitButtons")
    </div>
</div>

@Html.PartialSectionScripts(
    @<script type="text/javascript">
        // functions for partial loading...
        function GrabParams() {
...
        }

        function ReloadData() {
            var p = GrabParams();

            $.post("@Url.Action("GetCarKms", "Home")", p, function (data) {
                $("div.itf-carkms-div").html(data);

                $.post("@Url.Action("GetDayData","Home")", p, function (data) {
                    $("div.itf-day-div").html(data);

                    $.post("@Url.Action("GetButtons","Home")", p, function (data) {
                        $("div.itf-btn-div").html(data);

                    });

                });

            });

        }
    </script>
)

which is called from the view Index.cshtml (inside the main form), which has a proper layout. Also, the loaded partial views have their own scripts.

Now, I also want to call this partial view from javascript when I want to load the view's information without making a complete reload of the page. This is loaded inside of a form (in Index.cshtml). The scripts existing in this partial view should be also rendered. So, I use the layout _Empty.cshtml (the one I showed in my question).

When, I load this view from javascript, a problem arises. The scripts (which also contain some html modals) are loaded into the main form, and duplication of ids occur (same ids in modals and main html), making the post of the form data unreliable. So, I try to load the scripts and modals in a separate part of the active page, outside the main form.

Of course, I could have a unified script file with all my javascript and modals... In this program, I followed the approach of having the scripts nearby the html that needs them. Maybe this is a bag approach...

- Reply
bruce (sqlwo...
All-Star

58474 Points

15790 Posts

Re: Managing partial views and scripts with jQuery

Jun 02, 2020 02:55 PM|bruce (sqlwork.com)|LINK

when you add html and JavaScript to dom, it’s added to the global namespace. Partials are not modules client side. If you include JavaScript with you dynamic loaded content, it will be executed. It may replace functions with the same name.

you should design your JavaScript knowing that it can get loaded more than once. It can check if an ID exists before adding.

bruce (sqlwork.com)

‹ Previous Thread|Next Thread ›