使用 Javascript 发送 MVC 模型属性

Question

我想将模型从此视图发送到 additionalData() 函数，以便我可以将它发送到控制器中的方法。

@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 函数访问 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。更好的方法是使用序列化程序将模型转换为 JSON。假设 JSON.NET 是您选择的序列化程序，您可以这样做：

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

(Side-note：您甚至可以将序列化程序配置为使用 built-in JavaScriptDateTimeUtcConverter 以便将 DateTimes 从 .NET 转换为 Date来自 JavaScript.)

这种方法的缺点是，这会将您的 C# 视图模型暴露给客户端，因此它永远不应包含敏感数据。

Answer 2

请看下面：-

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

displayedData 变量将包含已绑定到网格的数据

使用 Javascript 发送 MVC 模型属性

Send MVC model property with Javascript

javascript

c#

kendo-grid

使用 Javascript 发送 MVC 模型 属性

Send MVC model property with Javascript

javascript

c#

kendo-grid

使用 Javascript 发送 MVC 模型属性