C# 将变量从 cshtml razor 传递给 jquery

passing a variable from cshtml razor to jquery

提问by Johann

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

此页面的实际 Jquery 代码如下：-

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

在模型中，我拥有所有变量，但是我不知道如何将它们插入到 Jquery 中。任何帮助将不胜感激！

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

- - - - -更新 - - - - - - - - - - - -

This is the code I am putting into each cshtml that needs the ImageGallery.

这是我放入每个需要 ImageGallery 的 cshtml 中的代码。

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

ImageGallery 中的新 Javascript :-

<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

这现在工作正常

采纳答案by Artem Vyshniakov

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

您可以向视图添加隐藏字段并绑定模型中的数据。然后你可以很容易地从 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:

你也可以把这个隐藏到你的局部视图中。如果您的局部视图不是强类型的，请将 HiddenFor 更改为 Hidden。您的 ImageGallery 部分视图应包含以下 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.

在这种情况下，您不需要为每个需要 ImageGallery 的 cshtml 设置隐藏项。

回答by GR7

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

您可以设置隐藏字段或仅声明 javascript 变量并从您的模型或 Viewbag 设置它们的值，就像：

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

});

});