Web开发
现在阅读
ASP.NET MVC – How To Embed MVC GridView Extension In To Tab Strip Extension
0

ASP.NET MVC – How To Embed MVC GridView Extension In To Tab Strip Extension

由 ultracpy2018年1月22日

Introduction

Check out this quick little how-to guide for embedding the DevExpress ASP.NET MVC GridView into the Tab Strip Extension.

Background

Alexey M. asked the following question on our forums:

MVC Tabs Demo and GridView components

By Alexey X in MVC Extensions

Hello! I’m using demo with AJAX tabbed page. I want to place a data grid into one of the ajax-tab. How I can do it?

Solution

Our Tab Strip extension has a slick ‘AJAX’ demo that shows off it’s callback capabilities when clicking on the different tabs:

To embed our MVC GridView extension into the Tab Strip extension, follow these steps:

1. Create a View called TabControl.aspx and add the following code:

<% Html.RenderPartial("TabControlPartial", Model); %>

2. Create the ‘TabControlPartial.ascx‘ view and add the following code for the tab strip extension:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<% 
    Html.DevExpress().PageControl(settings => {
        settings.Name = "pageControl";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "TabControlPartial" };

        settings.TabPages.Add("page1");
        settings.TabPages.Add(tabPage => {
            tabPage.Text = "page2";
            tabPage.SetContent(() => { 
                Html.RenderPartial("GridViewPartial", Model);
            });
        });
    })
    .Render(); 
%>

3. Create the ‘GridViewPartial.ascx‘ view and add the following code for the GridView extension:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%
    Html.DevExpress().GridView(settings => {
        settings.Name = "Grid";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };

...
    })
    .Bind(Model)
    .Render();    
%>

4. Be sure to have your methods also defined in your Controller. In the sample above, I’m referencing the HomeController.cs:

...
        public ActionResult TabControl() {
            return View(GetData());
        }
        public ActionResult TabControlPartial() {
            return PartialView(GetData());
        }
        public ActionResult GridViewPartial() {
            return PartialView(GetData());
        }

...

If want to convert the above code to the ‘Razor’ view engine then please check out these excellent resources:

Enjoy and thanks for using the DevExpress MVC Extensions!

Build Your Best – Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

出处:https://www.codeproject.com/Articles/616626/ASP-NET-MVC-How-To-Embed-MVC-GridView-Extension-In

关于作者
ultracpy
评论

你必须 登录 提交评论