Question

我想在Web应用程序上应用Access Control。我有一个数组AllowedElementsArray，其中包含元素的名称。我想在DOM准备好之前只将允许的元素添加到DOM中。

//my array
var AllowedElementsArray = ['textbox','button','radioButton'];

// HTML elements
<body>
    Name: <input type='text' class='textbox'/>
    Task: <input type='text' />
    Hola: <input type='checkbox' class='checkbox'/>
    Hello: <input type='radio'/>
    Foo: <input type='radio' class='radioButton'/>
    Bar: <input type='button' class='button'/>
</body>

// after DOM is ready only these elements should be shown
Name: <input type='text' class='textbox'/>
Foo: <input type='radio' class='radioButton'/>
Bar: <input type='button' class='button'/>

还是有其他有效方法，因为我的HTML很密集，元素太多了。

Answer 1

如果您非常关注访问控制，那么我建议您从服务器端生成HTML，如果您想在客户端执行，那么客户端无论如何都可以操作。

Jquery方法

无论如何，在客户端执行此操作可以按照以下建议完成。此处还有 Working Sample

更改您的HTML，以便在包含span

时包含不需要的元素

<div id="elements">
  <span>Name:<input type='text' class='textbox' /></span>
  <span>Task:<input type='text' /></span>
  <span>Hola:<input type='checkbox' class='checkbox' /></span>
  <span>Hello:<input type='radio' /></span>
  <span>Foo:<input type='radio' class='radioButton' /></span>
  <span>Bar:<input type='button' class='button' /></span>
</div>

在下面的脚本中，我使用了 $.inArray() 来检查数组中是否存在元素类。

var AllowedElementsArray = ['textbox', 'button', 'radioButton'];

$(function() {
  $.each($('#elements input'), function() {
    var $input = $(this);
    var shouldBeRetained = $.inArray($input.attr('class'), AllowedElementsArray);
    if (shouldBeRetained == -1) { // -1 is given when the class is not found in the array
      $input.parent().remove();
    }   
  });

  $('body').show();
});

也有这种风格，所以我们的想法是先隐藏body，直到我们删除了不需要的元素。我们的一个脚本已完成执行，我们可以显示body

body{
  display:none;
}

MVC方法

编辑：由于您说您正在使用MVC，因此您可以在没有Jquery的情况下执行此操作，您只需在所有输入控件上添加if检查。有一点需要明确的是，您在.cshtml文件中编写的c＃代码是服务器端，即MVC框架执行.cshtml文件中的所有代码，最终结果将是纯HTML， Javascript（如果有的话），Css（如果有的话）作为对浏览器的响应返回。您不会在浏览器的视图页面中看到razor或c＃语法。因此，因为互联网上的所有信息都提及 data is sent from controller to view ，所以它不完全正确。数据从控制器传递到名为View()的方法，该方法将获取相应的{{ {1}}文件并对其进行处理，最终结果传递给浏览器（纯HTML而不是.cshtml）。所以，一旦你清楚这一点，你的问题可以解决如下。

在控制器中

将可见类型的数组添加到Viewbag中;

.cshtml

现在在顶部的视图中添加此代码块并将ViewBag数据分配给变量。

ViewBag.AllowedElements = ["textbox", "button", "radioButton"];

现在为所有输入元素添加if检查。

@{
   var allowedElements = ViewBag.AllowedElements;
 }

这样，只有满足<div id="elements"> @if(allowedElements.Contains("textbox")){ <span>Name:<input type='text' class='textbox' /></span> } @if(allowedElements.Contains("text")){ <span>Task:<input type='text' /></span> } @if(allowedElements.Contains("checkbox")){ <span>Hola:<input type='checkbox' class='checkbox' /></span> } @if(allowedElements.Contains("text")){ <span>Hello:<input type='radio' /></span> } @if(allowedElements.Contains("radioButton")){ <span>Foo:<input type='radio' class='radioButton' /></span> } @if(allowedElements.Contains("button")){ <span>Bar:<input type='button' class='button' /></span> } </div>检查的元素才会被发送到浏览器，并且比在Jquery中执行它更清晰。

希望这会有所帮助......

Answer 2

这应该让你开始。

但是，如果你可以做这个服务器端，那会更好。如果不需要将HTML发送给客户端没有意义..

＆＃13;

$(function () {
  var cls = AllowedElementsArray.map(
    function (r) { return '.' + r }).join(',');
  $(cls).removeClass('hidden');
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>var AllowedElementsArray = ['textbox','button','radioButton'];</script>

<body>
    <div class="hidden textbox">Name: <input type='text'/></div>
    <div class="hidden">Task: <input type='text'/></div>
    <div class="checkbox hidden">Hola: <input type='checkbox' class='checkbox hidden'/></div>
    <div class="hidden radio">Hello: <input type='radio hidden'/></div>
    <div class="hidden radioButton">Foo: <input type='radio'/></div>
    <div class="hidden button">Bar: <input type='button'/></div>
</body>

＆＃13;

Answer 3

我们可以循环您的数组并检查与该类匹配的元素。然后适当地显示/隐藏。我已将每个元素及其标签包装在div元素中，以便文本和元素可以隐藏或显示为单个单元。不需要JQuery。

var AllowedElementsArray = ['textbox','button','radioButton'];

// Get node-list of all the input elements in the page:
var inputs = document.getElementsByTagName("input");

// Loop through the elements
for(var i = 0; i < inputs.length; ++i){
  // Check to see if the input has a class matching the AllowedElementsArray
  // If so, show it. Otherwise, hide it. 
  if(AllowedElementsArray.indexOf(inputs[i].getAttribute("class")) > -1){
    inputs[i].parentElement.style.display = "block";
  } else {
    inputs[i].parentElement.style.display = "none";
  }
};

<div>Name: <input type='text' class='textbox'/></div>
<div>Task: <input type='text' /></div>
<div>Hola: <input type='checkbox' class='checkbox'/></div>
<div>Hello: <input type='radio'/></div>
<div>Foo: <input type='radio' class='radioButton'/></div>
<div>Bar: <input type='button' class='button'/></div>

在DOM准备好之前有条件地加载HTML元素

3 个答案:

Jquery方法

MVC方法