Question

I am beginner in MVC3 and still learning. I try to write an application (MVC3 with Razor) which allows user to select files and upload/save. During upload/save process I want to simply show “wait” text as partial view. I have problem since the partial view is loaded as soon as the web application is started and I got error from HomeController – [HTtpPost] Wait method, since it can’t trace the list Files in object job. OF course, the list of Files will be filled after upload. I don’t know how to solve this and need your help. Thank you in advance.

My HomeController.cs :

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> attachments)
    {
        foreach ( var file in attachments )
        {
            // do something
        }
        return RedirectToAction("Wait");
    }

    public ActionResult Wait()
    {
            // do something
            ViewBag.Message = "Wait...";
            return View();
    }

    [HttpPost]
    public ActionResult Wait(FormCollection formCollection)
    {
        Work job = MvcApplication.GetWork();
        if ( job.Files.Any() )
        {
            return RedirectToAction("SubmitWork");
        }
        else
        {
            return View();
        }
    }

The view Index.cshtml :

@{
ViewBag.Title = "FirstTry";
}
<p>
<div id="AddFiles">
    @Html.Partial("_AddFiles")
</div>
</p>

<div id ="Wait">
    @Html.Partial("_Wait")
</div>

The partial view _Wait.cshtml :

@{
ViewBag.Title = "Wait...";
}
@ViewBag.Message
@using ( Html.BeginForm("Wait", "Home", FormMethod.Post, new
{
    id = "waitform"
}) )
{
}
<script type="text/javascript">
    window.setTimeout("document.getElementById('waitform').submit()", 1000); 
</script>

The partial view _AddFiles.cshtml :

@using ( Html.BeginForm("UploadFile", "Home", FormMethod.Post, new{id = "uploadForm", enctype = "multipart/form-data"}) ) 
{
    @(Html.Telerik().Upload().Name("attachments").Multiple(true)
        .Async(async => async.AutoUpload(true) )
    )

    <input type="submit" value="Send" class="t-button" />
    <input type="reset" value="Reset" class="t-button" />
}

Answer 1

MVC does not work like WebForms, client side events will not propagate to server controls (there aren’t really even controls, I think Telerik blurs this line a bit and complicates the MVC experience).

You can invoke additional actions in your controller to download HTML or JSON or something, but the only way on the client side to swap HTML without having your page change (since an upload is in progress) would be to use javascript.

I’m not familiar with this Telerik control, but I think you will have to do something on the client side, not on the server side, to indicate loading progress or show a spinner.

Their API shows there is an onupload event you can listen for and possible swap to the loading div:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-upload-client-api-and-events.html

They probably have a sample somewhere. I will see if I can dig something up, but really I think just listening for this event is your best bet and do this on the client side, not the server side.