java - Bootstrap Tabs with Spaces in URL -

i've modified bootstrap tabs pull id controller rather specify them.

it working perfectly, of id's pulling through have spaces between words. causing tabs not work.

basically, tabs single word work fine, multiple words not work.

here code:

<!-- nav tabs -->     <ul class="nav nav-tabs" role="tablist">         @foreach (var qs in model)         {             <li role="presentation"><a href="#@qs.questionsectionname" aria-controls="home" role="tab" data-toggle="tab">@qs.questionsectionname</a></li>         }     </ul>      <!-- tab panes -->     <div class="tab-content">         @foreach (var qs in model)         {            <div role="tabpanel" class="tab-pane active" id="@qs.questionsectionname">                <table class="table">                    <tbody>                         @foreach (var item in qs.questions)                        {                            <tr>                                <td>                                    @html.displayfor(modelitem => item.questionname)                                </td>                                <td>                                    @html.displayfor(modelitem => item.questionsection.questionsectionname)                                </td>                            </tr>                        }                    </tbody>                </table>             </div>          }     </div> 

thanks.

when clicked, bootstrap looks corresponding .tab-pane unique id and, unfortunately, ids cannot contain spaces.

you'll hyphenate value(s) of @qs.questionsectionname steps through loop.