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。

所以在您使用此部分的indidual views / pages中，您必须像这样设置基本网址

@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;
    });
});

使用部分视图和Jquery从不同视图中的同一下拉列表中进行选择

1 个答案: