0

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.

4

1 回答 1

1

在您的部分视图中，您当前拥有一个标准，该标准Html.BeginForm呈现一个正常的<form>标签并完成一个完整的回发到服务器。这解释了为什么您没有收到 AJAX 调用。

另一方面，此表单需要将文件上传到服务器。但如您所知，您不能使用 AJAX 将文件上传到服务器。当然，除非您使用一些 javascript 文件上传插件，例如jquery.form,blueimp file upload或Uploadify. 顺便说一句，在支持您的现代浏览器中，HTML5 File API您可以使用 AJAX 请求将文件上传到服务器。前面提到的插件基本上简化了检测客户端浏览器功能的任务，并在必要时使用回退机制（例如旧浏览器的隐藏 iframe）。

所以总而言之，您需要使用 javascript 才能将文件上传到服务器并保持在同一页面上。

于 2013-11-01T21:06:56.347 回答