javascript - 如何只渲染部分 View 的特定部分？

Question

我目前正在开发一个 web 应用程序，它在 visual studio 中使用 jquery 1.9.1 和 jquery mobile 1.3.2(MVC4 模板).我有很多页面使用侧面板。侧面板中的元素几乎相同，所以我决定将其放在局部 View 中，但侧面板中的元素在所有页面中并不完全相同。所以我想将所有页面中使用的侧面板的所有元素放在局部 View 中，并根据我正在使用的页面有选择地呈现它们。

那么有什么方法可以只渲染部分 View 中的选择性元素吗？

Answer 1

您真的需要使用 Javascript 执行此操作吗？

让我们整理思路:

I have many pages where i use a side panel

我在这里要做的是创建一个布局页面，您可以在需要添加此侧面板的所有 View 上使用该页面。因此，您要在最终 html 输出上呈现此布局的 View 应包括以下部分:

@{
    ViewBag.Title = "Roles";
    Layout = "~/Views/Shared/_SidePanelLayout.cshtml";
}

so i am thinking to put all the elements of side panel used in all the pages in a partial view and selectively render

好的，我会做同样的事情，但是，选项的呈现，我不会使用 javascript。我更愿意通过将模型发送到 View 来发送唯一必需选项的 html。这是我要编码的过程:

1 - 无论何时请求使用此侧面板布局的页面，都应填充 ViewBag 属性(或模型)以传递页面名称。假设您的 Home/Index View 使用此布局，您可以这样做:

public ActionResult Index()
  {
     ViewBag.PageName = "Home-Index"; //you could use constants or enums as best practice
     return View();
  }

在您的 _SidePanelLayout View 上的某个时刻，我会放置一个渲染 Action 调用。实际上，此呈现操作将使用该页面的特定选项呈现侧面板 View :

@{ Html.RenderAction("GetOptions", "SidePanelController", ViewBag.PageName); }

这意味着您将需要一个 SidePanelController 类，其方法将返回您的 SidePanelView(具有您请求的页面的特定选项):

  public class SidePanelController: Controller
    {
      public ActionResult GetOptions(string pageName)
      {
        //you may want to change this List<string> for a list of objects that include
        //the properties you need like url, name, tooltip, etc
        List<string> menuOptions = new List<string>();
        //Determine which options should be rendered
        /* your code */
        //return the view with the filtered options
        return PartialView("_SidePanelView", menuOptions);
      }
    }

这样您就可以满足您的要求。它比使用 javascript 稍微复杂一些，但它是更强大的解决方案。

希望这对您有所帮助。