如何只渲染局部视图的特定部分?

时间:2013-12-04 04:48:50

标签: javascript jquery html jquery-mobile partial-views

我目前正致力于在Visual Studio中使用 jquery 1.9.1和jquery mobile 1.3.2 Web应用程序 MVC4 模板我有很多页面,我使用侧面板。侧面板上有几乎相同的元素,所以我决定将它放在局部视图中,但侧面板中的元素在所有页面中并不完全相同。 所以我想把所有页面中使用的侧面板的所有元素放在局部视图中,然后根据页面选择性地渲染,我正在使用。

那么有什么方法可以从局部视图中仅渲染选择性元素?

1 个答案:

答案 0 :(得分:0)

你真的需要使用Javascript吗?。

让我们组织这些想法:

  

我有很多页面,我使用侧面板

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

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

所以我想把所有页面中使用的侧面板的所有元素放在局部视图中并有选择地渲染

好的我也会这样做,但是,渲染选项,我不会使用javascript。我更喜欢通过将模型发送到视图来发送唯一必需选项的html。这是我要编码的过程:

1 - 每当您请求使用此侧面板布局的页面时,您应填充ViewBag属性(或模型)以传递页面名称。因此,假设您的Home / Index视图使用此布局,您可以执行以下操作:

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

在_SidePanelLayout视图的某个时刻,我会发出一个渲染动作调用。实际上,此渲染操作将使用该页面的特定选项呈现侧面板视图:

@{ 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复杂一点,但它是更强大的解决方案。

希望这有帮助。