使用局部视图和 Jquery 启用从不同视图中的相同下拉列表的选择

Question

我有以下下拉列表可以根据所选课程过滤结果。以下 div 被复制到 5 个不同的视图，因为在所有这些视图中，我需要根据从下拉列表中选择的课程过滤一些数据。

<div class="row">
    <div class="col-sm-8 text-center">
        @Html.DropDownList("Courses", null, htmlAttributes: new { @class = "form-control" })
    </div>
    <div class="col-sm-2">
        <a class="btn btn-info filterbycourse"> FILTER</a>
    </div>
</div>

在每个视图中，我都有以下设置操作的脚本 url。以下代码将 Badge 作为控制器。但是，控制器在其他 4 个视图中是不同的。因此，在视图中只有 controller 名称发生变化。

<script>
    $(function () {
        $(".filterbycourse").click(function () {
            var course_id = $('#Courses').val();
            var url = '@Url.Action("Index", "Badge", new { CourseId = "----" }, null)';
            url = url.replace("----", course_id);
            window.location = url;
        });
    });
</script>

我知道我可以为此创建局部视图。但是，我仍然需要在所有使用局部视图的视图中使用 jQuery 脚本。不知有没有有效的方法来处理这种情况？

Answer 1

您可以在局部视图中保留下拉菜单并使用它。对于处理点击事件的脚本，你只需要将它保存在一个地方，但对不同的页面使用不同的基础url。

所以在你使用这个部分的个人 views/pages 中，你必须像这样设置基础 url

@section Scripts
{
  <script>
     var settings = settings || {};
     settings.SearchUrl="@Url.Action("Search","Badge", new { CourseId = "----" })";     
  </script>
}

并更新您的通用脚本以从当前页面读取此值并使用它来构建最终的 url。

$(function () {
    $(".filterbycourse").click(function () {
        var course_id = $('#Courses').val();
        var baseUrl = settings.SearchUrl;
        var url = baseUrl ;
        url = url.replace("----", course_id);
        window.location.href = url;
    });
});