如何在MVC4中创建全局用户菜单

Question

在我的主页(_Layout.cshtml)中，我有用户菜单控件，如：-

HTML：

 <div id="menucontainer">
  <li class="adminPanel"><a class = "FacilityUpdate" href="#">Rename Facility Test</a></li>
</div>

 <div id="dialog" title="Rename Facility">
        <div id="grid" style="overflow: auto; overflow-y: hidden; -ms-overflow-y: hidden;
            white-space: nowrap;">
            @Html.Action("GridViewPartial") @*This creating problem*@

        </div>
    </div>

Jquery：

 $('.FacilityUpdate').click(function (event) {
            $('#dialog').dialog('open');
            event.preventDefault();
 });

GridviewPartial :显示在布局视图中的部分视图

@{
var grid = Html.DevExpress().GridView(settings =>
{
    settings.Name = "GridView";
    settings.CallbackRouteValues = new { Controller = "controllername", Action = "GridViewPartial" };
    settings.KeyFieldName = "lng_id";
    settings.SettingsPager.Visible = true;
    settings.Settings.ShowGroupPanel = false;
    settings.Settings.ShowFilterRow = false;
    settings.SettingsBehavior.AllowSelectByRowClick = true;
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    settings.SettingsCookies.Enabled = true;

    settings.Columns.Add(column =>
    {
        column.FieldName = "s_str_pstrname";
        column.Caption = "Source Facility";
            column.Width = System.Web.UI.WebControls.Unit.Percentage(8);

    });
    });
   }
   @grid.Bind(Model).GetHtml()

问题:

当我处于默认视图时.然后，Layout.cshtml弹出窗口将打开带有数据的devexpress网格。但是，当我移动到另一个视图并单击Menuitem时，devexpress网格将创建此错误：

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR   2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET4.0C; .NET4.0E; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 24 Oct 2013 07:55:53 UTC


 Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
 Line: 0
 Char: 0
 Code: 0
  URI: http://localhost:4640/PlatAnodeSurvey

如何创建全局弹出窗口，以便单击任意视图，然后单击菜单项弹出窗口将打开绑定网格。这里，Devexpress网格是我的限制，因为我在整个项目中使用devexpress。

提前谢谢。

Answer 1

1)使用div创建部分视图

2)点击链接，调用以下通用jquery脚本

( a)在脚本b中设置控制器的URL和操作( b)传递参数，以便它是通用的

function showPopUP(paramValue) {
        $('#popupDialog').dialog({
            autoOpen: false,
            width: 800,
            height: "auto",
            maxWidth: 800,
            resizable: true,
            scrollable: true,
            title: 'Generic Popup',
            modal: true,
            open: function () {
                url = "../popupcontroller/ActionName?Pname=" + paramValue;
                $(this).load(url);
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        }).dialog('open');
    }

希望这能帮上忙

Answer 2

用于创建菜单的Jquery库

http://jqueryui.com/menu/

使用Jquery手风琴控件，您可以创建具有不同视图的滑动菜单，http://jqueryui.com/accordion/