Partial view with EJ2 controls do not work if added more than once on the page

[Avinash]

Hi,

I have a file uploader inside a partial view. If I add more than one partial view on a razor page, only the uploader in the 1st partial view renders, the rest don't. How can I get multiple partial view instances to correctly render ejs controls.

Full Project is attached

Thanks

Avinash Tauro

Attachment: WebApplicationEj2Partial_b211c8fe.zip

[UdhayaKumar Duraisamy]

You can follow the Syncfusion blog shared below regarding your requirement.

• https://www.syncfusion.com/kb/9630/how-to-render-syncfusion-components-in-partial-view

• https://www.syncfusion.com/kb/13593/how-to-render-controls-in-partial-views-using-ajax-in-asp-net-core-without-duplicate-header

[Avinash]

Hi,

You have shared a the introductory explanation of how to use partial views. I know how to use partial views and my problem is specifically when using a partial view twice on the page.

The example in your link uses the partial view only once . When I change the code in your example to display partial view twice, I see the exact same error.

Also I am using Razor Pages while both these examples are for MVC. 

Additionally in Razor Pages you can simply use <partial name="partialViewName" /> rather than javascript as in your example.

Anyway my problem irrespective of whether its MVC or Razor pages, is only when I use the partial view twice in my Razor Page.

Thanks

Avinash Tauro

[Priyanka Karthikeyan]

Hi Avinash,

To resolve this issue, you can try using unique IDs for each file uploader instance inside the partial views. By default, the IDs of the ejs controls generated in partial views will be the same across all instances, which can cause conflicts and issues with rendering.

For example, you can use the following code to generate a unique ID for each file uploader:

@{

    string uploaderId = "uploader_" + DateTime.Now.Ticks.ToString();

}

<div class="rounded bg-light pt-3 pb-3">

    <div>

        <ejs-uploader id="@uploaderId"></ejs-uploader>

    </div>

    <div>

        <label for="txtSomeThing">Enter something here: </label>

        <input type="text" id="txtSomeThing" />

    </div>

</div>

Regards,

Priyanka K

Attachment: ModifiedSample_d4caeb31.zip