c# - ASP.NET MVC Razor 获取文本框值

Question

如何使用 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>
     ..........
     }

是否可以使用 MVC Razor 获取文本框的值？因为使用 getElementByID 似乎在 Razor 中不起作用...

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 代码。该代码在到达浏览器之前就已运行，因此无法正常工作。

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

您需要 javascript 来解决问题，因此您需要取消 Razor 代码。假设您的模型具有您在示例中创建的属性的对象列表，您可以执行类似的操作。

<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 的方法。

您的.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 的改进示例

此示例将以不显眼的方式绑定(bind)事件(即，您不会混合使用 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;
    }

};