如何解决选择下拉值时显示另一个视图
-我知道如何使用 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 中,切换仅发生在客户端
- 添加下拉菜单如下:
@Html.DropDownList("dropdown",new SelectListItem[]
{
new SelectListItem() { Text = "View 1",Value = "1" },new SelectListItem() { Text = "View 2",Value = "2" }
})
- 添加不同名称的 Div 并隐藏一个
<div id="View1">
View 1
</div>
<div id="View2" hidden>
View 2
</div>
- 使用以下Javascript根据选择显示和隐藏
$(document).ready(function () {
$("#dropdown").change(function () {
var selectedItem = $(this).val();
if (selectedItem == "1") {
$("#View1").show();
$("#View2").hide();
}
else {
$("#View1").hide();
$("#View2").show();
}
});
});
场景 2 当您需要从服务器获取视图时
- 添加下拉菜单如下:
@Html.DropDownList("dropdown",Value = "2" }
})
- 添加一个带有 id 的 div
<div id="myView">
</div>
- 添加 2 个局部视图我的将被称为“_view1.cshtml”和“_view2.cshtml”
- 在您的控制器中添加操作以接受所选选项作为参数并返回部分视图,如下所示。
public ActionResult GetView(int selectedItem)
{
if (selectedItem == 1)
{
return PartialView("_view1");
}
else
{
return PartialView("_view2");
}
}
- 使用下面的 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!');
}
});
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。