Question

使用旧的ASP.NET，我们可以轻松创建用户控件（.ascx），实际上许多控件完全独立于当前的View。我想知道MVC是否可以实现这一点？

我需要向用户显示简单列表，问题是 - 此列表应显示在我的网站上的多个位置。虽然我可以简单地修改我的视图模型，并向他们添加“小部件”的模型，但我想避免这种情况。我希望我的用户列表只需要以下内容：

@Html.Partial("Link/To/My/List")

要包含在其他视图中 - 列表的模型必须以其他方式填充。我想在我的部分内部使用AJAX，但这似乎是一个坏主意。还有其他方法可以解决MVC假设吗？

Answer 1

您可以使用RenderAction方法渲染部分视图。部分视图可以与不同于调用页面的模型

的模型相关联

从视图

调用操作方法

@{Html.RenderAction("SomeAction", "SomeController");}

Action方法返回局部视图

public ActionResult SomeAction()
        {
            //Construct SomeModel here..  
            return PartialView("SomeView", SomeModel);
        }

Answer 2

您可以编写封装的部分视图＆＃34;小部件＆＃34;通过在局部视图中嵌入脚本块。在div中包装脚本块是将标记和初始化脚本包装在局部视图窗口小部件中的一种简洁方法。例如，我可能有一个名为＆＃34; _WidgetPartial＆＃34;的部分视图。我在整个网站上使用。如果我放在我的母版页上的两个位置它应该工作，我不想在我的母版页中编写逻辑来初始化小部件。

您可能希望将窗口小部件编写为某种类型的jQuery插件，然后脚本块变为简单的一行来初始化它。局部视图看起来像......

<div id="widgetWrapper">

    <ul class="widget">
    </ul>

    <script>
        $(document).ready(function() {
            $("ul.widget").widget(...);
        });
    </script>
</div>

如果你永远不会在一个页面中多次使用它，那么它很简单，否则，包装代码使它不会执行两次。见下文。为了Stack Overflow片段，我通过在代码片段中重复两次局部视图来模拟它，以表示在母版页中包含两次局部视图窗口小部件。

我的母版页可能如下所示：

<div id="left-nav">
   @Html.Partial("_WidgetPartial")           
</div>

<div id="body">
</div>

<div id="right-nav">
   @Html.Partial("_WidgetPartial")
</div>

示例：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Self-contained partial view containing widget -->

<div id="widgetDiv" class="panel panel-default">

    <div class="panel-heading">Event Dates</div>
    <div class="panel panel-group">
       <ul class="widget">
         <!-- These will load dynamically -->
       </ul>
    </div>

    <script>
        $(document).ready(function() {

            // Run this once only in case widget is on page more than once
            if(typeof $widget == 'undefined') {
                $widget = $("ul.widget"); // could be more than one
                // mock data to simulate an ajax call
                var data = [
                   {Description: "March", StartDate: "03/01/2015"},
                   {Description: "April", StartDate: "04/01/2015"},
                   {Description: "May", StartDate: "05/01/2015"}
                ];

                $.each($widget, function(w, widget) {
                    // might be an $.ajax call
                    $.each(data, function(i, row) {
                        $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");
                    });
                });
            }
        });
    </script>
</div>
<!-- End of widget / partial view -->



<!-- Second copy of above for sake of example snippet -->
<!-- No need to read further -->









<!-- Self-contained partial view containing widget -->

<div id="widgetDiv" class="panel panel-default">

    <div class="panel-heading">Event Dates</div>
    <div class="panel panel-group">
       <ul class="tinylist nav nav-sidebar widget">
         <!-- These will load dynamically -->
       </ul>
    </div>

    <script>
        $(document).ready(function() {

            // Run this once only in case widget is on page more than once
            if(typeof $widget == 'undefined') {
                $widget = $("ul.widget"); // could be more than one
                // mock data to simulate an ajax call
                var data = [
                   {Description: "March", StartDate: "03/01/2015"},
                   {Description: "April", StartDate: "04/01/2015"},
                   {Description: "May", StartDate: "05/01/2015"}
                ];

                $.each($widget, function(w, widget) {
                    // might be an $.ajax call
                    $.each(data, function(i, row) {
                        $(widget).append("<li><a href='/Widget/Search?startDate=" + row.StartDate + "'>" + row.Description + "</a></li>");
                    });
                });
            }
        });
    </script>
</div>
<!-- End of widget / partial view -->

＆＃13;

是否可以将局部视图创建为独立的“小部件”？

2 个答案: