Problems using partial views containing EJ controls

[R Brian Lindahl]

i'm migrating an MVC 5 app to asp.net core. in mvc5, I was told that I need to call ej.widget.init in my AJAX handler in order to activate the controls. For example:

function onChange(args) {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
              $("#homeContent").html(this.responseText);
              ej.widget.init($("#homeContent")); // Initiate control rendering
            }
          };
          xhttp.open("POST", "/Home/Date", true);
          xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          xhttp.send("d=" + args.value);

I'm assuming that this has changed somewhat for Core - as all I get on the page after the AJAX is an empty rectangle where the control should have been. What's the proper way to do this in asp.net core?

[Koushik Ramaswamy]

Hi Brian, 

 

Thanks for using Syncfusion Products. 

 

We have checked your reported issue and we are unable to reproduce the reported issue at our end. We have created a sample with your provided code example and it is working fine. For your convenience, we have attached the sample below. 

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/130100/ze/GridSample-520500140  

  

Please check the attached sample and if the issue doesn’t resolve yet, please get back to us with more information on this issue.  

 

Regards, 

Koushik R 

[R Brian Lindahl]

I wasn't able to use your sample directly - I've moved on to VS 2017, and had problems upgrading the project. So I created a new app, using the Net Core on Net Framework project type. I followed the instructions in the ASP.Net Core/Getting Started/VS2017 page in the syncfusion docs. I copied your controller, model, and views into the new project.

Upon running the project, I get the same kind of result that I experienced in my main project. I did notice a problem, in the form of a JavaScript exception - a TypeError saying "ej.widget.init is not a function".

I've attached the project.

Attachment: WebApplication3_7c0cb762.zip

[Koushik Ramaswamy]

Hi Brian, 

 

Thanks for your update. 

 

We have checked the sample you attached and we found that the ej.unobtrusive.min.js script is not referred which is required to render our components in unobtrusive mode. For your convenience, we have attached the sample below.  

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/130100/ze/WebApplication3_7c0cb762-2143710629  

 

Please check the attached sample and if the issue doesn’t resolve yet, please get back to us with more information on this issue.   

 

Regards, 

Koushik R 

[R Brian Lindahl]

Ah, yes, I remember this from the MVC version. You might want to send this over to your documentation team to add similar instructions to the Getting Started/VS2017 page - it doesn't make any mention of the obtrusive/inobtrusive differences.

[R Brian Lindahl]

Sorry to say, it still doesn't work. The grid appears OK, but if I add a datepicker via the <ej-datepicker> taghelper, it doesn't show properly. I've attached a modified project that more closely approximates my actual code.

Attachment: WebApplication3b_69b685c4.zip

[Mohan Kumar Ramasamy]

Hi Brian, 

 

Thanks for your update. 

 

We have checked the reported query and we would like to let you know that, control rendering using tag directives can be done with script manager. Since unobtrusive mode is not supported with tag directives in ASP.NET Core platform. If you want to render the control using unobtrusive mode, you can use Javascript control creation.  We have modified and attached the sample below. 

 

Sample :  http://www.syncfusion.com/downloads/support/forum/130100/ze/WebApplication-841788617  

 

Please check the attached sample and if the issue doesn’t resolve yet, please get back to us with more information on this issue.  

 

Regards, 

MohanKumar R  

[R Brian Lindahl]

Thank you for the new sample. It works OK - except when there's an EJ control on the main page AND there's an @Html.Partial on the main page to load the partial when the page is first loaded... i.e., something like this:

<ej-date-picker id="DatePick1" value="DateTime.Today"></ej-date-picker>

<button onclick="loadGrid()">Reload content</button><br /><br />

<div id="contentzone">
  @Html.Partial("_homeContent.cshtml", Model)
</div>

In this case, neither the main page control (i.e., DatePick1) nor the one on the partial render correctly. They're both an empty input with no content or decoration.

This is very similar to my "real" app... several pages have a DatePicker along with a partial, which reloads in the OnChange of the DatePicker.

[Koushik Ramaswamy]

Hi Brian, 

 

We suspect that you are trying to render the ASP.NET Core control in unobtrusive mode. We already mentioned in our previous update that JS or MVC controls can be rendered in unobtrusive mode. If misunderstood, sorry for the inconvenience caused. For rendering ASP.NET Core controls, the unobtrusive script should not be referred. 

 

Please find the attached sample. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/130100/ze/WebApplication3b_69b685c4-699124946  

 

Regards, 

Koushik R 

[R Brian Lindahl]

This is a very strange situation. I ran your sample, and it worked. I added the 'reload' button and script from the previous sample, and it failed - on initial page load, the boxes were just empty, no SF styling or decoration. I took the button and script back out, and it STILL failed. I re-extracted the .cshtml from the zip file, and it worked again. AND my other sample, which had been failing, also worked.

I'm not interested in pursuing this any further at this point...  the partial views & AJAX weren't that essential to the application - 99% of the page would have been reloaded in most of the cases. I'm going to just put the stuff that had been on a partial on the main page(s).

I do sincerely thank you for the help.

[Koushik Ramaswamy]

Hi Brian, 

 

Thanks for your update. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Koushik R