Multiple ScriptManager and Partial Views

[Chris Bentley]

This topic has been discussed previously, but my problem is a little different.  I am using partial views to reload the grid after an edit from a custom modal dialog.  This is working fine.  To achieve this, I include @Html.EJ().ScriptManager() in my partial view as well as _Layout.  Including it in _Layout alone would be ideal, but the reload of the partial view does not work.  In the other thread, it was determined that using a ScriptManager in both the _Layout and partial view worked fine with no negative affect.

The problem I'm having is that the bootstrap navbar drop downs stop working when I go to the page containing the partial view.  Oddly, if I edit a record on the partial view, causing the partial view to reload, the drop down on the navbar starts working again.  The navbar is stock bootstrap.

Thank you for any help.

The navbar - the Admin menu no longer drops down:

    <div class="@(String.Format("navbar {0} navbar-fixed-top", Session["NavBarStyle"]))">

        <div class="container">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                @Html.ActionLink("DVT", null, routeValues: new { id = String.Empty }, htmlAttributes: new { @class = "navbar-brand" })

            </div>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav">

                    ...blah blah...

                    <li class="dropdown">

                        <a rel='nofollow' href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a rel='nofollow' href="~/Firms/Users">Users</a></li>

                        </ul>

                    </li>

                </ul>

                @Html.Partial("_LoginPartial")

            </div>

        </div>

    </div>

The view containing the partial view - 

@{

    ViewBag.Title = "Users";

    Layout = "~/Areas/Firms/Views/Shared/_FirmLayout.cshtml";

}

@using (Html.BeginForm())

{   

    <div id="replacetarget">

        @{Html.RenderAction("_Index", "Users");}

    </div>

}

<!-- modal placeholder-->

<div id='myModal' class='modal fade in'>

    <div class="modal-dialog">

        <div class="modal-content">

            <div id='myModalContent'></div>

        </div>

    </div>

</div>

The partial view with ScriptManager at the bottom:

<div class="row">

    <div class="col-md-12">

        @(Html.EJ().Grid<DVT.Web.Areas.Firms.Models.UserModel>("UsersGrid")

                    .Datasource((IEnumerable<object>)ViewData["Users"])

                    .AllowFiltering()

                    .AllowPaging()

                    .AllowSorting()

                    //.EnablePersistence(true) //This appears to break Filtering

                    .EnableHeaderHover()

                    .EnableAltRow(true)

                    .AllowSelection()

                    .SelectionType(SelectionType.Single)

                    .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

                    .Columns(col =>

                    {

                        col.Field("UserID").HeaderText("UserID").IsPrimaryKey(true).Visible(false).Add();

                        col.Field("FirstName").HeaderText("First Name").TextAlign(TextAlign.Left).Add();

                        col.Field("LastName").HeaderText("Last Name").TextAlign(TextAlign.Left).Add();

                        col.Field("Email").HeaderText("Email").TextAlign(TextAlign.Left).Add();

                    })

                    .ToolbarSettings(toolbar =>

                    {

                        toolbar.ShowToolbar(true).CustomToolbarItems(

                            new List<object>()

                            {

                                new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Add" },

                                new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#Delete" }

                            });

                    })

                    .ClientSideEvents(eve =>

                    {

                        eve.RecordDoubleClick("RecordDoubleClick");

                        eve.ToolbarClick("ToolbarClick");

                    })

        )

    </div>

</div>

@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/bundles/modalform")

@*<script src="@Url.Content("~/Scripts/Firms_Users_Index.js")"></script>*@

<script id="Add" type="text/x-jsrender">

    <a id="addButton" class="e-toolbaricons e-icon">

        <img src="../../../Content/icons/SVG/267-plus.svg" alt="Add">

    </a>

</script>

<script id="Delete" type="text/x-jsrender">

    <a id="deleteButton" class="e-toolbaricons e-icon">

        <img src="../../../Content/icons/SVG/272-cross.svg" alt="Delete">

    </a>

</script>

<script type="text/javascript">

    function RecordDoubleClick(sender) {

        var editID = sender.data.UserID; /*Record ID*/

        openModal("/Firms/Users/Edit/" + editID); /*Controller Action*/

    }

    function ToolbarClick(args) {

        var gridObj = args.model;

        var urlRoot = "/Firms/Users/"; /*Controller Root*/

        var url = "";

        if (args.itemName == "Add") {

            url = urlRoot + "Create";

        }

        else {

            var index = gridObj.selectedRowIndex;

            if (index > -1) {

                var editID = gridObj.currentViewData[index].UserID; /*Record ID*/

                if (args.itemName == "Edit") {

                    url = urlRoot + "Edit/" + editID;

                }

                else if (args.itemName == "Delete") {

                    var canDelete = gridObj.currentViewData[index].CanDelete;

                    if (canDelete) {

                        url = urlRoot + "Delete/" + editID;

                    }

                    else {

                        alert("This item cannot be deleted");

                    }

                }

            }

        }

        if (url != "") {

            openModal(url);

        }

    }

</script>

@Html.EJ().ScriptManager()

[Chris Bentley]

I may have found the cause of this.  In my partial view, I was loading jqueryval and bootstrap bundles again.  I commented them out and the navbar is working again.  

@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/bundles/modalform")

Thank you.

[Ragavee U S]

Hi Chris, 

  

Thanks for your update. 

 

Please let us know if you need any further assistance. 

  

Regards, 

Ragavee U S.