Reference JavaScript from View in MVC Widget in Separate Assembly - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Reference JavaScript from View in MVC Widget in Separate Assembly

  • Reference JavaScript from View in MVC Widget in Separate Assembly
  • 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?

  • 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
     
  • And what about stylesheets?  Specifically the MIME type inside of AssemblyInfo.cs...  Thanks!
  • 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.

  • 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)

  • 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

  • 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.