Send MVC model property with Javascript

Question

I want to send the model from this View to the additionalData() function so that I can send it to a method in a 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>

but I see that it's now correct this way, it's not working. How can I access the Model from the JS function?

Rudey · Accepted Answer · 2020-08-13 06:17:25Z

1

Option 1: Mixing Razor with JavaScript. That's one way to do it, as you have already done.

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

Assuming Model.operator is a string, keep in mind that you will have to escape quotes if your string can contain quotes. Also, currently if operator is null, you'll get an empty string ("") in JavaScript, which might not be what you want. Here's a more robust way of doing things:

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

As you can tell, this is getting ugly really fast.

Option 2: JSON. A better way would be to convert your model to JSON using a serializer. Assuming JSON.NET is your serializer of choice, you could do this:

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

(Side-note: You can even configure the serializer to use the built-in JavaScriptDateTimeUtcConverter in order to convert DateTimes from .NET to Dates from JavaScript.)

The drawback of this approach is that this will expose your C# view model to clients, so it should never contain sensitive data.

edited Aug 13, 2020 at 6:17

answered Aug 12, 2020 at 14:14

Rudey

5,0255 gold badges47 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cucko Over a year ago

where do I get the value from? :) JsonSerializerSettings also throws an error saying: JsonSerializerSettings is a type, which is not valid in the given context

Rudey Over a year ago

Oops, that should've said JsonConvert.SerializeObject(Model). You can optionally pass a second parameter that's an instance of JsonSerializerSettings to configure the serializer, but the defaults work fine in this example.

Aditya Singh · Accepted Answer · 2020-08-12 14:49:45Z

0

Please see below:-

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

displayedData variable will contain the data which has been bound to the grid

answered Aug 12, 2020 at 14:49

Aditya Singh

1377 bronze badges

Collectives™ on Stack Overflow

Send MVC model property with Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related