Question

请耐心等待我，我正在学习asp.net MVC 3 .. :)

我搜索了大量的论坛帖子，但我找不到真正的项目解决方案..

场景：我有一个_layout，它呈现了我的身体。在我目前正在努力的身体中，我有一个部分视图，它通过ajax.actionlink和占位符div更新。

主视图（缩短）

<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>

在该局部视图中，我有一个Html.BeginForm，其中包含所有必需（模型）Product属性的输入。它还要求用户上传文件。

部分视图（也缩短了）

@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>
}

此表单链接到一个action方法，它保存文件（图像）并获取路径（todo），然后它将路径和产品保存到数据库，并返回视图.. ALAS有问题。我不知道如何返回该视图，因此它将替换我主视图中容器div的内容..我只是得到一个新的页面...

控制器

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);
        }
    }

结束问题

如何在我的控制器中的actionmethod _addProduct中，在位于主视图中的div id =“container”中呈现_addProduct部分？

提前感谢。

Answer 1

在您的部分视图中，您当前拥有一个标准Html.BeginForm，它会呈现正常的<form>标记并对服务器进行补充回发。这就解释了为什么你没有得到一个AJAX调用。

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

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

从控制器加载局部视图

1 个答案: