选择下拉值时显示另一个视图

问题描述

-我知道如何使用 modals(modalname.Show() 但不知道如何使用视图， 我只需要朝着正确的方向轻推即可。

  $(document).ready(function() {        
                $('#dropdown').on('change',function() {
            
            //call another view
        
            
            }

解决方法

有多种方法可以做到这一点。让我推荐几个。如果其中没有一个对您有用，请告诉我。

场景 1：如果它是部分视图并且您想添加到您的页面。

1.1：添加局部视图（说名称：_Pview.cshtml）

1.2: 添加一个带有 id 的 div

<div id="add-pview"></div>

1.3：通过ajax，将局部视图添加到该id。

 $(document).ready(function() {        
                $('#dropdown').on('change',function() {            
                $.ajax({
                url: 'Controller/CallPView',type: 'POST',success: function (data) {
                    $("#div-hist-report").html(data);
                 }
            });
                  }

1.4。在控制器方法中：

public ActionResult CallPView()
{
      return PartialView("_Pview");
}

场景 2：如果它是一个视图，那么您可以将链接作为每个选项的值。

2.1.在视图中：

<select onChange="window.location.href=this.value">
    <option value="/Controller/View1">View1</option>
    <option value="/Controller/View2">View2</option>
</select>

2.2.在 Controller 函数中，您需要添加函数来调用视图：

public ActionResult View1()
{
          return View();
}
public ActionResult View2()
{
          return View();
}

场景 3：如果您使用的是引导程序，那么您甚至不需要 javascript

3.1：在视图中：

 <div class="dropdown show">
                    <a class="btn btn-primary" data-toggle="dropdown" href="" id="viewDD" aria-haspopup="true" aria-expanded="false">
                       Select View
                    </a>
                    <div class="dropdown-menu" aria-labelledby="viewDD">
                        <a class="dropdown-item" href="/Controller/View1">View1</a>
                        <a class="dropdown-item" href="/Controller/View2">View2</a>
                    </div>
</div>

2.2.在 Controller 函数中，您需要添加函数来调用视图：

public ActionResult View1()
{
          return View();
}
public ActionResult View2()
{
          return View();
}

,

这里有 2 种可能的解决方案，具体取决于您的场景。

场景 1 您的视图位于不同的 div 中，切换仅发生在客户端

1. 添加下拉菜单如下：

    @Html.DropDownList("dropdown",new SelectListItem[]
    {
        new SelectListItem() { Text = "View 1",Value = "1" },new SelectListItem() { Text = "View 2",Value = "2" }
    })

2. 添加不同名称的 Div 并隐藏一个

    <div id="View1">
        View 1
    </div>
    <div id="View2" hidden>
        View 2
    </div>

3. 使用以下Javascript根据选择显示和隐藏

    $(document).ready(function () {
        $("#dropdown").change(function () {
            var selectedItem = $(this).val();
            if (selectedItem == "1") {
                $("#View1").show();
                $("#View2").hide();
            }
            else {
                $("#View1").hide();
                $("#View2").show();
            }
        });
    });

场景 2 当您需要从服务器获取视图时

1. 添加下拉菜单如下：

    @Html.DropDownList("dropdown",Value = "2" }
    })

2. 添加一个带有 id 的 div

    <div id="myView">

    </div>

3. 添加 2 个局部视图我的将被称为“_view1.cshtml”和“_view2.cshtml”
4. 在您的控制器中添加操作以接受所选选项作为参数并返回部分视图，如下所示。

    public ActionResult GetView(int selectedItem)
    {
        if (selectedItem == 1)
        {
            return PartialView("_view1");
        }
        else
        {
            return PartialView("_view2");
        }
    }

5. 使用下面的 Javascript 将 div 的内容替换为从服务器返回的内容

$(document).ready(function () {
            $("#dropdown").change(function () {
                var selectedItem = $(this).val();

                $.ajax({
                url: '@Url.Action("GetView","Home")',type: 'GET',dataType: 'html',data: { selectedItem: selectedItem },success: function (data) {
                    $("#myView").html(data);
                },error: function () {
                    alert('Error!');
                }
            });
            });
        });