Submitting POST on a window and loading different content related to submitted content

[Jaan]

Hi
I have this issue with KendoUI window control. I will add some code as well.

My view with window opening logic.

@(Html.Kendo().Window()

    .Name("window")

    .LoadContentFrom("FirstAction", "Controller", new { area = ""})

    .Modal(true)

    .Visible(false)

      )

<script type="text/javascript" language="javascript">

    function openModalForm(e) {

        e.preventDefault();

        var windowElement = $('#window').data("kendoWindow");

        windowElement.refresh();

        windowElement.center();

        windowElement.open();

    }

</script>

                <span>@Html.ActionLink("Link to open window", "Action", Controller", new { area = "" }, new { onclick = "javascript:openModalForm(event);" })</span>

FirstAction in Controller returns this:

public ActionResult FirstAction()

{

   return PartialView("_MainWindowContent", new MyModel());

}

_MainWindowContent contains:

@model MyWeb.Models.MyModel

<div class="popup" id="popupDiv">

    @{

        Html.RenderPartial("_FirstStep", Model);

    }

</div>

_FirstStep contains:

@model MyWeb.Models.MyModel

    <div class="form">

        <h1 class="step-1">Form field title</h1>

        <div class="form-list">

            @using (Ajax.BeginForm("FirstStep", "Controller", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "popupDiv", InsertionMode = InsertionMode.Replace }, new { id = "mainForm" }))

            {

                <ul>

                    <li class="form-field" id="firstField">

                        @Html.LabelFor(m => m.FirstField, "First field")

                        <div class="input-box">

                            @Html.TextBoxFor(m => m.FirstField)

                        </div>

                    </li>

                 

                    <li class="form-field" id="secondField">

                        @Html.LabelFor(m => m.SecondField)

                        <div class="input-box">

                            @Html.TextBoxFor(m => m.SecondField)

                        </div>

                    </li>

                    <li class="form-field" id="thirdField">

                        @Html.LabelFor(m => m.ThirdField)

                        <div class="input-box">

                            @Html.TextBoxFor(m => m.ThirdField)

                        </div>

                    </li>

                    <li class="form-field" id="fourthDate">

                        @Html.LabelFor(m => m.FourthDate)

                        <div class="password-box">

                            @Html.Kendo().DatePickerFor(m => m.FourthDate)

                        </div>

                    </li>

                </ul>

                @Html.HiddenFor(m => m.HiddenValue)

            }

        </div>

        <div class="popup-navigation">

            <button id="nextButton"> Go to next step </button>

        </div>

    </div>

        <script type="text/javascript" language="javascript">

             

            $("#nextButton").click(function () {

                $("#HiddenValue").val("true");

                $("#mainForm").submit();

            });

    </script>

    </div>

FirstStep contains some logic and then return partial view "SecondStep" with some more new fields. I thought it should update the div with the id of "popupDiv". This is at least how it worked in telerik window control, which I also used a bit. But what it does on my machine is that, it just goes straight to {site}/Controller/FirstStep, that is what I see on the browser address. The whole page contains only elements from SecondStep partial view. The controller FirstStep gets all the data correctly. Is there any way to post data or update window or am I missing some attributes or something?

[Daniel]

Hello Jaan,

I am not sure what is causing the problem. Is the Ajax form working when used outside of the Window? If yes, could you provide a runnable sample which reproduces the problem?

Regards,
Daniel
the Telerik team

[Jaan]

Hi

I finally found out, that I had too many references to scripts on the mainpage. And I guess I was also missing unobtrusive jquery, so this is solved now. Got it to work, thank you for your answer.

Jaan

[Tyrone]

I found this old post and it helped me a ton... I do have a question though... after getting this concept to work, I have tried to create an Ajax form in the window as an on demand item.  This header/detail records.  I want to be able to click on a link, that will in turn open a UI Window that will load the form from a partial page.
When the form loads as a partial page, I can make changes to the data in the form, then I hit my save button.  On save, it calls the required controller and posts the changes as needed to my service.  Howerver, when I click on a second header line link, the window loads, the form loads, BUT I am unable to get the page to post to the controller.  The button does nothing.

I thought this may be an issue with multiple IDs, but it does not look like it.... Here are some code samples...

My Form as a oa _ResourceManagementForm.cshtml 

@using System.Globalization

@model INSightLib.Repositories.ListRepositories.EmployeeProjectWorkstreamAllocationLists

 

@*@using (Html.BeginForm("ProcessResourceManagement", "ProjectConfiguration", Model, FormMethod.Post))*@

 

@{

    string formGuid = Guid.NewGuid().ToString();

    string MainFormID = "MainForm-" + formGuid;

    string btnID = "btn-" + formGuid;

}

 

@using (Ajax.BeginForm("ProcessResourceManagement", "ProjectConfiguration", Model, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "popupDiv", InsertionMode = InsertionMode.Replace }, new { id = "mainform" }))

 

    {

 

 

 

   @*   @Html.HiddenFor(x => x.ProjectID)*@

        <input type="hidden" value="@Model.ProjectID" name="ProjectID">

        @(Html.Kendo().PanelBar()

        .Name(Guid.NewGuid().ToString())

        .ExpandMode(PanelBarExpandMode.Single)

        .HtmlAttributes(new { style = "width:850px" })

        .Items(panelbar =>

        {

 

 

            foreach (var WorkstreamName in Model.DetailRecords.Select(x => new { x.workstream, x.workstream_id }).Distinct().OrderBy(x => x.workstream))

            {

                string PanelTabName = WorkstreamName.workstream;

                string WorkstreamInputValue = WorkstreamName.workstream_id;

 

 

                panelbar.Add().Text(PanelTabName)

 

                .Expanded(false)

                .Content(@<div style="padding: 10px; background-color: White; color: #333333">

                 

 

                <div class="chart-wrapper">

                    @(Html.Kendo().Chart(Model.DetailRecords.Where(x => x.workstream == WorkstreamName.workstream).Select(x => x))

                        .Name("chart" + Guid.NewGuid())

                        .Theme("newTheme")

                        .Title("Break-up of " + WorkstreamName.workstream)

                        .Legend(legend => legend

                            .Position(ChartLegendPosition.Bottom)

                        )

                        .Series(series =>

                        {

                            series.Pie("percenta_of_work_owned", "full_name");

                        })

                        .Tooltip(tooltip => tooltip.

                            Template("${ category } - ${ value }").Visible(true)

                        )

                    )

                </div>

                 

                    <table id="@WorkstreamName.workstream_id" style="border-width:2 solid Gray">

                        <thead>

                            <tr>

                                <th>Employee</th>

                                <th>Portion of Work Assigned</th>

                                <th>Lead Consultant</th>

                                <th>Estimated Hours</th>

                                <th>Percent Owned</th>

                                <th>Temp ID</th>

                         

                            </tr>

                        </thead>

                        <tbody>

                        @foreach (var Workstream in Model.DetailRecords.Where(x => x.workstream == WorkstreamName.workstream).Select(x => x))

                        {

                            string WorkstreamInputName = "wsid-" + Workstream.fa_employee_workstream_allocation_guid_as_string;

                             

                             

                            <tr>

                                <td>

                                    @Workstream.full_name

                                    <br />

                                    <span style="font-size:10px; color:#CCCCCC">

                                        @Workstream.fa_employee_workstream_allocation_guid_as_string

                                    </span>

 

                                    <input type="hidden" name="[e-mail]_employee_workstream_allocation_guid_as_string" value="false">

                                    <input type="hidden" name="@WorkstreamInputName" value="@WorkstreamInputValue">

                                </td>

                                <td>

                                    @(Html.Kendo().NumericTextBoxFor(x => Workstream.portion_of_work_owned)

                                      .Name("powo-" + Workstream.fa_employee_workstream_allocation_guid_as_string)

                                            .Format("N2")

                                            .Min(0)

                                            .Max(10000m)

                                            .Step(1m)

 

                                        )

                                </td>

                                <td>

                                    @(Html.CheckBox("il-" + Workstream.fa_employee_workstream_allocation_guid_as_string,

                                    (bool)Workstream.is_primary_on_project))

                                     

                                </td>

                                <td>

                                    @(((double)Workstream.workstream_hours_owned).ToString("#,###.00", CultureInfo.InvariantCulture))

                                     

                                </td>

 

                                <td>

                                        @(((double)Workstream.percenta_of_work_owned).ToString("p2", CultureInfo.InvariantCulture))

                                </td>

 

 

 

                                     

 

                            </tr>

                        }

                         

 

                        @*Add 5 additional rows*@

                        @{

                             

                            for (int i = 0; i < 5; i++)

                            {

 

                                //Create a new GUID

                                string newGUID = Guid.NewGuid().ToString();

                                 

                                 

                                <tr class="newResourceAllocation">

                                <td>

                                    <input type="hidden" name="isNew-@newGUID" value="true">

                                    <input type="hidden" name="wsid-@newGUID" value="@WorkstreamInputValue">

 

                                    @(Html.Kendo().DropDownList()

                                        .Name("ee-" + newGUID)

                                        .BindTo((List<string>)Session["EmployeeList"])

                                    )

 

                                </td>

                                <td>

                                    @(Html.Kendo().NumericTextBox<decimal>()

                                      .Name("powo-" + newGUID)

                                      .Value(0m)

                                            .Format("N2")

                                            .Min(0)

                                            .Max(10000m)

                                            .Step(1m)

 

                                        )

                                </td>

                                <td>

                                @(Html.CheckBox("il-" + newGUID,

                                    false))

                                </td>

                                <td>0.00</td>

                                <td style="font-size: x-small; color: Gray">0.00</td>

                                <td style="font-size: x-small; color: Gray">@newGUID</td>

                                </tr>

                            }

                            }

 

                        </tbody>

                    </table>

                    <span style="font-size: xx-small; color: Gray;">@WorkstreamName.workstream_id</span>

                    <a href="#" class="showNewResourceAllocation">Add New Allocations</a>

                </div>);

 

 

            }

 

 

        })

        )

        <button id="submitBtn" type="submit" value="Save Changes & Return" class="btn">ffff</button>

     

 

    }

My Call to the partial

<div class="popup" id="popupDiv">

    <!-- FORM -->
    @{
        Html.RenderPartial("_ResourceManagementForm", Model);
    }

</div>

One of the many different ways I tried to submit the data...

<script type="text/javascript">
    $("#submitBtn").click(function () {

        $("#mainform").ajaxSubmit();
    });
</script>

My Controller

public ActionResult ProcessResourceManagement(EmployeeProjectWorkstreamAllocationLists ModelObject)
   {
       UpdateEmployeeProjectWorkstreamAllocations updatePackage = new UpdateEmployeeProjectWorkstreamAllocations();
       List<UpdateEmployeeProjectWorkstreamAllocationsDataPoint> updates = new List<UpdateEmployeeProjectWorkstreamAllocationsDataPoint>();
       updatePackage.list = updates;

       //Serialize the form into an object...
       updatePackage.Project_ID = Request.Form["ProjectID"];
       foreach (string key in Request.Form.Keys)
       {
           if (key.StartsWith("powo-"))
           {
               string FieldSetKey = key.Replace("powo-", "");

               bool is_primary_checked = false;
               if(Request.Form["il-" + FieldSetKey].Contains("true"))
               {
                   is_primary_checked = true;
               }

               if(!(Request.Form["ee-" + FieldSetKey] == ""))
               {
               updates.Add(new UpdateEmployeeProjectWorkstreamAllocationsDataPoint(){
                   RecordGUIDasString = FieldSetKey.Replace("NEW-", ""),
                   FullName = Request.Form["ee-" + FieldSetKey],
                   NewValue = Convert.ToDecimal(Request.Form["powo-" + FieldSetKey]),
                   is_primary_on_project = is_primary_checked,
                   WorkstreamID = Request.Form["wsid-" + FieldSetKey],
                   is_new = bool.Parse(Request.Form["isNew-" + FieldSetKey])
               });
               }
           }

       }


       //Submit the changes and get the new model back...
       EmployeeProjectWorkstreamAllocationLists EmployeeProjectWorkstreamAllocationRecords = new EmployeeProjectWorkstreamAllocationLists();
       EmployeeProjectWorkstreamAllocationRecords = GetEmployeeProjectWorkstreamAllocationRecords(updatePackage);

       return PartialView("_ResourceManagementForm", EmployeeProjectWorkstreamAllocationRecords);
       //return View("ResourceManagement", EmployeeProjectWorkstreamAllocationRecords);
       //return View("ProjectPerformance", (DataFilterRepository)Session["DFR"]);
       //return RedirectToAction("Index", "ProjectPerformance");
   }

I did try to give everything unique ids including the form, the submit button as well as every item in the form...

[Tyrone]

Posting response to my own post as I found a work around...
Using iframe on the Kendo Window allowed for full control of the form.  I believe the root of the issue I was having is related to the form losing contact with its listeners, but I could not figure out how to fix that with jQuery...

[Daniel]

Hello,

The unobtrusive ajax scripts use a delegated handler on the document so reloading the form should not be causing the issue. Could you provide the code for the window so I can check the exact setup?

Regards,
Daniel
Telerik