java - URL にスペースを含むブートストラップ タブ

Question

Bootstrap タブを少し変更して、ID を指定するのではなくコントローラーから取得するようにしました。

それはすべて完全に機能していますが、一部の ID のプルスルーには単語間にスペースがあります。これにより、これらのタブが機能しなくなります。

基本的に、単一の単語を含むすべてのタブは正常に機能しますが、複数の単語を含むタブは機能しません。

これが私のコードです：

<!-- 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>

ありがとう。