使用 Javascript 發送 MVC model 屬性

Question

我想將此視圖中的 model 發送到additionalData() function 以便我可以將其發送到 controller 中的方法。

@model IEnumerable<ModelLayer.Models.TableNotificationModel>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI
@{
    ViewData["Title"] = "Index";
}

<script>
    window.rootUrl = '@Url.Content("~/")';
</script>
<h1>Upload index</h1>


<div>
    <h4>Upload file</h4>
    <form asp-controller="Upload" asp-action="Upload"
        enctype="multipart/form-data" method="post">
    <input type="file" name="file" />
    <button type="submit" id="uploadBtn">Upload</button>
    </form>

    @if (ViewBag.Message != null)
    {
        <script>
        $(document).ready(function(){
            alert('@Html.Raw(ViewBag.Message)');
        });
        </script>
    }
</div>


<div class="clearfix">
    @(Html.Kendo().Grid<ModelLayer.Models.TableNotificationModel>()
        .Name("notificationGrid")
        .Pageable(pageable => pageable.Input(true).Numeric(false))
        .Scrollable()
        .Sortable()
        .Filterable()
        .ColumnMenu()

        .Columns(columns =>
        {
            columns.Bound(c => c.OPERATOR_OBJECTID).Title("ID").Hidden();
            columns.Bound(c => c.SETTLEMENT_CODE).Title("settlement code").Width("100px");
            columns.Bound(c => c.TECHNOLOGY_CODE).Title("tech code").Width("100px");
            columns.Bound(c => c.UPLOAD_SPEED_CLASS_CODE).Title("upload").Width("100px");
            columns.Bound(c => c.DOWNLOAD_SPEED_CLASS_CODE).Title("download").Width("100px");
            columns.Bound(c => c.DATA_CATEGORY_QOS_CODE).Title("data category").Width("100px");
            columns.Bound(c => c.SHAPE).Title("shape").Width("100px");
            columns.Bound(c => c.Message).Title("message").Width("100px");
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Upload_Read", "Upload").Data("additionalData"))
            )
    )

</div>
<script>
    function additionalData() {
        return {
            operatorId: "@Model.operator"
        }
    }
</script>

但我看到現在這樣是正確的，它不起作用。 如何從 JS function 訪問Model ？

Answer 1

選項 1：將 Razor 與 JavaScript 混合。 這是一種方法，正如你已經做過的那樣。

function additionalData() {
    return {
        operatorId: "@Model.operator"
    }
}

假設Model.operator是一個字符串，請記住，如果您的字符串可以包含引號，則必須轉義引號。 此外，目前如果operator是null ，您將在 JavaScript 中得到一個空字符串 ( "" )，這可能不是您想要的。 這是一種更強大的做事方式：

operatorId: @(Html.Raw(Model.operator != null ? '"' + HttpUtility.JavaScriptStringEncode(Model.operator) + '"' : "null"))

正如你所知道的，這真的很快變得丑陋了。

選項 2：JSON。 更好的方法是使用串行器將 model 轉換為 JSON。 假設 JSON.NET 是您選擇的序列化程序，您可以這樣做：

function additionalData() {
    return @(JsonConvert.SerializeObject(Model));
}

（旁注：您甚至可以將序列化程序配置為使用內置的JavaScriptDateTimeUtcConverter以便將來自 .NET 的DateTime轉換為來自 JavaScript 的Date 。）

這種方法的缺點是這會將您的 C# 視圖 model 暴露給客戶端，因此它不應該包含敏感數據。

Answer 2

請看下面：-

var displayedData = $("#notificationGrid").data().kendoGrid.dataSource.view()

displayData 變量將包含已綁定到網格的數據