multiple partial views with same kendo mvc upload control

Question

I had a partial view which is having a Kendo MVC upload control. And now i need to use this partial view multiple times in a single .cshtml page.

Am facing problem with Control's ID and DOM conflicts... Like first Kendo upload is coming properly but second kendo upload is failing to load in UI.

So I came up with a dynamic .Name (...) so that whenever a kendo upload gets loaded it will be having unique ID.

Now the problem came with controller method. Here I need to get IEnumerable(HttpPostedFileBase) object on button click.

Am bit lost. Any hint is very helpful.

Rgds,

pavan

Edit To be more clear Let's say we had a partial view with textbox and button. on clicking the button we need to validate the textbox. But if the same partial view need to be used multiple times under same CSHTML is the one am facing now.

In multiple partial view why the same `id` for upload control again and again? Just Try by having the different `ID`'s and point the `Same Controller and Upload Action Methods` to that., so that you can avoid conflicts. Or any other prob with that? If yes Just post bit of sample code and give a short explanation about it. Since your question is not giving the clear picture to answer. :) — RajeshKdev, Nov 17 '14 at 13:20
@RJK Please see the edited post.. Problem is i need to use same partial view multiple times under same page. Hope you got my issue. — Pavan N, Nov 18 '14 at 11:11

score 3 · Answer 1 · answered Feb 11 '15 at 12:41

3

I had the same problem, and I resolved it modifying the name of the kendo upload with the HtmlAttributes method (.HtmlAttributes(new {name="files" })). Look the next code:

@(Html.Kendo().Upload()
                .Name("files_" + Model.ID)
                .HtmlAttributes(new {name="files" })
                .ShowFileList(true)
                .Messages(m => m.Select("Asociar documentos").StatusUploading("Cargando...").StatusUploaded("Cargado!").Retry("Reintentar").HeaderStatusUploading("Cargando...").HeaderStatusUploaded("Listo!"))
                .Multiple(true).Async(async => async.AutoUpload(true).Save("Upload", "PQRSF", new { id = Model.ID }))
                .Events(events => events
                                    .Complete("uploadFile_OnComplete")
                                    .Error("upload_OnError")
                                    .Upload("upload_OnUpload")
                        )
            )

answered Feb 11 '15 at 12:41

Juan Carlos Velez

2,840
2
34
48

Hi Juan,but still it creates a DOM conflict issue when you need to run in browser. I figured it by concatinating the parent DIV name via ViewBag. So that in future ther wont be any conflicts. So when ever i need to change something in upload control I just pass the containerId. So that in JS I can understand which ctrl I need to play with. Forgot this case... Imagine you had a textbox&button in cshtml. if you are using same partial view multiple times in your page. This case arises. partial views are not like custom/webuser controls in asp.net. its WYGIWYG – Pavan N Feb 12 '15 at 12:54
Hi Pavan... Thanks for the comment. Partial Views are perfect to use as custom controls, but you need to ensure that there are not repeated elements with the same id in the DOM. Por example: Look that the Name of the control is "files"_+Model.Id, therefore the id of the control is always different and depends of the Model. – Juan Carlos Velez Feb 12 '15 at 13:19

score 0 · Answer 2 · answered Jul 22 '18 at 07:40

I had the same problem too,but my problem was in MultiSelectFor() and I resolved it modifying the id of the kendo element. Look the next code:

Html.Kendo().MultiSelectFor(a => a.FeederIds).AutoClose(false)
                .HtmlAttributes(new { id = "VisitProgramFeederIds" })

multiple partial views with same kendo mvc upload control

2 Answers2