將變量從cshtml razor傳遞給jquery

Question

我有一個部分觀點，我在頁面上調用如下： -

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

此頁面的實際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>

現在這很完美，但是我需要找到一種方法來傳遞動態變量而不是硬編碼變量：

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

在模型中我有所有變量，但是我不知道如何將它們插入到Jquery中。 任何幫助將非常感謝！

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

這是我在每個需要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>

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>

這現在工作正常

Answer 1

您可以向視圖添加隱藏字段，並將數據綁定到模型中。 然后，您可以輕松地從jQuery中讀取此值。

視圖：

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

腳本：

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

你也可以將這些隱藏在你的局部視圖中。 如果您的局部視圖不是強類型，請將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>

在這種情況下，您不需要將hiddens放入需要ImageGallery的每個cshtml。

Answer 2

您可以設置隱藏字段，也可以只聲明javascript變量並從模型或Viewbag中設置它們的值，如：

var action = @Model.action;

要么

var id = @ViewBag.id;

你可以在你的代碼中使用它

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

}）;