动态加载部分视图

Question

如何动态加载局部视图？

我的意思是我有这个观点,比方说ListProducts,我在那里选择了一些带有产品等的下拉列表,以及那些我想要填充局部视图的选定值,这将是一个看不见的div但是在onchange()事件变得可见之后使用特定选定项目的数据.

Answer 1

使用jQuery的$ .load()和一个返回局部视图的控制器动作.
例如:

HTML

<script type="text/javascript">
$(document).ready(function()
{
    $("#yourselect").onchange(function()
    {
        // Home is your controller, Index is your action name
        $("#yourdiv").load("@Url.Action("Index","Home")", { 'id' : '123' }, 
                                        function (response, status, xhr)
        {
            if (status == "error")
            {
                alert("An error occurred while loading the results.");
            }
        });
    });
});
</script>

<div id="yourdiv">
</div>

调节器

public virtual ActionResult Index(string id)
{
    var myModel = GetSomeData();
    return Partial(myModel);
}

视图

@model IEnumerable<YourObjects>

@if (Model == null || Model.Count() == 0)
{
    <p>No results found</p>
}
else
{
    <ul>
    @foreach (YourObjects myobject in Model)
    {
        <li>@myObject.Name</li>
    }
    </ul>
}

Answer 2

您可以按照以下步骤执行此操作。在您的控制器中，您返回一个局部视图。

    [HttpGet]
    public virtual ActionResult LoadPartialViewDynamically()
    {
        var query = _repository.GetQuery();
        return PartialView("_PartialViewName", query);
    }

然后在视图中你有一个空的 div

<div id="partialgoeshere"></div>

然后使用 jQuery 加载局部视图：

function LoadPartialView() {

    $.get("@Url.Action(MVC.ControllerName.LoadPartialViewDynamically())", { null }, function (data) {

        $("#partialgoeshere").empty();
        $("#partialgoeshere").html(data);

    });

}

希望这可以帮助