title: I cannot workout how to use a Partial View in a form that uses Knockout in MVC
body: <p>This is my view;</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
  Inherits="System.Web.Mvc.ViewPage&lt;SHP.Models.TrainingListEmployeesViewModel&gt;" %&gt;
  &lt;%@ Import Namespace="System.Web.Script.Serialization" %&gt;
  &lt;%@ Import Namespace="SHP.Helpers" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"&gt;
      Bulk Training
  &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
  &lt;form class="employeeListEditor" data-bind="submit: save"&gt;
      &lt;fieldset&gt;
      &lt;legend&gt;Allocate or cancel training for the selected employees&lt;/legend&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td style="text-align: right;"&gt;Course Name&lt;/td&gt;
              &lt;td&gt;&lt;%: Html.EditorFor(model =&gt; model.TrainingName)%&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="text-align: right;"&gt;Description (optional)&lt;/td&gt;
              &lt;td&gt;&lt;%:
             Html.TextAreaFor(
                 model =&gt; model.TrainingDescription, new { maxlength = "255", style = "width:400px;height:100px;" })%&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;%: Html.EditorFor(model =&gt; model.ClientEmployeeSelector)%&gt;
      &lt;button id="btnAdd" data-bind="click: addEmployee"&gt;Add&lt;/button&gt;&lt;button data-bind="click: clearEmployee"&gt;Clear&lt;/button&gt;
      &lt;div id="displayEmployees" style="margin-top:10px;" data-bind="visible: employees().length &gt; 0"&gt;
          &lt;table id="employeeDataTable" class="groupBorder"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;/th&gt;
                      &lt;th&gt;Employee&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody data-bind="foreach: employees"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;a href="#" data-bind="click: $parent.removeEmployee"&gt;Remove&lt;/a&gt;
                          &lt;input type="hidden" data-bind="value: SearchTextId"/&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&lt;span data-bind="text: SearchText"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;               
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div id="employeeCalendar"&gt;
          &lt;% if(Model.Cvm != null)
             {%&gt;
              &lt;% Html.RenderPartial("Calendar", Model.Cvm); %&gt;
              &lt;div&gt;&lt;span style="margin-top: 10px"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div style="margin-top:20px;"&gt;
                  &lt;div style="display: inline; margin-right:20px; padding:5px;"&gt;
                      &lt;%:Html.MakePopupForm&lt;SHP.Controllers.LeaveController&gt;(o =&gt; o.TrainingSingleDate(), refreshOnSuccess: true)%&gt;
                      &lt;%:Html.PopupFormActionLink&lt;SHP.Controllers.LeaveController&gt;(o =&gt; o.TrainingSingleDate(), "Add a single date")%&gt;
                  &lt;/div&gt;
              &lt;/div&gt;    
              &lt;% if (TempData["SuccessMessage"].ToSafeString().Length &gt; 0)
                 {%&gt;
                      &lt;p class="success" style="padding-top: 20px;"&gt;&lt;%: TempData["SuccessMessage"].ToSafeString() %&gt;&lt;/p&gt;
              &lt;% } %&gt;     
          &lt;% }%&gt;
      &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  
      &lt;script type="text/javascript"&gt;
          function Employee(id, text) {
              var self = this;
              self.SearchTextId = ko.observable(id);
              self.SearchText = ko.observable(text);
          }
          $(document).ready(function () {         
              $('#SearchText').attr("data-bind", "value: autocompleteSearchText");
              $('#SearchTextId').attr("data-bind", "value: autocompleteSearchTextId");
              $("#TrainingName").attr("data-bind", "value: trainingName");
              $("#TrainingDescription").attr("data-bind", "value: trainingDescription");
  
              var initialData = &lt;%= new JavaScriptSerializer().Serialize(Model) %&gt;;
              var autocompleteData = { "autocompleteSearchTextId": 0, "autocompleteSearchText": null };
              function viewModel() {
                  var self = this;
                  self.employees = ko.observableArray(initialData.EmployeeList);
                  self.trainingName = ko.observable(initialData.TrainingName);
                  self.trainingDescription = ko.observable(initialData.TrainingDescription);
                  self.autocompleteSearchText = ko.observable(autocompleteData.autocompleteSearchText);
                  self.autocompleteSearchTextId = ko.observable(autocompleteData.autocompleteSearchTextId);
                  self.removeEmployee = function(employee) {
                      $("#btnAdd").after("&lt;span class='error'&gt;Please wait for calendar update ...&lt;/span&gt;");
                      self.employees.remove(employee);
                      self.save();
                  };
                  self.clearEmployee = function() {
                      self.autocompleteSearchText('');
                  };
                  self.addEmployee = function() {
                      $("#btnAdd").after("&lt;span class='error'&gt;Please wait for calendar update ...&lt;/span&gt;");
                      self.employees.push(new Employee(self.autocompleteSearchTextId(), self.autocompleteSearchText()));
                      self.autocompleteSearchText('');
                      self.save();
                  };
                  self.save = function() {
                      var list = ko.toJS(self.employees);
                      var name = ko.toJS(self.trainingName);
                      var description = ko.toJS(self.trainingDescription);
                      ko.utils.postJson(location.href, { employees: list, trainingName: name, trainingDescription: description });
                  };
              }   
              ko.applyBindings(new viewModel());
          });
      &lt;/script&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>You may notice I have a popup form in this view. 
  Also I would like to put all the code in the employeeCalendar div in a partial view.
  Because of the popup window, I have to make sure in my controller that I redirect my Post method to my Get method so that when the popup data input has been completed and undates this view, I do not get an unwanted resend message  from windows.
  The problem with doing these redirects is that I get a full page postback that looks unpleasent. So I would prefer to refresh my claendar from a partial view via Ajax.
  So how do I do this?
  This is my controller</p>
  
  <pre><code>   [HttpGet]
      [Authorize(Roles = "Administrator, Trainer, ManagerAccounts, ManagerIT")]
      public ActionResult BulkTraining()
      {
          if (SessionObjects.Tlevm == null)
          {
              return this.View(new TrainingListEmployeesViewModel());
          }
  
          return this.View(new TrainingListEmployeesViewModel(
              SessionObjects.Tlevm.EmployeeList,
              SessionObjects.TrainingName,
              SessionObjects.TrainingDescription));
      }
  
      [HttpPost]
      [Authorize(Roles = "Administrator, Trainer, ManagerAccounts, ManagerIT")]
      public ActionResult BulkTraining([FromJson] IEnumerable&lt;ClientEmployeeSelector&gt; employees, string trainingName, string trainingDescription)
      {
          // Items stored in Session used when saving the training dates for the employee
          // via the popup window
          SessionObjects.TrainingName = trainingName.JsonTrim();
          SessionObjects.TrainingDescription = trainingDescription.JsonTrim();
          SessionObjects.EmployeeIdList = employees.Select(x =&gt; x.SearchTextId).ToList();
          SessionObjects.EmployeeNameList = SessionObjects.EmployeeIdList.Count &gt; 0
                          ? Employee.GetNameList(SessionObjects.EmployeeIdList)
                          : string.Empty;
          SessionObjects.Tlevm = new TrainingListEmployeesViewModel(
              employees.ToList(),
              SessionObjects.TrainingName,
              SessionObjects.TrainingDescription);
          return this.RedirectToAction("BulkTraining");
      }
  </code></pre>