Load partial view from controller

Question

please bear with me, I'm learning asp.net MVC 3.. :)

I've searched through a metric ton of forum threads, but I can't really find a nice solution for my project..

The scenario: I have a _layout, which renders my body. In the body which I'm struggling with at the moment, I have a partial view which is updated via an ajax.actionlink and placeholder div.

Main view (shortened)

<div class="mini-menu-content">
    Product
    <ul>
        <li>
            @Ajax.ActionLink("Aanmaken", "_addProduct", new { type = "Beheer/Add/_addProduct" },
                            new AjaxOptions
                             {
                                 UpdateTargetId = "container",
                                 InsertionMode = InsertionMode.Replace,
                                 HttpMethod = "GET"
                             })
        </li>
    </ul>
</div>
<div id="container">@Html.Partial("Beheer/_welkom")
</div>

In that partial view, I have an Html.BeginForm, with inputs for all the required (model) Product attributes. It also asks the user to upload a file.

The partial view (also shortened)

@model BlokCWebwinkelGroep3.Models.Product
@using (Html.BeginForm("_addProduct", "Beheer", FormMethod.Post,
 new
 {
     enctype = "multipart/form-data",
     id = "Form",
     name = "Form"
 }))
{   
//All the input fields for the model

<div class="editor-label">
    Plaatje:
</div>
<div class="editor-field">
    <input type="file" name="imageFile" required="true" />
    <input type="submit" value="Aanmaken" />
</div>
}

This form links to an actionmethod, which saves the file (an image) and gets the path (todo), then it will save the path and the product to the database, and return the view.. ALAS there is the problem. I don't know how to return that view so it will replace the content of the container div in my main view.. I just get a new page...

Controller

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

public ActionResult _addProduct(string type)
{
    return PartialView(type);
}

[HttpPost]
    public ActionResult _addProduct(HttpPostedFileBase imageFile, Product product)
    {
        if (ModelState.IsValid && (imageFile != null && imageFile.ContentLength > 0))
        {
            //Save to folder, get path, call dbcontroller and save all of it in db.
            return PartialView("Beheer/_welkom");
        }
        else
        {
            return PartialView("Beheer/Add/_addProduct", product);
        }
    }

Concluding question

How do I render the _addProduct partial in the div id="container", located in the main view, from the actionmethod _addProduct in my controller?

Thanks a ton in advance.

Answer 1

In your partial view you are currently having a standard Html.BeginForm which renders a normal <form> tag and does a comple postback to the server. This explains why you are not getting an AJAX call.

On the other hand this form needs to upload a file to the server. But as you know, you cannot upload files to the server using AJAX. Unless of course you use some javascript file upload plugin such as jquery.form, blueimp file upload or Uploadify. By the way in modern browsers that support the HTML5 File API you could that to upload files to the server using AJAX requests. The plugins mentioned earlier basically simplify the task of detecting the client browser capabilities and using fallback mechanisms (such as hidden iframes for old browsers) if necessary.

So to conclude, you need to use javascript in order to upload the file to the server and stay on the same page.