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

时间:2013-10-24 08:07:33

标签: jquery asp.net-mvc asp.net-mvc-4 devexpress

在我的母版页(_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()

问题:

当我在默认视图中时,即。随后将使用带有数据的devexpress网格打开Layout.cshtml弹出窗口。 但是当我移动到另一个视图并单击Menuitem然后devexpress grid创建此错误时:

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。

先谢谢。

2 个答案:

答案 0 :(得分:0)

1)使用div

创建局部视图

2)点击链接调用下面的通用jquery脚本

a)在脚本中设置控制器的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');
    }

希望这会有所帮助

答案 1 :(得分:-2)

用于创建菜单的Jquery库

http://jqueryui.com/menu/

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