Razor绑定视图到viewModel

时间:2015-11-22 12:37:46

标签: jquery razor asp.net-mvc-5

我使用的模板允许用户选择他们喜欢的颜色和许多其他东西。 它看起来像那样: enter image description here

顶栏颜色
        <ul class="clearfix" id="topBar_style_switch">                
            <li class="@Model.Color_0" title="topBar_style_0"><span class="icon_check_alt2"></span></li>
            <li class="@Model.Color_1" title="topBar_style_1"><span class="icon_check_alt2"></span></li>
            <li class="@Model.Color_2" title="topBar_style_2"><span class="icon_check_alt2"></span></li>
            ....
        </ul>

固定布局:

 <div class="clearfix hidden-sm hidden-md hidden-xs sepH_b">
        <label>Fixed layout</label>
        <div class="pull-right">
            @Html.CheckBoxFor(Model => Model.IsFixedLayout, 
             new { @class = "js-switch mini-switch", @id = "fixed_layout_switch" })
            @if (Model.IsFixedLayout)
            {
                <script>
                    $('body').addClass('fixed_layout');
                    $('#fixed_layout_bg_switch').show();
                </script>
            }
            else
            {
                <script>
                    $('body').removeClass('fixed_layout');
                    $('#fixed_layout_bg_switch').hide();
                </script>
            }
        </div>
    </div>

标记“li”的类css在点击颜色后发生变化,从' sw_tb_style_x '' sw_tb_style_x style_active '。 我无法在动作帖子中获得颜色选择的值,但我确实得到了复选框'FixedLayout'的值, 有没有更好的方法来实现它或如何在单击保存按钮

后获取颜色选择的值

谢谢!

1 个答案:

答案 0 :(得分:0)

这段代码对我很有用,

<ul class="clearfix" id="topBar_style_switch">
    @foreach (var color in Model.Colors)
    {
      <li id="@color.ID" class="@color.CssClass" title="@color.Title">
      <span class="icon_check_alt2"></span></li>
     }
     @Html.HiddenFor(Model => Model.IdSelectedTopBarColor, new { id = "selectedTopBarColor" })
</ul>


 // top bar style
   $('#topBar_style_switch li').on('click', function () {
        var topBarStyle = $(this).attr('title');
        $('#topBar_style_switch li').removeClass('style_active');
        $(this).addClass('style_active');
        $('#main_header').removeClass('topBar_style_1 topBar_style_2 ...').addClass(topBarStyle);            
        $("#selectedTopBarColor").val(this.id)            
    });