1. Home
  2. Forum
  3. ASP.NET MVC
  4. Not rendering in unobtrusive mode

Not rendering in unobtrusive mode

The uploadbox does not show in unobtrusive mode. The follwing razor code:

            @(Html.EJ().Uploadbox("albumUpload").CssClass("albumUpload")
                  .SaveUrl(Url.Action("SavePhotos", "Album", new {id = Model.Id}))
                  .RemoveUrl(Url.Action("RemovePhotos", "Album", new {id = Model.Id}))
                  .UploadBoxDialogAction(e => e.CloseOnComplete(false))
                  .ExtensionsAllow(".jpg, .jpeg, .png")
                  .ExtensionsDeny(".pdf, .docx")
                  .ClientSideEvents(cseb => cseb.FileSelect("dialogCenter"))
                  .ShowFileDetails(false)
                  .MultipleFilesSelection(true)
                  .UploadName("albumUpload")
                  .AllowDragAndDrop(true)
                  .ShowFileDetails(true)
                  )

Results in this html:

            <div id="albumUpload"
                 data-role="ejuploadbox"
                 data-ej-allowdraganddrop="true"
                 data-ej-extensionsallow=".jpg, .jpeg, .png"
                 data-ej-extensionsdeny=".pdf, .docx"
                 data-ej-saveurl="/web/7/album/savephotos/2673"
                 data-ej-uploadname="albumUpload"
                 data-ej-locale="en"
                 data-ej-removeurl="/web/7/album/removephotos/2673"
                 data-ej-cssclass="albumUpload"
                 data-ej-fileselect="dialogCenter"
                 class="e-uploadbox e-js e-widget albumUpload">

                <div class="e-selectpart e-select e-box">
                    <input id="albumUpload_SelectButton" class="e-inputbtn e-btn" type="button" data-role="none" value="Browse">
                    <input class="e-uploadinput" type="file" data-role="none" name="albumUpload" accept=".jpg, .jpeg, .png" multiple="multiple">
                </div>
            </div>

Which does not work, but if I put in this html in it does work:

            <div id="albumUpload"
                 data-role="ejuploadbox"
                 data-ej-allowdraganddrop="true"
                 data-ej-extensionsallow=".jpg, .jpeg, .png"
                 data-ej-extensionsdeny=".pdf, .docx"
                 data-ej-saveurl="@Url.Action("SavePhotos", "Album", new {Model.Id})"
                 data-ej-uploadname="albumUpload"
                 data-ej-removeurl="@Url.Action("RemovePhotos", "Album", new {Model.Id})"
                 data-ej-cssclass="albumUpload"
                 data-ej-fileselect="dialogCenter">
            </div>


3 Replies
KR Keerthana Rajendran Syncfusion Team June 28, 2018 07:17 AM UTC

Hi Wouter,   
   
Thanks for contacting Syncfusion Support.   
   
We suspect that this issue occurs, because you may not have referred ej.unobtrusive.min.js file in Layout page. We suggest you to refer to this file as shown below.   
   
<head>   
    <meta charset="utf-8" />   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>@ViewBag.Title - My ASP.NET Application</title>   
    @Styles.Render("~/Content/css")   
    @Styles.Render("~/Content/ej/web/default-theme/ej.web.all.min.css")   
    @Scripts.Render("~/bundles/modernizr")   
    @Scripts.Render("~/Scripts/jquery-3.1.1.min.js")   
    @Scripts.Render("~/Scripts/jsrender.min.js")   
    @Scripts.Render("~/Scripts/ej/ej.web.all.min.js")       
   @Scripts.Render("~/Scripts/ej/ej.unobtrusive.min.js")     
</head>   
   
Note: “ej.unobtrusive.min.js” should be referred below “ej.web.all.min.js” since it depends on it.   
   
We have attached a sample for your reference which can be downloaded from the below link.    
   
   
   
   
If the issue persists, kindly modify the above sample to reproduce the issue at our end along with product version used so that we can proceed further on this.   
   
Regards,   
Keerthana.   
 


WO Wouter June 28, 2018 11:58 AM UTC

That is not the problem. If I add the proper html it does work.

KR Keerthana Rajendran Syncfusion Team June 29, 2018 03:46 PM UTC

Hi Wouter, 
 
Sorry for the inconvenience. 
 
As we were unable to reproduce the issue in our end, we request you to provide the following details to proceed further. 
 
  1. Check the console window in chrome and share us console error details or screenshot.
  2. Product version used in your project.
  3. If possible modify the previously shared sample to reproduce the issue in our end.
 
Regards, 
Keerthana. 


Loader.
Up arrow icon