We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multiple ScriptManager and Partial Views

Thread ID:

Created:

Updated:

Platform:

Replies:

127030 Oct 21,2016 03:17 PM UTC Oct 24,2016 05:22 AM UTC ASP.NET MVC 2
loading
Tags: Grid
Chris Bentley
Asked On October 21, 2016 03:17 PM UTC

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
Replied On October 21, 2016 03:51 PM UTC

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 [Syncfusion]
Replied On October 24, 2016 05:22 AM UTC

Hi Chris, 
  
Thanks for your update. 
 
Please let us know if you need any further assistance. 
  
Regards, 
Ragavee U S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;