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的原因似乎不适用于剃刀......

Answer 1

不要因为下降而被打倒。

你显然对Razor和Mvc＆amp;的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;
    }

};

ASP.NET MVC Razor获取文本框值

1 个答案: