.net Core Using razor function in Javascript

Question

Hi i got to use c# code in js. My js and .cshtml page are separeted . I wrote a function in .cshtml page and gotta call it in .js file.

In Js file

DataList.forEach(function (item) {
     ...
 var users = GetUsers(item.AssignedUsers);

It goes here

Index.cshtml

  <script>
    
        function GetUsers(userIdList) {
    //it logs it, i can get theese values from here
            console.log("userIdList");
            console.log(userIdList);
              @{ // but in here it says userIdList does not exist in current content
//also tryed this.userIdList
                  var users = userIdList.Split(",");
                  foreach (var item in users)
                  {
                      var user = _Manager.FindByIdAsync(item.UserId).Result;
    
                  }
              }
    
          }
    </script>

Anyone to help me, i can't reach the userIdList function parameter in c# razor — pandakun, Dec 30 '20 at 07:46
`in here it says userIdList does not exist `...yes because it's a JavaScript variable not a c# variable. You can't just mix the languages together like that. They are executed at different times and in different places (browser for JavaScript, server for c#). If you need to invoke some c# based on values generated by JavaScript then the obvious thing to do would be to make an AJAX request to the server which can then execute the c# and return a response — ADyson, Dec 30 '20 at 07:49
It might help you to read this: https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming (a lot of the examples are about PHP but the same concepts apply to asp.net or any other server side language) — ADyson, Dec 30 '20 at 07:55
I understand, i also thought ajax but it may cost much.It's a solution but i gotta set simple data. Also i'm looping it — pandakun, Dec 30 '20 at 07:57
You can send the whole list to the server in one Ajax request and loop it there, and then return a list in the response. No need for multiple Ajax requests which would be inefficient — ADyson, Dec 30 '20 at 08:04
Right but every list contains different count and users. Also showing them seperaelty like table — pandakun, Dec 30 '20 at 08:18
How many lists are you requesting exactly? Anyway you don't have any choice, you need to use AJAX. The only thing you can do if you are worried about performance is design it so that it makes as few requests as possible. But realistically just returning a few users shouldn't be a big issue, unless you are sending thousands of requests or something — ADyson, Dec 30 '20 at 08:35
Also, the fact that there are different counts and you need to put them in a table afterwards is completely irrelevant to the problem, as far as I can see. Your Javascript can deal with that, when it receives the response back from the server. — ADyson, Dec 30 '20 at 08:52

score 1 · Accepted Answer · answered Dec 31 '20 at 03:29

You can pass list from ajax to controller action,and action return a list you want. Here is a demo:

<button onclick="sendData()">
    send
</button>
<script>
function sendData() {
                //here is a sample list
                var list = [];
                var user1 = {};
                user1.Id = 1;
                user1.Name = "u1";
                list.push(user1);
                var user2 = {};
                user2.Id = 2;
                user2.Name = "u2";
                list.push(user2);
                $.ajax({
                type: "POST",
                url: '@Url.Action("SendData", "Test")',
                contentType: "application/json",
                data: JSON.stringify(list),
                }).done(function (data) {
                    console.log(data);
                     //the data is you want
                });
            }
</script>

action:

public List<User> SendData([FromBody]List<User> list) {
            //you can do something and return a list you want here
            return list;
        }

User:

public class User {
        public int Id { get; set; }
        public string Name { get; set; }

    }

result:

.net Core Using razor function in Javascript

1 Answers1