Mam .csHtml
plik -razor z funkcją javascript, która używa funkcji @Url.Content
C # wewnątrz dla adresu URL ajax.
Chcę przenieść tę funkcję do .js
pliku, do którego odwołuje się mój widok.
Problem polega na tym, że javascript nie „zna” @
symbolu i nie analizuje kodu C #.
Czy istnieje sposób odwoływania się do .js
plików z widoku za pomocą symbolu „@”?
c#
javascript
asp.net-mvc
asp.net-mvc-3
razor
gdoron wspiera Monikę
źródło
źródło
Odpowiedzi:
Możesz użyć
data-*
atrybutów HTML5 . Załóżmy, że chcesz wykonać jakąś akcję po kliknięciu jakiegoś elementu DOM, takiego jak div. Więc:<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>
a następnie w oddzielnym pliku javascript możesz dyskretnie pracować z DOM:
$('#foo').click(function() { var url = $(this).data('url'); // do something with this url });
W ten sposób możesz mieć czystą separację między znacznikami a skryptem bez konieczności stosowania jakichkolwiek tagów po stronie serwera w plikach javascript.
źródło
Cóż, właśnie znalazłem silnik maszynki do golenia na Nuget, który to robi! Znaczenie rozwiązuje
@
składnię!Nazywa się RazorJS .
Nuget pakiet
Aktualizacja 2016:
pakiet nie był aktualizowany przez 5 lat, a link do witryny projektu jest martwy. Nie polecam już ludziom korzystania z tej biblioteki.
źródło
Jednym ze sposobów rozwiązania tego problemu jest:
Dodanie częściowego widoku z funkcjami javascript do widoku.
W ten sposób możesz użyć
@
symbolu, a wszystkiejavascript
funkcje są oddzielone od widoku.źródło
Masz dwie możliwości:
Na przykład:
var MyCompany = { MyProject: { MyVariable:"" } };
A potem twoim zdaniem ustaw to:
MyCompany.MyProject.MyVariable = @....
AKTUALIZACJA
Możesz się zastanawiać, że żadna z nich nie jest dobra ze względu na połączenie, cóż, to prawda, łączysz js i widok. Dlatego skrypty muszą być nieświadome lokalizacji, w której działają, więc jest to objaw nieoptymalnej organizacji plików.
W każdym razie istnieje trzecia opcja, aby utworzyć silnik widoku i uruchomić pliki js na maszynce do golenia i odesłać wyniki. Jest to czystsze, ale znacznie wolniejsze, więc też nie jest zalecane.
źródło
Aby
@
umieścić zmienną w pliku .js, musisz użyć zmiennej globalnej i ustawić wartość tej zmiennej z widoku mvc, który korzysta z tego pliku .js.Plik JavaScript:
var myValue; function myFunc() { alert(myValue); }
Plik widoku MVC:
<script language="text/javascript"> myValue = @myValueFromModel; </script>
Po prostu upewnij się, że wszelkie wywołania Twojej funkcji następują PO ustawieniu wartości przez widok.
źródło
Prawdopodobnie nie jest to właściwe podejście. Rozważenie rozdzielenia obaw. Powinieneś mieć
data injector
na swojejJavaScript
klasie i która jest w większości przypadków danymiJSON
.Utwórz plik JS w swoim
script
folderze i dodaj to odniesienie do swojegoView
<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>
Rozważ teraz
JavaScript
dosłowną klasę w swoimyourJsFile.js
:var contentSetter = { allData: {}, loadData: function (data) { contentSetter.allData = eval('(' + data + ')'); }, setContentA: function () { $("#contentA").html(allData.contentAData); }, setContentB: function () { $("#contentB").html(allData.contentAData); } };
Zadeklaruj również klasę
public class ContentData { public string ContentDataA { get; set } public string ContentDataB { get; set } }
Teraz
Action
zrób to:public ActionResult Index() { var contentData = new ContentData(); contentData.ContentDataA = "Hello"; contentData.ContentDataB = "World"; ViewData.Add("contentData", contentData); }
I z twojego punktu widzenia:
<div id="contentA"></div> <div id="contentB"></div> <script type="text/javascript"> contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])'); contentSetter.setContentA(); contentSetter.setContentB(); </script>
źródło
Niedawno pisałem na blogu o tym temacie: Generowanie zewnętrznych plików JavaScript przy użyciu częściowych widoków Razor .
Moim rozwiązaniem jest użycie atrybutu niestandardowego (
ExternalJavaScriptFileAttribute
), który renderuje częściowy widok Razor tak, jak jest, a następnie zwraca go bez otaczających<script>
tagów. To sprawia, że jest to prawidłowy zewnętrzny plik JavaScript.źródło
Zwykle pakuję JS, potrzebując dostępu do właściwości modelu, w funkcje, a następnie przekazuję @something w widoku. Na przykład
<script type="text/javascript"> function MyFunction(somethingPresentInTheView) { alert(somethingPresentInTheView); } </script>
w widoku dodaję wywołanie funkcji za pośrednictwem (tylko przykład):
<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />
źródło
Myślę, że utknąłeś z koniecznością umieszczenia tego kodu JS w widoku. O ile wiem, parser Razor nie będzie przeglądał plików .js, więc wszystko, co masz
@
, nie zadziała. PLus, jak zauważyłeś, sam Javascript nie lubi tej@
postaci kręcącej się bez powodu, inaczej niż, powiedzmy, w ciągu.źródło