ASP.NET MVC Razor get textbox value

Question

How can I get the value of a textbox using razor?

<div>
<input type="text" id="somevalue" name="somevalue" class="form-control"/>
<input type="button" value="Search" class="btn btn-success"/>                                                        
</div>
<ul id="ReportsList" class="nav">
@foreach (var item in Model){
var roomName= document.getElementByID('somevalue').value
if (item.roomName == roomName) {
   <li class="errorItem">
   <a href="#" class="list-group-item">
     <i class="fa fa-warning fa-fw"></i> @Html.DisplayFor(modelItem => item.roomName)
     <span class="pull-right text-muted small">@Html.DisplayFor(modelItem => item.roomCapacity) pers.
     </span>
     ..........
     }

Is it possible to get the value of the textbox using MVC Razor? Cause using the getElementByID doesn't seem to work in razor...

Answer 1

Don't be brought down by the down-ticks.

You are obviously new to Razor and Mvc & Javascript. You problem is that you are mixing a server-side language with a client-side language. Razor is a server-side language so you will not be able to access client-side code (ie html or javascript) using Razor. Razor is used to render html to the client browser. Think of the code that you see in a cshtml file as a template for the code that will become an html file. The javascript on the other hand will only run when it gets to the users browser.

Now, lets try to make some sense of your code.

<div>
    <input type="text" id="somevalue" name="somevalue"  />
    <input type="button" value="Search"  />
</div>

<ul id="ReportsList" class="nav">

    @foreach (var item in Model)
    {
         var roomName= document.getElementByID('somevalue').value; // This is javascript code. 
         if (item.roomName == roomName) {

                <li>
                    @Html.DisplayFor(modelItem => item.roomName)
                    @Html.DisplayFor(modelItem => item.roomCapacity)
                </li>
         }
    }
</ul>

I removed the classes to make it more legible. The problem above is that you are trying to find a value to use with your razor code. That code is running before it gets to the browser so that won't work.

You cannot solve this problem using Razor. That means your DisplayFor's are going to be useless for your scenario.

You need javascript to solve the problem, so you will need to do away with the Razor Code. Assuming your Model has as list of object with the properties you created in your example, you could do something like this.

<script type="text/javascript">
   var data = @(Html.Raw(Json.Encode(Model));

   for(var o in data) { 
   var item = data[o];
   // You need to create an element here and add it to the ul here
   // You could use jquery.  
   }
</script>

Unfortunately, you have the wrong tools here.

To actually accomplish what you are trying to do you are going to be better off investing in some javascript frameworks. I suggest that you learn AngularJs to do this.

Concerning Organization of Javascript

As stated in the comments you can use a script tag in your cshtml file. Unfortunately, this is not your problem. I added a little bit of a way to organize your javascript as well.

your.cshtml file.

<script type="text/javascript">
 .. getElementById in here and do something.
</script>

Better Organization Might Look Like This

Put the code in a javascript file. In this example the name is person.js. I am using a person example because it is an easy way to look at creating an usable object in javascript. In this case person is the object.

person.js

function Person() { 

}

Person.prototype = { 
  // Sets the element with id = "nameId" to "Jim Bob"
  setName: function() { 
     var element = document.getElementById("nameId");

     // Now do something with it. 
     element.innerHTML = "Jim Bob"; // get some user input.
  }
};

// You could initialize this as a global reference.
// I don't recommend this but it will be the easiest way for now. 
var person = new Person();

Next, you would have to use it somehow. The simplest way to use it is not the best way.

<button id="setNameButton" onclick="person.setName()">Set Name</button>

Improved example using JQuery

This example will bind the event in an unobtrusive way (ie. you won't be mixing javascript and html).

function Person() { 
    this.initialize();
    this.name = "Jim Bob";
}

Person.prototype = { 
    initialize: function() { 
        // get reference to this object. 
        var self = this;

        // Set up the click for button. 
        $(document).on('click', "#setNameButton", function() { 

           // Set the name 
           self.setName();
        });

    }
    // Sets the element to this.name field.
    setName: function() { 
       var element = document.getElementById("nameId");

       // Now do something with it. 
       element.innerHTML = this.name;
    }

};