title: Load EditorTemplate with new model on ajax call - MVC project
body: <p>I'm trying to make an ajax call which will load a new model and reload my editorTemplates based on the current loaded model.</p>
  
  <p>Right now I have create an HotelModel which look like this:</p>
  
  <pre><code>public class HotelsModel
  {
      public List&lt;HotelsReservationModel&gt; HotelsReservation { get; set; }
      public bool SkipButton { get; set; }
  }
  
  public class HotelsReservationModel
  {
  
      public string City { get; set; }
      public DateTime CheckIn { get; set; }
      public DateTime CheckOut { get; set; }
      public List&lt;Hotel&gt; Hotels { get; set; }
  
  }
  
  public class Hotel
  {
      public string Name { get; set; }
      public int Rating { get; set; }
  }
  </code></pre>
  
  <p>Then I have created some EditorTemplates: <strong>HotelsReservationModel.cshtml &amp; Hotel.cshtml</strong></p>
  
  <p>Right now, I have the following order:</p>
  
  <ol>
  <li>Index.cshtml (calling HotelsModel)</li>
  <li>HotelsReservationModel.cshtml (calling HotelsReservationModel)</li>
  <li>Hotel.cshtml (calling Hotel)</li>
  </ol>
  
  <p>I'm trying to pass in a new Hotel (model), so when a user click on search, an ajax call will happen and some knew hotels should appear.</p>
  
  <p><strong>My ajax code:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(function () {
  
      var res = {
          loader: $("&lt;div /&gt;", { class: "loader" }),
      };
  
      $('#search').on('click', function () {
          $.ajax({
              type: 'GET',
              url: "@Url.Action("Find", "Hotel")",
              datatype: "html",
              beforeSend: function () {
                  $("#group-panel-ajax").append(res.loader);
              },
              success: function (data) {
                  $("#group-panel-ajax").find(res.loader).remove();
                  $('#group-panel-ajax').html(data);
              }
          });
          return false;
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Code from HotelsReservationModel.cshtml</strong></p>
  
  <pre><code>&lt;div class="group-panel" id="group-panel-ajax"&gt;
      @Html.EditorFor(m =&gt; m.Hotels)
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>ActionResult Find method</strong></p>
  
  <pre><code>public ActionResult Find()
      {
          Hotel model = new Hotel()
          {
              Name = "Cromwell Hotel ",
              Rating = 5,
  
          };
  
          return PartialView("Hotel", model);
  
      }
  </code></pre>
  
  <p>Can any see what I am doing wrong? </p>
  
  <p>If i run "Return PartialView("Index", model) something is loaded.. what then the whole page with the model is loaded inside the div. What i want is to just load the "Hotel" --> Hotel.cshtml with the new model.</p>