Ho un .csHtmlfile -razor con una funzione javascript che utilizza la @Url.Contentfunzione C # all'interno per l'URL ajax.
Voglio spostare quella funzione in un .jsfile referenziato dalla mia vista.

Il problema è che javascript non "conosce" il @simbolo e non analizza il codice C #.
C'è un modo per fare riferimento ai .jsfile dalla vista con il simbolo "@"?

Potresti usare data-*attributi HTML5 . Supponiamo che tu voglia eseguire un'azione quando si fa clic su un elemento DOM come un div. Così:

<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>

e poi nel tuo file javascript separato potresti lavorare in modo discreto con il DOM:

$('#foo').click(function() {
    var url = $(this).data('url');
    // do something with this url
});

In questo modo potresti avere una separazione pura tra markup e script senza che tu abbia mai bisogno di tag lato server nei tuoi file javascript.

Beh, ho appena trovato un motore a rasoio su nuget che lo fa! Il significato risolve la @sintassi!
Il suo nome è RazorJS .

Il pacchetto Nuget

Aggiornamento 2016:
il pacchetto non è stato aggiornato per 5 anni e il collegamento al sito del progetto è morto. Non consiglio alle persone di usare più questa libreria.

Un modo per affrontare il problema è:

Aggiunta di una vista parziale con le funzioni javascript alla vista.
In questo modo puoi usare il @simbolo e tutte le tue javascriptfunzioni sono separate dalla vista.

Hai due opzioni:

• Utilizzare il valore come parametro nella funzione e collegare nella vista
• Crea uno spazio dei nomi (invece di una variabile di livello pubblico che è considerata una cattiva pratica in JS) e imposta questo valore nella parte superiore della pagina e quindi usalo nel tuo js

Per esempio:

 var MyCompany = 
 {
   MyProject: {
                  MyVariable:""
               }
  };

E poi, secondo te, impostalo:

MyCompany.MyProject.MyVariable = @....

AGGIORNARE

Potresti chiederti che nessuno è buono a causa dell'accoppiamento, beh è vero, stai accoppiando js e view. Questo è il motivo per cui gli script devono essere ignari della posizione in cui vengono eseguiti, quindi è un sintomo di un'organizzazione non ottimale dei file.

Comunque c'è una terza opzione per creare un motore di visualizzazione ed eseguire i file js contro il rasoio e inviare i risultati indietro. Questo è più pulito ma molto più lento, quindi non consigliato.

Per ottenere la @variabile nel tuo file .js dovrai usare una variabile globale e impostare il valore di quella variabile dalla vista mvc che sta usando quel file .js.

File JavaScript:

var myValue;

function myFunc() {
  alert(myValue);
}

File di visualizzazione MVC:

<script language="text/javascript">
    myValue = @myValueFromModel;
</script>

Assicurati solo che qualsiasi chiamata alla tua funzione avvenga DOPO che il valore è stato impostato dalla vista.

Probabilmente questo non è l'approccio giusto. Considerando la separazione delle preoccupazioni. Dovresti avere un data injectorsulla tua JavaScriptclasse e che nella maggior parte dei casi è i dati JSON.

Crea un file JS nella tua scriptcartella e aggiungi questo riferimento al tuoView

<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>

Ora, considera una JavaScriptclasse letterale nel tuo yourJsFile.js:

var contentSetter = {
    allData: {},
    loadData: function (data) {
        contentSetter.allData = eval('(' + data + ')');
    },
    setContentA: function () {
        $("#contentA").html(allData.contentAData);
    },
    setContentB: function () {
        $("#contentB").html(allData.contentAData);
    }
};

Dichiara anche una classe

public class ContentData
{
    public string ContentDataA { get; set }
    public string ContentDataB { get; set }
}

Ora, dal tuo Actionfai questo:

public ActionResult Index() {
    var contentData = new ContentData();
    contentData.ContentDataA = "Hello";
    contentData.ContentDataB = "World";
    ViewData.Add("contentData", contentData);
}

E dal tuo punto di vista:

<div id="contentA"></div>
<div id="contentB"></div>

<script type="text/javascript">
    contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])');
    contentSetter.setContentA();
    contentSetter.setContentB();
</script>

Recentemente ho scritto sul blog di questo argomento: Generazione di file JavaScript esterni utilizzando viste Razor parziali .

La mia soluzione è utilizzare un attributo personalizzato ( ExternalJavaScriptFileAttribute) che esegue il rendering di una vista Razor parziale così com'è e quindi la restituisce senza i <script>tag circostanti . Ciò lo rende un file JavaScript esterno valido.

Di solito inserisco JS che necessita dell'accesso alle proprietà del modello, nelle funzioni e poi passo il @something nella vista. Per esempio

<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
  alert(somethingPresentInTheView);
}
</script>

nella vista aggiungo l'invocazione della funzione tramite (solo un esempio):

<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />

Penso che tu sia bloccato a dover mettere quel codice JS nella vista. Il parser Razor, per quanto ne so, non esaminerà i file .js, quindi qualsiasi cosa tu abbia che usi @non funzionerà. Inoltre, come hai notato, a Javascript stesso non piace questo @carattere in giro senza motivo, a parte, ad esempio, in una stringa.