ASP.NET MVC Razor获取文本框值

Question

如何使用剃刀获取文本框的值？

<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>
     ..........
     }

是否可以使用MVC Razor获取文本框的值？使用getElementByID的原因似乎不适用于剃刀...

Answer 1

不要被倒下来打倒.

你显然是Razor和Mvc&Javascript的新手.您的问题是您正在将服务器端语言与客户端语言混合使用.Razor是一种服务器端语言,因此您无法使用Razor访问客户端代码(即html或javascript).Razor用于将html呈现给客户端浏览器.将您在cshtml文件中看到的代码视为将成为html文件的代码的模板.另一方面,javascript只有在到达用户浏览器时才会运行.

现在,让我们尝试一下你的代码.

<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>

我删除了类,使其更清晰.上面的问题是您正在尝试查找与剃刀代码一起使用的值.该代码在到达浏览器之前就已运行,因此无法运行.

你无法使用Razor解决这个问题.这意味着您的DisplayFor对您的场景将毫无用处.

你需要javascript来解决问题,所以你需要取消Razor Code.假设您的模型具有您在示例中创建的属性的对象列表,您可以执行类似的操作.

<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>

不幸的是,你有错误的工具.

要真正完成你想要做的事情,你最好投资一些javascript框架.我建议你学习AngularJs来做到这一点.

关于Javascript的组织

如评论中所述,您可以在cshtml文件中使用脚本标记.不幸的是,这不是你的问题.我添加了一些方法来组织你的javascript.

your.cshtml文件.

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

更好的组织可能看起来像这样

将代码放在javascript文件中.在此示例中,名称为person.js.我正在使用一个人的例子,因为这是一个简单的方法来看看在javascript中创建一个可用的对象.在这种情况下,人是对象.

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();

接下来,你必须以某种方式使用它.使用它的最简单方法不是最好的方法.

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

使用JQuery的改进示例

此示例将以不引人注目的方式绑定事件(即,您不会混合使用javascript和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;
    }

};