使用Javascript发送MVC模型属性

问题描述

我想将模型从该视图发送到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？

解决方法

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

（旁注：您甚至可以将序列化器配置为使用内置的JavaScriptDateTimeUtcConverter，以便将{.1}从.NET转换为DateTime从JavaScript。）

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

,

请参见下面：-

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

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