在Razor文件中使用C＃代码和函数

Question

I have a problem with using functions in razor. I have a list which my entities stored. I wrote a script but something wrong. I have never done this before. Im not good at HTML or Jscript etc.

MY CODE

    @model IEnumerable<Contact>

    <script>

       var name = document.getElementById("nameBox").value;

       function nameBoxOperations(name) {
           @foreach (var names in @Model)
           {
               if (names.givenName == name)
               {
                   //OPERATIONS
               }
           }
       }

    </script>

In this code i want to check an input if it has stored in my list. But i cant reach "name" variable. If i write this "@string name = document.getElementById("nameBox").value;" it returns an error something i dont know. How can i reach it, Thanks

Answer 1

You can try this solution:

@model IEnumerable<Contact>

<script>
     var name = document.getElementById("nameBox").value;

     var collection = '@(Model.Select(x => x.givenName).Aggregate((a, b) => a + "," + b))'.split(',');        
     function nameBoxOperations(name) {
          for(var i = 0; i < collection.length; i++)           
               if (collection[i] == name)
               {
                   //OPERATIONS
               }           
          }
</script>

Answer 2

Razor runs on the server when the page is fetched. It's primary purpose is to generate page content:

@foreach (var names in @Model)
{
    <p>User name: @name</p>
}

If you inspect the network result from fetching the page, you'll see the result does not contain any Razor code. This is because Razor runs entirely on the server, and only its results appear to the client:

<p>User name: Bob</p>
<p>User name: Jimmy</p>
<p>User name: Glover</p>

No razor makes it to the client.

You appear to expect the Razor code to run on the client side as part of the Javascript. Razor is not a client side language. So Razor will not be able to evaluate a client side javascript parameter name . From Razor's perspective, the declaration of the JavaScript function and parameter are just content.

If you want to be able to loop over the names in the ViewModel from javascript, then you can convert the viewmodel into a JSON object:

var nameListJson = @(Html.Raw(Json.Encode(Model)));

function nameBoxOperations(name) 
{
   for (i = 0; i < nameListJson.length; i++) { 
       console.log( nameListJson[i] );
   }
}

I've shown a loop, but whatever you need to do, the data from the model is now accessible. You need to only use javascript though when looping and accessing the model.

If you view the content of the page retrieved, you'll see no Razor. Instead you'll see an inline JSON object.

That is a pretty unconventional approach however. Depending on your application, there's probably a better approach. Based on your question, it sounds like you probably should spend more time in tutorials and examples to see what are more common practices. These will give you a better mental picture of how MVC works, and some building blocks of knowledge to compose your application from.

Answer 3

While Using Javascript inside a C# code block ,you should use @: at the start of each line.

You may use this code:

@model IEnumerable<Contact>

<script>

   var name = document.getElementById("nameBox").value;

   function nameBoxOperations(name) {
       @foreach (var names in @Model)
       {
           @:if (names.givenName == name)
           {
               @:alert('name matched');
               //OPERATIONS
           }
       }
   }

</script>

Answer 4

You're mixing JS with C#, which is not done. Error must happen. The simple solution is for you to type in more JS code which use Ajax (eg via jQuery, which is quite more straightforward than JS' Ajax coding) to fetch the data into another JS variable like an Array or something. Then, you can loop through that. You will have to learn some jQuery to do that though.