Execute a C# Lambda expression inside a Javascript function with Parameter

Question

I have a Javascript function inside a View in a ASP.NET MVC web application.

The Model being passed in my page is a list.

@model IEnumerable<DeliveryDashboard.Models.LeaveDetailsModel>

The Javascript function looks like this:

function ShowLeavePopup(ParameterEmpID) {

        var selecteddates = @Model.Where(i => i.EmpID == ParameterEmpID).Select(c => c.ExistingLeaveString).FirstOrDefault();
        alert(selecteddates);

        // do stuff with the selecteddates

    }

This code does not work. The model property which I am trying to retrieve is a simple string data.

If I hard code the data in the lambda expression, then it works. But how to make it read the parameter from the javascript method signature?

var selecteddates = "@Model.Where(i => i.EmpID == 112233).Select(c => c.ExistingLeaveString).FirstOrDefault();
        alert(selecteddates)"

I can always do an Ajax call and postback to the server to get the data from database. But since the data I need is already available in the Model List, Is it possible to somehow extract the data from the model itself?

What does the result of `@Model.Where(i => i.EmpID == ParameterEmpID).Select(c => c.ExistingLeaveString).FirstOrDefault();` look like..? — Stuart, Sep 03 '19 at 14:58
It's just a string. it will look like "This user has applied leave before". — Bluemarble, Sep 03 '19 at 14:59
What is your output? How does your html page looks like (especially the script part)? I think that C# will only write the object's type in the source ant that isn't a processable format for javascript. — turanszkik, Sep 03 '19 at 14:59
Then you'll need to quote it: `var selecteddates = "@Model.Where(i => i.EmpID == ParameterEmpID).Select(c => c.ExistingLeaveString).FirstOrDefault();"` — Stuart, Sep 03 '19 at 15:00
@Stuart It works if I hard code the ParameterEmpID inside the lambda expression. But it is not accepting the paramter from the function signature. — Bluemarble, Sep 03 '19 at 15:05
Don't you need: `function ShowLeavePopup(@ParameterEmpID)` ...? (with the @) — Stuart, Sep 03 '19 at 15:07

score 0 · Answer 1 · answered Sep 03 '19 at 17:46

You have two problems:

The first problem you should be able to see if you look at the resulting code in the browser. Remember that using C# code in JavaScript will only output the value. It will not include any JavaScript syntax that you require.

You have this:

var selecteddates = @Model.Where(i => i.EmpID == ParameterEmpID).Select(c => c.ExistingLeaveString).FirstOrDefault();

Let's say that Model.Where(i => i.EmpID == ParameterEmpID).Select(c => c.ExistingLeaveString).FirstOrDefault() returns Some String. The resulting JavaScript code will end up being:

var selecteddates = Some String;

That's not valid JavaScript. You will need to explicitly put quotes where JavaScript requires them:

var selecteddates = "@Model.Where(i => i.EmpID == ParameterEmpID).Select(c => c.ExistingLeaveString).FirstOrDefault()";

(Note that the end quote should come before the semicolon - Stuart had a typo there in his comment)

The second problem is that you're mixing server-side and client-side code. Razor expressions are evaluated server-side. JavaScript is evaluated client-side. So you cannot use a JavaScript variable in a Razor expression like you're trying to do with .Where(i => i.EmpID == ParameterEmpID) because the Where is evaluated on the server.

You will have to figure out a different way to do that. You have two options I can think of:

Store the whole list in JavaScript like this:

var empLeaves = @JsonConvert.SerializeObject(Model.Select(e => new {e.EmpID, e.ExistingLeaveString}));

And change your ShowLeavePopup function to search the empLeaves list for the one with the right empId. But keep in mind that anyone viewing that page can press F12 and see a list of employee IDs and whatever your "leave string" is, which may or may not be confidential information that the user is allowed to see.

Another option would be to have ShowLeavePopup make an AJAX request back to the server with the EmpID, where you can validate who they are again and return the data.

score 0 · Answer 2 · answered Sep 04 '19 at 08:08

Use @Html.Raw()

function ShowLeavePopup(ParameterEmpID) {

    var selecteddates = @Html.Raw(@Model.Where(i => i.EmpID == ParameterEmpID).Select(c => c.ExistingLeaveString).FirstOrDefault());
    alert(selecteddates);

    // do stuff with the selecteddates

}

Execute a C# Lambda expression inside a Javascript function with Parameter

2 Answers2