Question

我有一个剃刀语法枚举列表，用于显示活动/非活动状态。

@Html.EnumDropDownListFor(model => model.Status, new { @class = "btn btn-default btn-lg dropdown-toggle" })

我想使用一个按钮组下拉字符，如下面的字形，但不知道如何获得我的模型值＆model ;Status＆＃39;设置按钮组的值下拉。

＆＃13;

$(document).ready(function() {

  $('#item1').on('click', function() {
    $('#item0').text('Active');
  });

  $('#item2').on('click', function() {
    $('#item0').text('Not Listed');
  });

});

＆＃13;

<div class="btn-group">
  <button id="item0" type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li id="item1">
      <a href="#"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active</a>
    </li>
    <li id="item2">
      <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed</a>
    </li>
  </ul>
</div>

＆＃13;

如果我使用html或razor，我不在乎，我只想使用带有字形的下拉按钮下拉，我希望能够设置枚举视图模型值的活动/非活动状态（状态）页面加载。

Answer 1

虽然Bootstrap下拉按钮看起来类似于选择列表，但它们的功能却截然不同。如果您需要实际发布＆＃34;选择＆＃34;我不建议尝试使用Bootstrap下拉按钮作为选择列表的替代。项目

如果您只是寻找更具风格和视觉吸引力的传统精选控件替代方案，请查看类似Select2的内容，虽然外观开箱即用，但有＆＃39; s也是一个project，它的样式与其他Bootstrap更合适。

如果你已经开始使用Bootstrap下拉按钮，那么你就会有很多工作要做。您需要设置一些JavaScript来读取select元素中的信息，并根据该动态创建Boostrap下拉按钮，同时隐藏原始选择。然后，您需要映射所有事件，例如单击下拉列表中的某个项目，以便在实际的select元素中选择相同的项目。您还必须考虑突出显示与选择列表中所选选项对应的下拉列表中的项目等。如果您在编写所有代码时遇到特定问题，则可以根据需要在此处提出其他问题，但是为你提供你在这里需要的所有代码远远超出了StackOverflow的范围。

Answer 2

在.cshtml文件中

<script>
     myModelStatus = '@Model.Status';
</script>

@Html.EnumDropDownListFor(model => model.Status, new { @class = "btn btn-default btn-lg dropdown-toggle" })
more html here...

在你的js文件中

$(document).ready(function() {

  var status = myModelStatus;

  $('#item1').on('click', function() {
    $('#item0').text('Active');
  });

  $('#item2').on('click', function() {
    $('#item0').text('Not Listed');
  });

});

Answer 3

您可以尝试枚举枚举值并将其放入页面中，请注意最后的Html.HiddenFor，我们将使用它来存储选中的Status 。

<div class="btn-group">
  <button id="item0" type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    @{
        var values = Enum.GetValues(typeof(Status));
        for(int i=0; i < values.Count; i++)
        {
            var status = (Status)values[i];

            <li id="item@(i+1)" class="select-status" data-status="@values[i]">
              <a href="#"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>@status.ToString()</a>
            </li>
        }
    }
  </ul>
</div>

@Html.HiddenFor(model => model.Status)

创建html后，我们必须更新Status中选定的Html.HiddenFor，以便在执行POST时保留。

$(document).ready(function() {
    $('.select-status').click(function(){
        $('#Status').val($(this).data('status')); // update the status in hidden input
    });

    @for(int i=0; i < values.Count; i++)
    {
        <text>
        $('#item@(i+1)').on('click', function() {
            $('#item0').text('@status.ToString()');
        });
        </text>
    }
});

HTML代码段示例：

$(document).ready(function() {
  $('.select-status').click(function(){
    $('#Status').val($(this).data('status')); // update the status in hidden input
  });
	
  
  $('#item1').on('click', function() {
    $('#item0').text('Active');
  });

  $('#item2').on('click', function() {
    $('#item0').text('Not Listed');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="btn-group">
  <button id="item0" type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li id="item1" class="select-status" data-status="1">
      <a href="#"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active</a>
    </li>
    <li id="item2" class="select-status" data-status="2">
      <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed</a>
    </li>
  </ul>
</div>
<br />
Visible Status just for test
<input type="text" id="Status" value="1" />

注意：代码可能有一些错误，但逻辑/流程相同。

Answer 4

您正在侦听li元素而不是锚标记
您应该使用event.preventDefault（）方法停止事件传播。

将razor enumdropdownlist转换为bootstrap按钮组下拉列表

4 个答案: