I have been banging my head up against the wall for several hours and I need help...
I want to be able to reference my JS in an external file rather than inline @section Scripts for an associated cshtml file.
I have tried both of the approaches below and none of them work.
@Html.RazorJSInclude("~/Scripts/Categories/Create.js");
$.getScript("~/Scripts/Categories/Create.js", function ()
{
contentCategoriesCreate();
});
The package RazorJSInclude just doesn't work as advertised. I don't see anywhere when debugging that this js file is pulled in.
No matter what I try with the jQuery getScript method, I cannot get it to resolve the url I am pointing to.
Note that with the latter, I did include a bundle in my Layout page and the Bundle.config file.
If I include the script inline, everything works fine, but I want to decouple the inline JS from my HTML.
What is the simplest way I can do this?
EDIT
I included the Url.Content as suggested which I forgot to mention that I already tried. It didn't work (see screenshot).
I also tried the Razor Syntax: @Url.Content which also did not work. See below screenshot.
I don't know how something so simple to supposedly be able to do, is turning out to be a nightmare...
Any other suggestions would be helpful....
EDIT 2
Lastly, what I have done, was to include the script inside my bundling. However, that still did not work. This time, the script loaded with no errors, but when I click on the "Create" button, the click function doesn't fire.
Here is pertinent code inside my BundleConfig.js file:
bundles.Add(new ScriptBundle("~/bundles/jsViews").Include(
"~/Scripts/Categories/Create.js",
"~/Scripts/AntiForgeryToken.js"));
Here is pertinent code inside my _Layout.js file:
@Scripts.Render("~/bundles/jsViews")
Here is the pertinent code inside my Create.cshtml file:
@section Scripts {
<script>
$(document).ready(function ()
{
if (typeof contentCreateCategory == "function")
contentCreateCategory();
});
</script>
}
Here is the pertinent code inside my external JS file:
function contentCreateCategory()
{
function contentCategoriesCreate()
{
$('#btnCategoryCreate').click(function (e)
{
var form = $('#form1');
if (form.valid())
{
createCategory();
}
return false;
});
}
}
function createCategory()
{
var category_Input = {
CategoryDescription: $('#CategoryDescription').val()
};
var Url = $("#url").val();
$.ajax({
url: Url,
data: AddAntiCSRFToken(JSON.stringify(category_Input)),
dataType: "html",
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
async: false,
success: function (data, status)
{
// Record added
},
error: function (data, status, xhr)
{
alert(status + '\n' + xhr + '\n' + data);
}
});
};
Finally, here is the screenshot that proves the JS is loading, but nothing happens when I click the "Create" button. Note again, that when I include the script inline within the Create.cshtml file, everything works fine. I cannot do any more than what I've done. I've given the code & screenshots. I'm hoping somebody can please let me know what I need to do to get this to work...
<script src="@Url.Content("~/Scripts/Categories/Create.js")" type="text/javascript"></script>
– Wayne Ellery Jan 18 at 0:53