Reference JavaScript from View in MVC Widget in Separate Ass

Posted by Community Admin on 05-Aug-2018 16:38

Reference JavaScript from View in MVC Widget in Separate Assembly

All Replies

Posted by Community Admin on 17-May-2016 00:00

I followed the tutorial here: docs.sitefinity.com/feather-create-widgets

I created a widget in it's own project. Then to the view, I added a button to call a js function. However, when referencing the .js file, sitefinity is unable to find it.  See view code below:

@using Telerik.Sitefinity.Mvc;
@using Telerik.Sitefinity.Frontend;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Web.UI;
 
@model MyFirstMvcWidget.Mvc.Models.MessageWidgetModel
 
<h1>
    @Html.Raw(Model.Message)
</h1>
 
<button type="button" onclick="showAlert()">Alert!</button>
 
@*This script tag does not work*@
<script src="~/Mvc/Scripts/MessageWidget/MessageWidget.js"></script>
 
@*This line does not work either*@
@Html.Script(Url.WidgetContent("/Mvc/Scripts/MessageWidget/MessageWidget.js"), "bottom")

It seems as though sitefinity is looking for these scripts in

SitefinityWebApp/Mvc/Scripts/MessageWidget/MessageWidget.js

Rather than looking in

MyFirstMvcWidget/Mvc/Scripts/MessageWidget/MessageWidget.js

 

Am I referencing this script incorrectly?

Posted by Community Admin on 20-May-2016 00:00

Hello,

If the script file is in the external assembly as well the only way to reference it is to serve it as embedded resource.

To do that firstly right click on the script, click Properties and set the Build Action to Embedded Resource. Secondly open the AssemblyInfo.cs file of the project and instruct it that the script is a web resource like so:

using System.Web.UI;
[assembly: WebResource("MyFirstMvcWidget.Mvc.Scripts.MessageWidget.MessageWidget.js", "application/x-javascript")]

Lastly reference it in the markup like so:

@Html.Script(Url.EmbeddedResource("FullTypeNameOfAClassInTheProject", "MyFirstMvcWidget.Mvc.Scripts.MessageWidget.MessageWidget.js"), "bottom")

As the first parameter you need to enter the full type name of an existing class in the project in order for the assembly to be resolved. For example you may enter "MyFirstMvcWidget.Mvc.Models.MessageWidgetModel"

Regards,
Velizar Bishurov
Telerik
 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 

Posted by Community Admin on 15-Jun-2016 00:00

And what about stylesheets?  Specifically the MIME type inside of AssemblyInfo.cs...  Thanks!

Posted by Community Admin on 15-Jun-2016 00:00

For CSS I used the following syntax in my AssemblyInfo.cs

[assembly: WebResource("SitefinityWebApp.Mvc.Styles.site.css", "text/css", PerformSubstitution = true)]

I forgot exactly where this is documented, but it works.

Posted by Community Admin on 28-Jun-2016 00:00

Can someone please explain this better.

I'm confused because if you look at the feather samples they are no referenced in this way.  They are referenced using this style?

@Html.Script(Url.WidgetContent("/Mvc/Scripts/MessageWidget/MessageWidget.js"), "bottom")

 

Also why does this document page not reflect whats being said here.

docs.sitefinity.com/feather-refer-to-resources-inside-views

Posted by Community Admin on 28-Jun-2016 00:00

Hi Damein. 

Case, expained above by Velizar, is for resource files, located  in another assembly. For example you created separate .dll for your widgets with embedded resources. And you can use some resources (js or css) from this .dll inside another dll. You can do it in this way:

@Html.Script(Url.EmbeddedResource("FullTypeNameOfAClassInTheProject", "MyFirstMvcWidget.Mvc.Scripts.MessageWidget.MessageWidget.js"), "bottom")

 

If you want to use your resources located in your assembly, you can follow this article http://docs.sitefinity.com/feather-refer-to-resources-inside-views and use something like that:

@Html.Script(Url.WidgetContent("Mvc/Scripts/Captcha/captcha.js"), "bottom", false)

Posted by Community Admin on 28-Jun-2016 00:00

Thanks. Sorry to me it didn't seem obvious if you were meaning using the script within your own assembly or from a another. Then looking at the feather sample they were referenced using the bottom method.

 

This thread is closed