I have an ASP.NET MVC application using Kendo UI v2015.2.624, bootstrap 3.4.1 and jquery 2.2.4. In one of the views I have built a kind of accordion using an unordered list ul with some li items in it and using a kendoPanelBar. These li items can be expanded and collapsed.
View (cshmtl):
@model MyDTOs.customDTO
<form id="myForm" method="post">
<div id="divExample">
<ul id="panelBarExample" class="panelBarExample">
<li class="k-state-active">
<span>General Data</span>
<div class="rootRow">
@{Html.RenderPartial("~/Areas/Path/To/Views/_View1.cshtml", Model);}
<input type="hidden" name="myId" value="@Model.Id" />
</div>
</li>
<li class="k-state-active">
<span>Activities Data</span>
<div class="rootRow">
<section id="Activities">
@{Html.RenderPartial("~/Areas/Path/To/Views/WizardStep1/_Activities.cshtml", Model.DataWizard); }
</section>
</div>
</li>
<!-- and more li items -->
</ul>
</div>
</form>
@section Scripts{
<script>
$(document).ready(function () {
$("#panelBarExample").kendoPanelBar({
expandMode: "multiple",
activate: function(e){
// #scheduler is a kendoScheduler
if(e.sender.select().find('#scheduler').length > 0)
if($('#scheduler').getKendoScheduler() != null)
$('#scheduler').getKendoScheduler().refresh();
}
});
});
// More functions here
function saveDataAndReturnPreviousView() {
var form = $("form#myForm");
form.attr("action", "@Url.Action("SaveDataAndReturnPreviousView","myController")");
form.submit();
}
// More functions here
</script>
}
As an example, the UI has the following look:
MyController:
[HttpPost]
public ActionResult SaveDataAndReturnPreviousView(customDTO myDto)
{
// Do some stuff
// Redirect to the correct view
return RedirectToAction(<action name here>,<controller name here>, <route values here>);
}
When a button is clicked on the view, the saveDataAndReturnPreviousView function gets called (see this function on the above piece of javascript code). Then the corresponding action SaveDataAndReturnPreviousView gets called on the controller, and finally I do some stuff there and redirect to show another view.
This is correctly working except when "General Data" panel is expanded before I click on the button. In conclusion this is what is happening:
- If "General Data" panel is expanded it does not work, javascript line code where form is submitted (form.submit()) is reached and executed but SaveDataAndReturnPreviousView action in the controller is never executed.
- If "General Data" panel is collapsed then it works, no problems here. It behaves as expected.
In both cases it does not matter the state of the other panels (expanded or collapsed). The only problem is with first panel, when it is expanded it does not work.
So any ideas what is happening this strange behaviour in case 1?
In Google Chrome DevTools, there are no errors in the console.
UPDATE 25/02/2021:
It seems the problem comes from partial view _View1.cshtml. It does not matter if it is the first panel, the second or the third and so on, if this panel contains the partial view _View1 then form submit fails, no error message in shown in Google Chrome DevTools console.
I have exactly detected which line of the partial view is causing the form submit is not working.
Below line is the culprit in _View1.cshtml:
//Below @Html.WfTextBoxFor is an extension method for System.Web.Mvc.HtmlHelper, //see later in this post
@Html.WfTextBoxFor(x => x.numeroHora, new { @class = "k-textbox", @style = "width:100%" })
Note: x.numeroHora is of type decimal? and I have ensured it is not null, its value in this case is 1,5 (symbol ',' is the decimal sign in spanish format)
I have changed x.numeroHora by another field which is not a decimal?, for example a string or int, and it works, then form submit works but when this field is of type decimal? it does not work. It seems the problem is when the field is of type decimal? any other type works successfully. In the view I have other @Html.WfTextBoxFor items which field is not of type decimal? and all them work successfully. When I comment the line of code @Html.WfTextBoxFor(x => x.numeroHora, new { @class = "k-textbox", @style = "width:100%" } then form submit works.
Also, @Html.WfTextBoxFor is an extension method for System.Web.Mvc.HtmlHelper defined in a static class:
namespace My.MVC.Helpers
{
public static class WfHtmlExtensions
{
public static MvcHtmlString WfTextBoxFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, object htmlAttributes)
{
bool bEditable = htmlHelper.IsWfEditable(expression);
bool bVisible = htmlHelper.IsWfVisible(expression);
return htmlHelper.TextBoxFor<TModel, TValue>(expression, htmlAttributes, bEditable, bVisible); // This calls method below
}
public static MvcHtmlString TextBoxFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression, object htmlAttributes, bool editable, bool bVisible)
{
MvcHtmlString html = default(MvcHtmlString);
RouteValueDictionary routeValues = htmlAttributes == null ? new RouteValueDictionary() : new RouteValueDictionary(htmlAttributes);
AddWfAttributesClass(routeValues, !editable, !bVisible);
html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, routeValues);
return html;
}
}
}
Any ideas on how to solve this problem when the type is decimal?
System.Web.Mvc.HtmlHelper is version 5.2.7.0 (I have installed Microsoft.AspNet.Mvc and Microsoft.AspNet.Mvc.es version 5.2.7.0 nuget packages)
UPDATE 01/03/2021:
I have analyzed the network traffic using Telerik Fiddler Web Debugger and it does not show anything, no traffic, simply web page hangs, no controller method is getting called.
Telerik Fiddler Web Debugger screenshot: