This is a migrated thread and some comments may be shown as answers.

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

5 Answers 948 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jaan
Top achievements
Rank 1
Jaan asked on 16 Aug 2012, 08:58 AM
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?

5 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 21 Aug 2012, 09:16 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jaan
Top achievements
Rank 1
answered on 21 Aug 2012, 12:52 PM
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
0
Tyrone
Top achievements
Rank 1
answered on 05 Aug 2014, 09:12 PM
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="isNew-@Workstream.fa_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...
0
Tyrone
Top achievements
Rank 1
answered on 07 Aug 2014, 12:30 PM
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...
0
Daniel
Telerik team
answered on 08 Aug 2014, 02:48 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Window
Asked by
Jaan
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Jaan
Top achievements
Rank 1
Tyrone
Top achievements
Rank 1
Share this question
or