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

Question

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

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

Answer 1

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

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

1. 如下添加下拉菜单：

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

1. 添加不同名称的 div 并隐藏一个

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

1. 使用以下 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",
    new SelectListItem[]
    {
        new SelectListItem() { Text = "View 1", Value = "1" },
        new SelectListItem() { Text = "View 2", Value = "2" }
    })

1. 添加一个带有 id 的 div

    <div id="myView">

    </div>

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

    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!');
                }
            });
            });
        });

Answer 2

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

场景 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();
}