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

6 posts, 0 answers
  1. Jaan
    Jaan avatar
    1 posts
    Member since:
    Apr 2012

    Posted 16 Aug 2012 Link to this post

    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?
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Aug 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Jaan
    Jaan avatar
    1 posts
    Member since:
    Apr 2012

    Posted 21 Aug 2012 Link to this post

    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
  5. Tyrone
    Tyrone avatar
    13 posts
    Member since:
    Feb 2014

    Posted 05 Aug 2014 Link to this post

    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...
  6. Tyrone
    Tyrone avatar
    13 posts
    Member since:
    Feb 2014

    Posted 07 Aug 2014 in reply to Tyrone Link to this post

    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...
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 08 Aug 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready