how does a kendoWindow behave after submitting an mvc form?

[Henk Jelt]

Hi

My question has a litttle backgound.
I have developed an application which allows me to select a customer.
After selecting the customer a kendo bar Chart is generated, and filled with the turnover of the last 12 months.
The data are collected by calling a json webservice.
This all works fine, and the webservice call is fired only once.

Now I load the application as partial view in an mvc view.
It is loaded into a kendoWindow.

All of a sudden the application now fires the webservice call twice.

I have put breakpoints in the controller, in the view and in the partial view, and after selecting the customer, all breakpoints are visited only once.
This should mean that the partial view is loaded once, and the webservice is also called once.

But why is the webservice called twice?
Fiddler shows two calls, and also the logs on the json webservice records two calls.

Has anyone had such an experience?

Could it be that after selecting the customer, the active window is already generating the call to the webservice, but that the underlying view is generating a second window which is also calling the webservice?

Many thanks for your help!

Henk Jelt

[Dennis]

Hi,
I use kendo windows the same way in a lot of places in a WebApp I'm building. I don't get double calls (I use Web API, it gives back JSON responses). Although the thing to note is that I'm not using Charts with web service calls, I use grids and dropdowns. Maybe if you posted some code, i could help out.

[Henk Jelt]

Hi Dennis

thanks for your reply and offer.
I'll print the relevant code, and hopefully you can help me in the right direction!

In my partial view (which prints a tabstrip with a few charts in each tab) I retrieve the tabs dynamically via a webservice:

        Dim StatusCats = thisorder.GetInvoiceStatus(Session("mysession")("wsun"), Session("mysession")("wspw"), 0, True, Session("lanid"), True, Session("mysession")("mvnoid"), True)
        ViewData("repels") = StatusCats
        reportelement = "status"
        repid = "code"
        repoffset = 1

Here I retrieve the potential statusses of an invoice, which I store in a viewdata element.

Then I compose a url which is meant to call a json webservice:

        Session("url1") = "http://jason.platform4telecom.com/Jsonreporting/GetProductData/" & seckey & "/" & Session("userid") & "/" & Session("mysession")("mvnoid") & "/" & profileid & "/" & Session("lanid") & "/" & account & "/" & prodgrnr & "/" & profile & "/" & frommonth & "/" & tomonth & "/"
        Session("url2") = "/" & statusid & "/1/" & Session("mysession")("mvnoid")

At this point in time all parameters are known, either by retrieving query parameters or setting default values.

Then I create the tabstrip dynamically by looping through the viewdata element:
    <div id="ReportStrip" style="width: 860px; height: 300px">
        <ul>
            <%For Each repel In ViewData("repels").Rows%>
                <li><%=repel(reportelement & Session("lanid"))%> </li>
            <%next %>
        </ul>
    <%For Each repel In ViewData("repels").Rows
            Dim productname = repel(reportelement & Session("lanid"))%>
        <div class="chart-wrapper">
            <div id="<%=replace(productname," ","")%>" style="width: 830px; height: 250px">
            </div>
        </div>
    <%Next%>
    </div>
At last I run various kendo related scripts, amongsth which retrieving the data for the various charts:
<script>
$(document).ready(function() {
       $("#profile").kendoDropDownList();
        $(".k-dropdown").css("display", "block");
        $("#account").kendoDropDownList();
        $(".k-dropdown").css("display", "block");
        $("#reporttype").kendoDropDownList();
        $(".k-dropdown").css("display", "block");
        $("#frommonth").kendoDropDownList();
        $(".k-dropdown").css("display", "block");
        $("#tomonth").kendoDropDownList();
        $(".k-dropdown").css("display", "block");
        $("#ReportStrip").kendoTabStrip(
        {
            heigth: 250
        });
        var tabstrip = $("#ReportStrip").kendoTabStrip().data("kendoTabStrip");
        tabstrip.select(tabstrip.tabGroup.children("li:first"));
        <%
                For Each repel In ViewData("repels").Rows
                Dim productname = repel(reportelement & Session("lanid"))%>
                    $("#<%=replace(productname," ","")%>").kendoChart({
                        //seriesClick: onSeriesClick,
                        dataSource:
                        {
                            transport:
                            {
                                read:
                                {
                                    type: "GET",
                                    contentType: "application/json; charset=utf-8",
                                    url: "<%=session("url1")%><%=repel(repid) -repoffset %><%=session("url2")%>",
                                    jsonpCallbackString: "mycallback",
                                    dataType: "jsonp"
                                }
                            },
                            schema:
                                {
                                model: 
                                    {
                                        fields: 
                                        {
                                            Month: { type: "string" },
                                            Amount: { type: "string" }
                                        }
                                        }
                                }
                        },
                        seriesDefaults: {
                            type: "column"
                        },
                        series: [
                        {
                            field: "Amount"
                        }
                        ],
                        categoryAxis: {
                            field: "Month",
                            name: "test"
                            },
                        title: {
                            text: " <%=productname%>"
                        },
                        legend: {
                            position: "bottom"
                        },
                        valueAxis: {
                            labels: {
                                format: "€ {0:n0}"
                            }
                        },
                        tooltip: {
                            visible: true,
                            format: "€ {0:n2}"
                        }
                    });
                    <%Next%>
 
});
</script>
The first 10 lines create dropdownlists in a search panel, which allows me to filter the results.
To retrieve the chart data I again loop through the viewdata element.
I do this by combining the sessionelements url1 and url2 with a parameter which comes from the viewdata element:
url: "<%=session("url1")%><%=repel(repid) -repoffset %><%=session("url2")%>".

When I run this stand-alone (it is a separate Visual Studio project) it works fine.
The jsonp calls are called in a correct manner.
The invoices have three different statusses, so the json webservice is called three times.

When I load it into my main project as partial view, I create a KendoWindow which is filled dynamically.
My solution offers various functionalities to the user, and each functionality is loaded into the same window:

        <div id="application" style="position:absolute;  left: 50%;top: 50%; margin-left: -428px; margin-top: -240px;" >
				<% Html.RenderPartial(ViewData("newfunction"))%>
        </div>
The window is initialized with the following code:
        $("#application").kendoWindow({
        actions: [ "Maximize", "Minimize", "Close"],
        draggable: true,
        modal: false,
        resizable: true,
        title: "<%=ViewData("newfunctionname")%>",
        width: "857px",
        height: "500px"
But now each jsonp webservice is called twice, meaning six calls in my example instead of three.
This doubles the load on the server running the webservice, which I obviously do not want, and should not be necessary.
The code itself gives me no indication why this happens, so the only option I could think of, is that the Kendo Window is loaded twice, executing the code twice.
But in this case it should hit the breakpoints I set in the partial view, also twice, and that also does not happen.
So I have no clue as to how to prevent this (without adapting the webservice ...).
Can you help me out here?
Henk Jelt

[Henk Jelt]

Hi Dennis and others

I have pinned the issue down to the window loading twice.
The controller is passed only once, but the window is initialized twice which results in all actions in partial views (not only my json calls but also the rest) are performed twice.

If you seach the forum on "window loaded twice" you get many hits, but no answers.

I will create a support ticket for this and see what support says about this.

Anyway Dennis: thanks for your help.

Henk Jelt

[Martin Kelly]

Hi,
I had a similar problem. I had a window containing a partial view. In the partial view was an input textarea and a send button that simply made an Ajax call to post the textarea content to an MVC controller service. However, clicking the send button once resulted in the javascript code bound to that button being called twice.

What I noticed was that in the javascript document Ready function on the partial I bound the button click event to a function (which makes the ajax call). Clicking once resulted in the function being called twice, due to the initialization of the window occuring twice as you already documented.

By unbinding the click event first before binding it, or by just putting the code in a new function and calling the new function from html in the button onclick (which is what I did) solved the problem for me. Effectively I moved the bind outside of the partial document Ready function to avoid 2 binds.

I know your problem is more complex but maybe this could help

[Henk Jelt]

Hi Martin

Thanks for your reply.
Up till now I have not been able to solve the issue, although Kendo sent me in a nice direction.

They suggest to not load the partial view in the default MVC manner, but via the content attribute of the kendo-window:

@{
    ViewBag.Title = "Index";
}
 
<div id="dialog"></div>
 
<script>
    $("#dialog").kendoWindow({
        content: "@Url.Action("Grid", "Home")",
        actions: [ "Maximize", "Minimize" ],
        draggable: true,
        modal: false,
        resizable: true,
        title: "grid",
        width: "857px",
        height: "500px"
    });
</script>

This is the essence of the direction.

At this moment I have not solved it, but I am convinced this is the solution.

KR

Henk Jelt

[Jason]

Did you ever get this figured out?  I'm having a similar problem.  I am already loading the content via the content attribute of the kendo-window but the form is always submitted twice.  I have to assume something is causing the submit button on the form to get bound twice but I can't figure out what it is.

[Jason]

Never mind, I found the issue.  Because I don't have non .min version of the kendo js files my bundles had to include them.  As a result my jquery.unobtrusive was loading twice (one .min version and one non .min version).  I fixed it by making a copy of the kendo js files and removing .min from the names.