Edit Modal Dialog not displaying

Sep 23, 2012 at 4:46 PM
Edited Sep 24, 2012 at 4:00 PM

I am sure that the solution to this is simple one, but it is driving me crazy.  When using the datagrid controls, when I click on the "edit" button for the row, the edit dialog dows not show up at all.  It is hitting the Controller action I have set up but no dialog box is showing up.  The row does not go into edit mode either for that matter.  I am using the MVC4 samples from your RazorThemedGrid - Mvc4 sample as well as trying the basic tutorial sample as well.

I am using the themed views from your project's DataGrid.cshtml file in the appropriate spot under shared views as well.  I get the same results if I used the standard/non themed approach from your basic tutorial as well.

All the appropriate javascripts appear to be loading including the MVCControlToolkit.Controls-2.2.5.js and appropriate Jquery-UI custom js file.  I am stumped. 

Here are my views: 

(Index.cshtml)

@model Mvc_Examples.Models.ToDoViewModel
@using MVCControlsToolkit.Core;
@using MVCControlsToolkit.Controls;
@using Mvc_Examples.Controls;
@using Mvc_Examples.Models;



@{
    ViewBag.Title = "Home Page";
}
 @{ThemedControlsStrings.SetTheme("Test");}

@{Html.EnableClientValidation();}

@Html.Partial("GridUpdate", Model)

@{ Html.DetailFormFor(Ajax, m => m.ToDoList, ExternalContainerType.div,
           "ToDoSubTasks", "Home", null, "isChangedToDo", "isDeletedToDo", detailDialog:
           new MVCControlsToolkit.Controls.DataGrid.Dialog
           {
               Title = "prova dialogo",
               Show = "slide",
               Hide = "slide",
               MinWidth=800

           });
  }

 

 (GridUpdate.cshtml)

@model WebSiteDataGridViewModel
@using MVCControlsToolkit.Core;
@using MVCControlsToolkit.Controls;
@using Portool.Web.Models.ViewModels


@using (Html.BeginForm("Index", "Home"))
{
    @Html.ThemedDataGridFor(
        m => m.WebSites,
        GridFeatures.Display |
        GridFeatures.Edit |
        GridFeatures.Delete |
        GridFeatures.Insert |
        GridFeatures.Paging |
        GridFeatures.UndoEdit |
        GridFeatures.SortingOne |
        GridFeatures.SortingCausesPost|
        GridFeatures.Filtering,
        new Columns<WebSiteViewModel>()
            .Add(m => m.Name, FieldFeatures.Sort |FieldFeatures.Filtering	 )
            .Add(m => m.Domain, FieldFeatures.Sort )
            .Add(m => m.IpAddress, FieldFeatures.Sort )
            .Add(m => m.Id, FieldFeatures.Hidden,
                 displayTemplate: _S.H<WebSiteViewModel>(
                     @<span>  
                          @item.DetailLink(Ajax, "Edit", DetailType.Edit, "Edit", "WebSite",
                                           new { id = item.ViewData.Model.Id }, null)
                      </span>)),
        m => m.WebSiteOrder,
        m => m.CurrentPage,
        m => m.PreviousPage,
        m => m.TotalPages,
        m => m.ItemFilter)


    <input type="submit" value="Save" />
        @Html.ManipulationButton(ManipulationButtonType.ResetGrid, "Reset", m => m.WebSites)
        
        @Html.HiddenFor(m => m.TotalPages)
    
    
}
 
My controller Action is:
public ActionResult Edit(int id)
        {
            var webSiteToEdit = WebSiteManager.Query().Select(x=>new WebSiteViewModel
                                                                     {
                                                                         Domain = x.Domain,
                                                                         IpAddress = x.IpAddress,
                                                                         Guid = x.Guid,
                                                                         Port = x.Port,
                                                                         Name = x.Name,
                                                                         Id = x.Id,
                                                                         IsDeleted = x.AuditInfo.Deleted
                                                                     }).FirstOrDefault(x=>x.Id == id);
            return new ClentValidationViewResult(webSiteToEdit);

        }
Coordinator
Sep 23, 2012 at 8:14 PM

If yoy started a new Mvc 4 project it adds automatically some js scripts through the Mvc 4 bundling features, so if you added manually all js files in the samples you referred to some js files are duplicated...and this might cause the problems you are experiencing. 90% the problem is some javascript issue:

  1. Some file you forgot
  2. or some file included twice (because of the Mvc4 bundling featur)
  3. An error in come custom js file that you added that creates an exception and prevent the execution of some Mvc Controls toolkit scripts

Option 2 is the one that more likely occurred.

 

Sep 23, 2012 at 10:13 PM

I was thinking along those lines myself, especially since I have had several wrestling matches with bundling myself.  I have mostly gotten that under control though and all the files that should have been bundled seem to be getting downloaded.  I also have made sure that in develoment environment it was not bundling any minimized file since bundling fails I found out if you do and debug is set to true in the config file. 

I tested that Jquery ui dialog was properly loaded by displaying a dialog on my own since I noticed that it appeared that MVCControlKit uses that dialog at its core and I am able to create a dialog as expected. 

I further went ahead and disabled the bundling by commenting the rendering code in my layout file and instead copied the following into it (this was an exact copy of your sample includes (except that I use jquery 1.8.0 and jqueryui 1.8.23) and my own css files):

<link href="@Url.Content("~/Content/Layout.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/colors.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/style.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/jquery-ui-1.8.23.custom.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/"+ThemedControlsStrings.GetTheme()+"/style.css")" rel="stylesheet" type="text/css" />
    
        <script type='text/javascript' src="@Url.Content("~/Scripts/jquery-1.8.0.js")"></script>
        <script type='text/javascript' src="@Url.Content("~/Scripts/jquery-ui-1.8.23.custom.js")"></script>
        <script type='text/javascript' src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
        <script type='text/javascript' src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
        <script type='text/javascript' src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
        <script type='text/javascript' src="@Url.Content("~/Scripts/jquery.global.js")"></script>
        @Html.jQueryGlobalizationScript(Url.Content("~/Scripts/globinfo/"))
        @Html.JQueryDatePickerGlobalizationScript()
        <script type='text/javascript' src="@Url.Content("~/Scripts/MVCControlToolkit.Controls-2.2.5.min.js")"></script>

I am still getting the same results.  I also appear to have all the files to be expected when I view page source in my browser (I have tried this in IE 9 Chrome and FF).

As you can see, I am not including any custom java files at all (other than the jquery ui generated one of course), so cannot see where that is the issue.

Still stumped

Sep 23, 2012 at 11:09 PM

I have an update.  I can actually now edit the row in place as long as I click on the image link, not the "Edit" hyperlink, which means I can save all the edits at once in the standard post manner, but not using Ajax by calling a flyout modal dialog like in your example which is what I really want.

Coordinator
Sep 24, 2012 at 2:47 AM

Ok I have found the problem Look at the names both in the detail link and in the detail form definition: 

"ToDoSubTasks", "Home"

This means, it is expected that the contoller that handles the ajax requests has name "HomeController" and the action method is called ToDoSubtasks.

So please make this names an you controller/action names matchs.

Moreover, please, pay attention, the instruction:

@Html.jQueryGlobalizationScript(Url.Content("~/Scripts/globinfo/"))

 

suppose that the clobinfo folder contains the globalization files you are using...if not something strange may happens because the formats accepted for numbers and dates are different for client and server validation (without that files the english culture is used on the client side). Moreover globinfo in an older version of globlization library, I advice to move to the globalize library: 

    <script type='text/javascript' src="../../Scripts/globalize.min.js"></script>
    
    <%: Html.GlobalizationScript() %>
    <%: Html.JQueryDatePickerGlobalizationScript() %>

 

which requires the globalize file and which rely on the cultures folder under the scripts folder contains the globalization files.

 

Sep 24, 2012 at 3:58 PM
Edited Sep 24, 2012 at 4:01 PM

Sorry, I miscopied the datagridfor code, using the one from your code instead of mine.  My apologies for the confusion.  Yes, I made sure that the action and controller names in your helper matched in both the detail link and the DetailFormFor.   I had copied the globalization scripts over from your example, so am wondering if they are not playing nicely with my versions of jquery (1.8) or jqueryui (1.8.23).  Where are you getting those globalization scripts from?

 I updated my original post to include the proper datagridfor call

Coordinator
Sep 24, 2012 at 4:10 PM

Yiou can find all what you need in the binary folder of BinariesWithSimpleExamples. It contains both the globalization files for the global (old) and Globalize(new) library.

Anyway, the globalize web site is https://github.com/jquery/globalize. I advice reading the docs about

$.validator.setDefaults({
    ignore: "not([data-elementispart]):hidden"
});

or similar, if you need something different for you custom js code. The above code specifies a selector for all input fields that must be ignored in the validation. The last versions of the validation library as default  ignore all :HIDDEN fields, that is all fields that the user cant see....This usually create problems. The above script just ask the validation system to validate also the hidden fields that are parts of Mvc Controls Toolkit...but you may want to but ignore: "" and ask to validate also all hidden fields.

Sep 25, 2012 at 11:40 PM

Okay, I feel so stupid now.  We were both barking up the wrong tree; I guess I led you down the primrose path.  The problem was not in the jquery at all but in the line:

return new ClentValidationViewResult(webSiteToEdit);

I did not catch that you had to put the view name in as well (big slap on the forehead).

That line of course should have read:

return new ClentValidationViewResult("Edit", webSiteToEdit);

I finally remembered about Fiddler and once I started noting the errors coming back from there, I was able to figure it out.

Sorry to waste your time.  In any case thank you for your patience and all your help.  It did help me understand the tools better in general.