This is a migrated thread and some comments may be shown as answers.

[Solved] File upload in detail Grid (MVC 3)

2 Answers 53 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
jimmy
Top achievements
Rank 1
jimmy asked on 31 Aug 2011, 08:17 AM

Hi,
      I am using upload control for MVC(master/detail grid), the problem that i am facing is:  

Html.Telerik().Grid<Dingzhi.Models.ProductViewModel>()
         .Name("Grid")
         .DataKeys(keys => keys.Add(o=>o.ProductId))
         .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }))
         .Columns(columns =>
         {
             columns.Bound(o => o.Name).Width(150);
             columns.Bound(o => o.No).Width(70);
             columns.Command(commands => { commands.Edit().ButtonType(GridButtonType.ImageAndText); commands.Delete().ButtonType(GridButtonType.ImageAndText); }).Width(280);
         })
         .DataBinding(dataBinding =>
            {
                dataBinding.Ajax()
                .Select("ProductList", "Product")
                .Insert("ProductInsert", "Product")
                .Update("ProductSave", "Product")
                .Delete("ProductDelete", "Product");
            })
            .ClientEvents(events => events.OnDetailViewExpand("onDetailViewExpand"))
            .DetailView(details => details.ClientTemplate(
                 Html.Telerik().TabStrip()
                     .Name("TabStrip<#= ProductId #>")
                     .SelectedIndex(0)
                     .Items(items =>
                     {
                         items.Add().Text("Pictures").Content(
                                 Html.Telerik().Grid<Dingzhi.Models.ProductPictureViweModel>()
                                     .Name("Pictures_<#= ProductId #>")
                                     .DataKeys(keys => keys.Add(o => o.ProductPicId))
                                     .ToolBar(toolBar => toolBar.Template(
                                         @<text>@(Html.Telerik().Upload()
                                             .Name("attachments<#= ProductId #>")
                                              .HtmlAttributes(new { id = "attachments<#= ProductId #>" })
                                             .Multiple(false)
                                             .Async(async => async
                                                 .Save("Save", "Product", new { productId = "<#= ProductId #>" })
                                                 .AutoUpload(true)
                                             )
                                             .ShowFileList(false)
                                             .ClientEvents(e => e.OnSuccess("onSuccess"))
                                             )
                                         </text>
                                         ))
                                     .Columns(columns =>
                                     {
                                         columns.Bound(o => o.ProductId).Hidden(true);
                                         columns.Bound(o => o.Url)
                                         .ClientTemplate("<a href='" + @Url.Content("~/content/images/products/") + "<#= ProductId #>/<#= Url #>" + "' class='highslide' onclick='return hs.expand(this)'><img src='" + @Url.Content("~/content/images/products/") + "<#= ProductId #>/<#= Url #>" + "'  style='max-height:70px;max-width:90px;' /></a>");
                                         columns.Command(commands => {commands.Delete().ButtonType(GridButtonType.ImageAndText); }).Width(280);
                                     })
                                     .DataBinding(dataBinding => dataBinding.Ajax()
                                     .Select("ProductPicList", "Product", new { productId = "<#= ProductId #>" })
                                     .Delete("ProductPicDelete", "Product")
                                     )
                                     .Selectable()
                                     .Pageable()
                                     .Sortable()
                                     .ToHtmlString());
                         items.Add().Text("materials").Content(
                              Html.Telerik().Grid<Dingzhi.Models.ProductMaterialViewModel>()
                                     .Name("Pictures_<#= ProductId #>")
                                     .DataKeys(keys => keys.Add(o => o.Id))
                                      .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" }))
                                     .Columns(columns =>
                                     {
                                         columns.Bound(o => o.MaterialName).Width(100);
                                         columns.Bound(o => o.Price).Width(100);
                                         columns.Bound(o => o.MaterialDesc).Width(100);
                                         columns.Command(commands => { commands.Edit().ButtonType(GridButtonType.ImageAndText); commands.Delete().ButtonType(GridButtonType.ImageAndText); }).Width(280);
                                     })
  
                                    .DetailView(colors => colors.ClientTemplate(
                                     Html.Telerik().Grid<Dingzhi.Models.MaterialColorViewModel>()
                                         .Name("MaterialColors_<#= MaterialId #>")
                                         .DataKeys(keys => keys.Add(o => o.ColorId))
                                         .Columns(columns =>
                                         {
                                             columns.Template(@<text> <a href="@Url.Content("~/content/images/materials/" + Url.Content(item.Url))" class="highslide" onclick="return hs.expand(this)"><img src="@Url.Content("~/content/images/materials/" + Url.Content(item.Url))"  style="max-height:70px;max-width:90px;" /></a> </text>).Width(180);
                                         })
                                         .DataBinding(dataBinding => dataBinding.Ajax()
                                         .Select("ColorList", "Product", new { materialId = "<#= MaterialId #>" }))
                                         .Selectable()
                                         .Pageable()
                                         .Sortable()
                                         .ToHtmlString()
                                     ))
  
                                    .DataBinding(dataBinding => dataBinding.Ajax()
                                     .Select("ProductMaterialList", "Product", new { productId = "<#= ProductId #>" })
                                     .Insert("ProductMaterialInsert", "Product")
                                     .Update("ProductMaterialSave", "Product")
                                     .Delete("ProductMaterialDelete", "Product")
                                     )
  
                                    .Pageable()
                                     .Sortable()
                                     .ToHtmlString()
                             );
                     })
                     .ToHtmlString()
         ))
         .ClientEvents(events => events.OnEdit("onEdit"))
         .Editable(editing => editing.Mode(GridEditMode.InLine))
         .Pageable(paging => paging.Style(pagerStyles).Position(position).PageSize(25).PageTo(currentPage))
         .Scrollable(scrolling => scrolling.Height(520))
         //.Resizable(resizing => resizing.Columns(true))
         .Selectable()
         .Render();
  
 
 public ActionResult Save(int productId, IEnumerable<HttpPostedFileBase> attachments)
         {
             // The Name of the Upload component is "attachments"
            if (attachments != null)
             {
                 foreach (var file in attachments)
                 {
                     // Some browsers send file names with full path. This needs to be stripped.
                     var fileName = Path.GetFileName(file.FileName);
                     if (!System.IO.Directory.Exists(Server.MapPath("~/Content/Images/Products/" + productId + "/")))
                     {
                         Directory.CreateDirectory(Server.MapPath("~/Content/Images/Products/" + productId + "/"));
                     }
                     var physicalPath = Path.Combine(Server.MapPath("~/Content/Images/Products/" + productId + "/"), fileName);
                     file.SaveAs(physicalPath);
                     using (DZContext db = new DZContext())
                     {
                         ProductPicture pic = new ProductPicture() {  ProductId=productId, Url=fileName};
                         db.ProductPictures.Add(pic);
                         db.SaveChanges();
                     }
                 }
             }
             // Return an empty string to signify success
             //return Content("");
 }

but attachments is dynamic -_-!!,how to solve the problem,thanks!

2 Answers, 1 is accepted

Sort by
0
jimmy
Top achievements
Rank 1
answered on 31 Aug 2011, 08:21 AM

 

@(Html.Telerik().Upload()
 .Name("attachments<#= ProductId #>") //=problem(public ActionResult Save(int productId, Enumerable<HttpPostedFileBase> attachments)
  .HtmlAttributes(new { id = "attachments<#= ProductId #>" })
 .Multiple(false)
 .Async(async => async
 .Save("Save", "Product", new { productId = "<#= ProductId #>" })
 .AutoUpload(true)
 )
 .ShowFileList(false)
 .ClientEvents(e => e.OnSuccess("onSuccess"))
 )
0
jimmy
Top achievements
Rank 1
answered on 01 Sep 2011, 02:43 AM

find a not good way:
 

function onDetailViewExpand(e) {
    var div = $(e.detailRow.cells[1]).find("div");
    //alert(e.detailRow.cells[1].innerHTML);
   var productid = div.attr("id").replace("TabStrip", "");
    $("#Grid").find("input[type=file]").each(function () {
        $(this).attr('id', $(this).parent().parent().attr("id"));
        $(this).attr("name", $(this).parent().parent().attr("id"));
    });
 
    var grid = $("#Grid").data('tGrid');
    grid.$rows().each(function () {
        if (this != e.masterRow) {
            grid.collapseRow(this);
        }
        else {
            $("#Grid").find("input[type=file]").each(function () {
                if ("attachments" + productid == $(this).attr("id")) {
                    $(this).attr('id', "attachments");
                    $(this).attr('name', "attachments");
                }
            });
        }
    });
 
}


Could you give me a good advice,Thanks!
Tags
Grid
Asked by
jimmy
Top achievements
Rank 1
Answers by
jimmy
Top achievements
Rank 1
Share this question
or