how to use angular module 'ui-route' to find the templateUrl inside a directive and not get an error on MVC .NET

Question

how to use angular module 'ui-route' to find the templateUrl inside a directive and not get an error on MVC .NET""NetworkError: 403 Forbidden - http://www.myapp.com/~/App/XV-Directives/form-input-text-template.vbhtml"

1 solution: Here is an answer with out using the angular 'ui-rout' using the webconfig of the MVC project ClickHere ; this solution allows anyone to see your application file

var xvFormCreator = function () {
    //pass the template name and the data source of the template
    return {
        restrict: 'EA',
        scope: {                                                                                    
            sourceData: '=',
        },
        templateUrl: '~/App/XV-Directives/form-input-text-template.vbhtml'
    };
};


// html template string form  



/*  '  <div  class="form-group">' +
                              '<div class="col-md-6">' +
                                        '<label class="text-info">{{ sourceData.Qestion }} :</label>' +
                                 '</div>' +
                               '<div class="col-md-6">' +
                                                '<textarea' +
                                                '   name="{{ sourceData.Qestion }} "' +
                                                '   class="form-control"' +
                                                '     rows="1"'+
                                                '   placeholder="{{sourceData.TemplateType }}"' +
                                                '   value="{{ sourceData.Answer }}"></textarea>' +
                                '</div>' +
                      ' </div>'        


html template 

<div class="form-group">
    <div class="col-md-6">
        <label class="text-info">{{ sourceData.Qestion }} :</label>
    </div>
    <div class="col-md-6">
        <input name="{{ sourceData.Qestion }} "
               class="form-control"
               type="text"
               placeholder="{{sourceData.TemplateType }}"
               value="{{ sourceData.Answer }}" />
    </div>
</div>*/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Ho, my question is how can you achive the same behavior, (getting pages through the ui-route), instead of modifying the web-config file of the asp mvc5 project — Cesar Vega, Nov 26 '14 at 13:53
you are getting 403, probably because you have to login to your mvc app, make public your html that you aree going to use as templates for your router — pedrommuller, Nov 26 '14 at 14:18
I try that and now says that the image is not found 404 error , no matter how i modify the url still no getting to render the image, I think ui-route must have a solution for this, I still researching. — Cesar Vega, Dec 01 '14 at 15:39

pedrommuller · Answer 1 · 2014-12-01T16:09:24.777

MVC has it's own routing methods, the main issue you have is that you are using the raw view as a template something that's not optimal following the paradigm of mvc, asp.net.

for me the solution is pretty simple, stick to mvc approach in the server side and define a route for your template based on the view you want to render.

in other words instead of using ~/App/XV-Directives/form-input-text-template.vbhtml, create a route with a controller which is going to return a view that you need for the template, it doesn't matter if the view is just plain simple html view with no model, the important point is that you are going to have a route like '/home', '/home/action', '/home/template1' or whatever name you want to use there.

once you get that use that route defined, use it as the url in the client template as follows:

var xvFormCreator = function () {
    //pass the template name and the data source of the template
    return {
        restrict: 'EA',
        scope: {                                                                                    
            sourceData: '=',
        },
        templateUrl: '/home/template1'
    };
};

and by the way the symbol ~ is not going to work in the client side (because only works in mvc server side context) try to use relative full path of your app for any other resource you have.

try that out, I hope that helps!

I like your idea but the I would have to do a route for each template and each image I want to render, I think I will stick with the solution on the web config which is defining the handler at the web config file like this example from my web.config file : — Cesar Vega, Dec 01 '14 at 16:43

score 0 · Answer 2 · answered Dec 01 '14 at 16:51

So far this the best answer I have found editing the web.config file allowing access to the images and pages from the app.

 <system.webServer>  
<handlers>
  <add name="JavaScriptHandler" path="*.js" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="HtmlScriptHandler" path="*.html" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="SVGScriptHandler" path="*.svg" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="PNGScriptHandler" path="*.png" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
  <add name="JPEGScriptHandler" path="*.jpeg" verb="*" preCondition="integratedMode" type="System.Web.StaticFileHandler" />
 </handlers>

how to use angular module 'ui-route' to find the templateUrl inside a directive and not get an error on MVC .NET

2 Answers2