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

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

Solution 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;
});

});

Comments

[JMon]

I tried your example GR7 -----var page = @Model.PageViewModel.Page.PageTitle;------ but I am getting "Object reference not set to an Instance of an Object" error

[JMon]

ok this works, before I accept it as an answer, is it possible to instead of passing it as hidden vars, passing it from here? ------- @Html.Partial("~/Views/Shared/ImageGallery.cshtml", Model)

[Artem Vyshniakov]

What do you mean "passing it from here"? It is possible to put hidden into ImageGallery.cshtml view.

[GR7]

can you paste some more of your code Johann? are you setting the javascript variables to real properties of your model or Viewbag?

[JMon]

Hi Artem, if you look at my updated code, I wish to avoid passing those 3 hidden vars from every cshtml that needs the ImageGallery, so I was thinking something like [email protected]("~/Views/Shared/ImageGallery.cshtml", new { id = model.ArticleViewModel.Article.ArticleID}, new { PageTitle = model.PageViewModel.Page.PageTitle}), something like this or similar

[JMon]

Hi GR7, I have updated my code with a solution that is working now, I liked Artem's solution, I just need to find a way to make it a little bit "cleaner".

[Artem Vyshniakov]

You can put your hidden fields into ImageGallery partial view. If your partial view is not strongly typed you should use Html.Hidden instead of Html.HiddenFor: Html.Hidden("ArticleID", Model.ArticleViewModel.Article.ArticleID);

[JMon]

my problem with that would be that if its the Article Page, then its ArticleID, if its the Projects Page, then its ProjectID, or else I have to change all the ID fields to just be id.

[Artem Vyshniakov]

I would suggest to use some conditions to render necessary hidden depends on type of the page.

[JMon]

If that is the case then I prefer to pass the Hidden vars from the pages, that way I have more control on what the ImageGallery is getting. Thanks for your help!