PartialView not rendering properly on ajax reload
<p>Im having an issue to reload a partial view using ajax.</p>
<p>I have my country form in a partial view, and initially when i load the main page everything is rendered properly.</p>
<p>As demonstrated in the image below, I can search for country using my autocomplete and i can select a countryfrom my combobox (both are kendo-mvc controntrols)</p>
<p><a href="https://i.stack.imgur.com/7IWGy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7IWGy.png" alt="enter image description here" /></a></p>
<p>The issue emerges when i select a from my autocomplete and try to load the info of the selected country via ajax. The form is reloaded, the info is displayed but the controls are not being rendered properly. The autocomplete stops working and the combobox is rendered as a normal textbox, displaying the CountryID instead of the Country name.</p>
<p><a href="https://i.stack.imgur.com/XlPBg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XlPBg.png" alt="enter image description here" /></a></p>
<p>Code in my view</p>
<pre><code>@using (Html.BeginForm(&quot;Index&quot;, &quot;CountryManagement&quot;, FormMethod.Post, new { id = &quot;country-form&quot; }))
{  
    @Html.ValidationSummary(true);
    &lt;div id=&quot;form-content&quot;&gt;
         @Html.Partial(&quot;_CountryForm&quot;, Model)
    &lt;/div&gt;

}
</code></pre>
<p>Code in my partialview</p>
<pre><code>&lt;div class=&quot;form-group&quot;&gt;
        @Html.Label(&quot;Search Country&quot;, htmlAttributes: new { @class = &quot;control-label col-md-2&quot; })
        &lt;div class=&quot;col-md-3&quot;&gt;
            @(Html.Kendo().AutoCompleteFor(m =&gt; m.Search)
                          .DataTextField(&quot;Designation&quot;)
                          //.DataValueField(&quot;CountryID&quot;)
                          .Filter(&quot;contains&quot;)
                          .MinLength(2)
                          .DataSource(d =&gt; { d.Read(r =&gt; r.Action(&quot;SearchCountry&quot;, &quot;Common&quot;)); })
                          .Events(e =&gt; e.Change(&quot;onChange&quot;)).Deferred()
            )
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>
<p>Code in my controller</p>
<pre><code>[HttpPost]
public PartialViewResult Edit(int id)
{
    //HTTP GET: api/Country/CountryDetails?id={id}&amp;lang={lang}
    dynamic model =  //code to get selcted country data
    return PartialView(&quot;_CountryForm&quot;, model);
}
</code></pre>
<p>Code in my .js file</p>
<pre><code>function onChange() {
    
    if ($(&quot;#Search&quot;).data(&quot;handler&quot;)) {
        var data = $(&quot;#Search&quot;).data(&quot;handler&quot;).dataSource.data();
        var country = data.find(x =&gt; x.Designation == $(&quot;#Search&quot;).val());
        console.log(&quot;Country&quot;)
        if (country) {
            var request = $.post('/CountryManagement/Edit', { id: country.CountryID });
            request.success(function (data) {
                $(&quot;#form-content&quot;).html(data);
            });
        }
    }
}
</code></pre>
<p>HTML code generated on page load (autocomplete and dropdown only)</p>
<pre><code>&lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;control-label col-md-2&quot; for=&quot;Search_Country&quot;&gt;Search Country&lt;/label&gt;
    &lt;div class=&quot;col-md-3&quot;&gt;
        &lt;span tabindex=&quot;-1&quot; role=&quot;presentation&quot; class=&quot;k-widget k-autocomplete k-header k-state-default k-state-hover&quot;&gt;&lt;input data-val=&quot;true&quot; data-val-length=&quot;Description  must have between 1  and 150 characters&quot; data-val-length-max=&quot;150&quot; data-val-length-min=&quot;1&quot; id=&quot;Search&quot; name=&quot;Search&quot; type=&quot;text&quot; data-role=&quot;autocomplete&quot; class=&quot;k-input&quot; autocomplete=&quot;off&quot; role=&quot;textbox&quot; aria-haspopup=&quot;true&quot; aria-disabled=&quot;false&quot; aria-readonly=&quot;false&quot; aria-owns=&quot;Search_listbox&quot; aria-autocomplete=&quot;list&quot; has-focus=&quot;false&quot; style=&quot;width: 100%;&quot;&gt;&lt;span class=&quot;k-icon k-loading&quot; style=&quot;display:none&quot;&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;control-label col-md-2&quot; for=&quot;Country&quot;&gt;Country&lt;/label&gt;
    &lt;div class=&quot;col-md-3&quot;&gt;
       &lt;span class=&quot;k-widget k-combobox k-header&quot;&gt;&lt;span tabindex=&quot;-1&quot; unselectable=&quot;on&quot; class=&quot;k-dropdown-wrap k-state-default&quot;&gt;&lt;input name=&quot;CountryID_input&quot; class=&quot;k-input&quot; type=&quot;text&quot; autocomplete=&quot;off&quot; title=&quot;&quot; role=&quot;combobox&quot; aria-expanded=&quot;false&quot; tabindex=&quot;0&quot; aria-disabled=&quot;false&quot; aria-readonly=&quot;false&quot; aria-autocomplete=&quot;list&quot; aria-owns=&quot;CountryID_listbox&quot; has-focus=&quot;false&quot; style=&quot;width: 100%;&quot;&gt;&lt;span tabindex=&quot;-1&quot; unselectable=&quot;on&quot; class=&quot;k-select&quot;&gt;&lt;span unselectable=&quot;on&quot; class=&quot;k-icon k-i-arrow-s&quot; role=&quot;button&quot; tabindex=&quot;-1&quot; aria-controls=&quot;CountryID_listbox&quot;&gt;select&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;input data-val=&quot;true&quot; data-val-number=&quot;The field CountryID must be a number.&quot; id=&quot;CountryID&quot; name=&quot;CountryID&quot; type=&quot;text&quot; value=&quot;0&quot; data-role=&quot;combobox&quot; aria-disabled=&quot;false&quot; aria-readonly=&quot;false&quot; has-focus=&quot;false&quot; style=&quot;display: none;&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;field-validation-valid text-danger&quot; data-valmsg-for=&quot;CountryID&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>HTML code generated on partialview reload (autocomplete and dropdown only)</p>
<pre><code>&lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;control-label col-md-2&quot; for=&quot;Search_Country&quot;&gt;Search Country&lt;/label&gt;
    &lt;div class=&quot;col-md-3&quot;&gt;
        &lt;input data-val=&quot;true&quot; data-val-length=&quot;Description  must have between 1  and 150 characters&quot; data-val-length-max=&quot;150&quot; data-val-length-min=&quot;1&quot; id=&quot;Search&quot; name=&quot;Search&quot; type=&quot;text&quot; value=&quot;South Africa&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;
&lt;br&gt;
&lt;div class=&quot;form-group&quot;&gt;
    &lt;label class=&quot;control-label col-md-2&quot; for=&quot;Country&quot;&gt;Country&lt;/label&gt;
    &lt;div class=&quot;col-md-3&quot;&gt;
       &lt;input data-val=&quot;true&quot; data-val-number=&quot;The field CountryID must be a number.&quot; id=&quot;CountryID&quot; name=&quot;CountryID&quot; type=&quot;text&quot; value=&quot;1003&quot;&gt;
        &lt;span class=&quot;field-validation-valid text-danger&quot; data-valmsg-for=&quot;CountryID&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>I'm not sure if this is an issue with ASP.Net MVC partialviews, Kendo controls or some scripts that should be re-run when the partialview reloads.
Can someone please help me?</p>