passer une variable de cshtml razor à jquery

Question

J'ai une vue partielle que j'appelle sur les pages comme suit :-

@Html.Partial("~/Views/Shared/ImageGallery.cshtml", Model)

Le code pour le Jquery de cette page est le suivant :-

<script type="text/javascript">
    $(document).ready(function () {

        $('.modal_block').click(function (e) {
            $('#tn_select').empty();
            $('.modal_part').hide();
        });

        $('#modal_link').click(function (e) {
            $('.modal_part').show();
            var context = $('#tn_select').load('/Upload/UploadImage?Page=Article&Action=Edit&id=16', function () {
                initSelect(context);
            });
            e.preventDefault();
            return false;
        });

    });
</script>

Cela fonctionne parfaitement, mais je dois trouver un moyen de passer des vars dynamiques au lieu de vars codées en dur :-

Upload/UploadImage?Page=Article&Action=Edit&id=16

Dans le modèle, j'ai toutes les variables, mais je ne sais pas comment les insérer dans Jquery. Toute aide serait très appréciée !

---------UPDATE-----------------------

Voici le code que je mets dans chaque cshtml qui a besoin de l'ImageGallery.

</div>
    @Html.HiddenFor(model => model.PageViewModel.Page.PageTitle, new { id = "PageTitle"});
    @Html.HiddenFor(model => model.PageViewModel.Page.PageAction, new { id = "PageAction"});
    @Html.HiddenFor(model => model.ArticleViewModel.Article.ArticleID, new { id = "ArticleID"});
<div>
    @Html.Partial("~/Views/Shared/ImageGallery.cshtml", Model)
</div>

Nouveau Javascript dans la galerie d'images :-

<script type="text/javascript">

    var pageTitle = $('#PageTitle').val();
    var pageAction = $('#PageAction').val();
    var id = $('#ArticleID').val();
    $(document).ready(function () {
        $('.modal_block').click(function (e) {
            $('#tn_select').empty();
            $('.modal_part').hide();
        });
        $('#modal_link').click(function (e) {
            $('.modal_part').show();
            var context = $('#tn_select').load('/Upload/UploadImage?Page=' + pageTitle + '&Action=' + pageAction + '&id=' + id, function () {
                initSelect(context);
            });
            e.preventDefault();
            return false;
        });
    });

</script>

Cela fonctionne bien maintenant

Answer 1

Vous pouvez ajouter un champ caché à votre vue et lier les données du modèle. Ensuite, vous pouvez facilement lire cette valeur à partir de jQuery.

Vue :

@Html.HiddenFor(model => model.Id, new { id = "FieldId"});

script :

var id= $('#FieldId').val();

Vous pouvez également placer ces hiddens dans votre vue partielle. Si votre vue partielle n'est pas fortement typée, remplacez HiddenFor par Hidden. Votre vue partielle ImageGallery doit contenir la div suivante :

</div>
    @Html.Hidden("PageTitle", Model.PageViewModel.Page.PageTitle);
    @Html.Hidden("PageAction", Model.PageViewModel.Page.PageAction);
    @Html.Hidden("ArticleID", Model.ArticleViewModel.Article.ArticleID);
<div>

Dans ce cas, il n'est pas nécessaire d'ajouter des hiddens à chaque cshtml qui a besoin de l'ImageGallery.

Answer 2

Vous pouvez soit définir des champs cachés, soit déclarer des variables javascript et définir leurs valeurs à partir de votre modèle ou du Viewbag, de la même manière :

var action = @Model.action;

ou

var id = @ViewBag.id;

et vous pouvez l'utiliser dans votre code

<script type="text/javascript">

var action = @Model.action;
var id = @ViewBag.id;
$(document).ready(function () {

$('.modal_block').click(function (e) {
    $('#tn_select').empty();
    $('.modal_part').hide();
});
$('#modal_link').click(function (e) {
    $('.modal_part').show();
    var urlToLoad = "/Upload/UploadImage?Page=Article&Action=" + action + "&id=" + id;
    var context = $('#tn_select').load(urlToLoad, function () {
        initSelect(context);
    });
    e.preventDefault();
    return false;
});

}) ;

Answer 3

Voici une autre solution. J'avais besoin de passer l'url de mon api déclarée dans web.config à JavaScript (dans ce cas Jquery)

1. Dans Razor, déclarez une variable @{var apiUrl= @System.Configuration.ConfigurationManager.AppSettings["BlogsApi"];}
2. Puis en JavaScript var apiUrl = '@apiUrl' ;