Gadget mvc problem

Ibrahim Uslu

Vote:

Hi,

I have a with Gadget in Mvc Razor. This gadget is used for upload a file(s). Uploads works fine. But when you submit the file to Action (with httppost attribute decorated) is shows the PartialView but not in the Dashboard.

very simple upload view

@using (Html.BeginForm("Index", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" />
<input type="submit" name="Submit" id="Submit" value="Upload" />

}

controller

[HttpGet]
public ActionResult Index(TestWidget currentWidget)
{
var model = new TestWidget();
return PartialView(model);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(HttpPostedFileBase file)
{

if (file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
if (fileName != null)
{
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
}

return RedirectToAction("Index");
}

note that I don't use the Html.BeginGadgetForm("Action"), becuase this htmlHelper renders the form without enctype="multipart/form-data". thereby you can not excute the Action with Index with httpPost attribute.

Any help would be lovely..

Thanks in advance

#82093

Mar 05, 2014 12:54

Stefan Torstensson

Vote:

This is what happens when posting a form using the browsers default behaviour, where the form is posted and the rendered view is shown. To prevent the result from taking over the entire window you need to do an ajax post.
When you use the BeginGadgetForm helper method a marker class, epi-gadgetform, is added to the form element, and when the gadget is loaded a javascript submit handler is attached to prevent the default submit and instead submit using ajax.

If supporting modern browsers and IE10+ is good enough, you might be able to use the FormData support. Otherwise you may have to resort to a hidden iframe or some other means of uploading the data.

To hook in to the form posting you need to attach your own submit handler when the gadget loads.
The sample below isn't tested, but according to the docs it should do it

(function($) { 
    My.Sweet.Gadget = function() { 

        var bindEvents = function(e, gadgetInstance) { 
            // Executed every time a gadget view is loaded 

            $("form", this).submit(function(submitEvent) { 
                submitEvent.preventDefault(); 

                var data = new FormData(); 
                data.append("file", fileInputElement.files[0]); 

                // Do the form upload to a suitable action 
                gadgetInstance.ajax({ 
                    type: "POST", 
                    url: gadgetInstance.getActionPath({ action: "Index" }), 
                    data: data, 
                    feedbackMessage: "Uploading", 
                    success: function (e) { 
                        // And when the upload has completed successfully you can go back to the index view                
                        gadgetInstance.loadView({ action:"Index" }); 
                    } 
                }); 
            }); 
        }; 

        return { 
            init: function(e, gadgetInstance) { 
                // Call the bindEvents method each time a view is loaded in the gadget. 
                $(this).bind("epigadgetloaded", bindEvents); 
            } 
        }; 
    }; 
     
})(jQuery);

#82253

Edited, Mar 10, 2014 9:12

Ibrahim Uslu

Vote:

Thanks Stefan.

I am sorry but i could not make this solution worked. but it has given me idea og how I could solved it. What I did is, I decoreated my gadget with ScriptResourceAttribute --> [ScriptResource("/Static/js/min/jquery-1.11.0.min.js")] and other JS files. That fixed everything and gadget works.

thanks for you help.

#82538

Mar 14, 2014 10:30