passing a variable from cshtml razor to jquery

Question

I have a partial view that I am calling on pages as follows :-

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

The code for the actual Jquery of this page is as follows :-

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

Now this works perfectly, however I need to find a way to pass dynamic vars instead of hard coded vars to this :-

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

In the Model I have all the vars, however I do not know how I can insert them into the Jquery. Any help would be very much appreciated!

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

This is the code I am putting into each cshtml that needs the 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>

New Javascript in the ImageGallery :-

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

This works fine now

Answer 1

You can add hidden field to your view and bind data form the model. Then you can easily read this value from jQuery.

View:

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

Script:

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

Also you can put this hiddens into your partial view. If your partial view is not strongly typed change HiddenFor to Hidden. Your ImageGallery partial view should contain the following div:

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

In this case you don't need to put hiddens to every cshtml that needs the ImageGallery.

Answer 2

You can either set hidden fields or just declare javascript variables and set their values from either your model or the Viewbag, just like:

var action = @Model.action;

or

var id = @ViewBag.id;

and you can just use it in your 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;
});

});