I have a form, that form has it's own script, I want to add a script to the bundle if that form is included somewhere. I want to do this from the CSHTML of this form.
Basically I want this:
<form>
... code here
</form>
#includemyscript formscript.js
That is not how bundles work. You can create a new bundle containing all scripts plus your form script and render that one on this specific page, or just use the default bundle and additionally reference your script by a <script></script> tag.
Related
Problem:
Vue component renders on screen as <!---->
Setup:
Application is in C# Core 2.0
Vue version 2.5.16
Use gulp to copy static js files to /wwwroot
gulp.src('./node_modules/vue/dist/vue.min.js')
.pipe(gulp.dest('./wwwroot/dist/'))
Call to load Vue in HTML
<script src="~/dist/vue.min.js" asp-append-version="true"></script>
I have four components. Two use string literal templates and two use <template>. Of the later, only one displays.
<template id="paging-template"></template>
<template id="modal-template"></template>
Vue.component('modal',{ template:'#modal-template'});
Vue.component('paging',{ template:'#paging-template'});
Modal is called with <modal></modal> and Paging with <paging></paging>.
Modal displays properly. Paging displays as <!----> but using the Vue debugger addon in Chrome I can see the model and everything for the Paging component is there.
What am I missing?
Edit:
JSFiddle Link
This css is not mine, just the default on the Vue template they provide
There are a number of things wrong with your example(All of them are visible in the console tab of the browser):
Your class binding syntax is incorrect. All instances where you are trying to bind classes as follows:
v-bind:class="'disabled': previousDisabled"
Should be updated to:
v-bind:class="{disabled: previousDisabled}"
isNumber is not a method. It can be replaced with !Number.isNaN(
Updated JSFiddle
Here is where i include the ScriptBundle:
bundles.Add(new ScriptBundle("~/scripts").Include(
"~/Scripts/jquery.js", "~/Scripts/popper.js",
"~/Scripts/bootstrap.js", "~/Scripts/Index.js"));
When i debbug the application the script tags are rendered separately, and it works well. The problem is when i publish the project, the scripts are rendered in a single tag; i know that AspNet compress all the scripts in a single tag, but the web page does not detect the scripts and when i click on the link of the rendered tag, it directs me to a source code page (HTML) in which the scripts should be.
This is the tag:
<script src="/scripts?v=r8NL2JoYrRk4WG4L8aUu1037yymdncGQgFxOAcbEyw41"></script>
And this is the link: script_tag_link
Here is how the page of the link looks:
Here should be the compressed scripts
The ScriptBundle name, in this case "~/scripts", shouldn't match an existing folder in your application. Try changing it to "~/bundles".
In my _Layout page I have these scripts:
#Scripts.Render("~/Scripts/Scripts.js")
#Scripts.Render("~/Scripts/moment-with-locales.js")
#Scripts.Render("~/Scripts/moment.js")
#Scripts.Render("~/Scripts/bootstrap-datetimepicker.js")
#Scripts.Render("~/Scripts/DayPilot/daypilot-all.min.js")
So instead of writing all of those out, I want to create a bundle:
bundles.Add(new ScriptBundle("~/bundles/otherScripts").Include(
"~/Scripts/Scripts.js",
"~/Scripts/moment-with-locales.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/DayPilot/daypilot-all.min.js",
"~/Scripts/DayPilot/daypilot-common.src.js"));
So now in my _Layout page I have this:
#Scripts.Render("~/bundles/otherScripts")
Now in my bootstrap-datetimepicker.js I have edited 1 line.. and the change shows visually when I test this app locally.. but when I publish.. that line that I changed does not work..
The only way it works is if I exclude the bootstrap-datetimepicker.jsfile from the bundle and reference it in the _Layout page specifically.
How do I just combine all of those scripts into the bundle and it work properly when published?
I want to add a PartialView multiple times by pressing a button.
<div id="FilterRows">
#{Html.RenderAction("_FilterRow");}
</div>
<button id="newRow" type="button"
class="btn btn-sm btn-default"
style="width: 50px">+</button>
This piece of code works properly. But now i want to append the div FilterRows with another PartialView of _FilterRow at clicking on the button.
This is how it looks today:
Something like:
$(document).ready(function() {
$("#newRow").click(function() {
$("#Exec").append("<br>", #{Html.RenderAction("_FilterRow");} {
});
});
});
Is unfortunately not working. Any Ideas?
If you add an action which returns the partial rendered as a partial (ie. return PartialView("myView", model); then you can load using jQuery:
# Create a new element to contain...
var el = $('<div></div>');
$('#parent').append(el);
# ...the new content
el.load('#Url.Action("action", "controller"');
(This means running the JS in the razor view to get the correct URL generation. If most of the JS is in its own file, pass the URL from a little JS in the Razor file just for things like URLs.)
As long as your script is in the page (and not in an external .js file) you can use Razor inside js (although feedback directly from MicroSoft indicates that this is "unexpected", it works fine).
Have a look at the rendered html to see what's wrong.
In this case you need quotes (") around the render action:
$("#FilterRows").append("#{Html.RenderAction("_FilterRow");}");
This assumes a number of potential issues:
the 'RenderAction' can't have any newlines in the output
the 'RenderAction' can't have any quotes in the output (either use ' on the append and " inside the render or the other-way-around)
the action to be rendered cannot have any row-specific parameters (which appears to be ok in this case to add a new blank row)
the script must be in a .cshtml file (though you can get around this by setting a global/namespace'd variable in the .cshtml and have the actual code in a .js file)
you need to use the correct combination of #{}/#() and render/tostring
You might be better off with #Html.RenderPartial if you just want to render some html and don't need an action.
An alternative, perhaps more friendly, mechanism would be to have the blank-row already on the page (perhaps hidden) and use .clone().
I have a problem with rendering JavaScript file in _Layout.cshtml.
#section Scripts {
<script src="#Url.Content("~/Scripts/Custom/productsSuggests.js")"></script>
}
When I paste it to Index.cshtml (Home) it works, but only on this page. I need this script to work globally. I have partial view SearchBox in HomeViews catalog, and Controller Action in HomeController.
Because you are in the _Layout.cshtml view, it is likely the top level view. A section is a placeholder in a parent view.
Instead of your current code, try
#Scripts.Render("~/Scripts/Custom/productsSuggests.js")
In the Layout.cshtml you can use: #Scripts.Render("YOUR BUNDLES")
When will be add layout to another page this bundle will be global work.