Question

我有一个显示无序列表的主视图。在列表的每个元素内部，我放置了一个锚标记，希望在同一页面上加载一个局部视图，只是在不同的位置。我的目标是加载页面，当用户点击一个元素时，我希望加载部分视图。

主视图：索引

<ul>
    <li>
        <a>
            apples
        </a>
        
    </li>
    <li>
        <a>
            oranges
        </a>

    </li>

</ul>

部分视图：_partialView

<div id="rightside">
        <h1>Hello</h1>
    </div>

部分视图控制器：treeviewController

  public PartialViewResult partial()
    {
        return PartialView("_partialView");
    }

我希望'apples'和'oranges'成为加载我的局部视图的超链接。接下来，我将根据用户选择的内容，使列表中的每个项目加载不同的部分视图。

有人可以在我的主视图的cshtml文件中建议最好的方法吗？

Answer 1

如果要在按钮单击或超链接单击等某个事件上呈现局部视图，则必须在jQuery中使用ajax调用。创建一个返回部分视图的操作方法。在按钮上单击调用此操作方法，并且在ajax成功时只需选择要加载局部视图的div，添加将响应添加为内部html。

$('#btn').click(function (e) {
e.preventDefault(); // <------------------ stop default behaviour of button(if button type is submit)
var element = $("#YourDiv");  // <--------------Your div where you want to render the partial view. use # if id and . if class
$.ajax({
    url: "/Home/YourAction",    
    success: function (data) {
        if (data.status == "Success") {
           $(element).html(data); //<------------ place the response in your div
        } else {
            alert("Error occurs!");
        }
    },
    error: function () {
        alert("An error has occured!!!");
    }
});

希望这有帮助。

如何在MVC中的无序HTML列表中加载锚标记的局部视图？

1 个答案: