发布 ajax 表单时重新渲染同级部分视图答案

【问题标题】：Sibling partial views being RE-rendered when a ajax form is posted发布 ajax 表单时重新渲染同级部分视图
【发布时间】：2012-07-11 05:29:36
【问题描述】：

我有这样的看法：

<div id="basic-information-container">
    @Html.Action("MyBasicInformation")
</div>

<div id="cv-container">
    @Html.Action("MyCv")
</div>

<div id="experiance-container">
    @Html.Action("MyExperiances")
</div>

<div id="academic-background-container">
    @Html.Action("MyAcademicBackgrounds")
</div>

MyCv 的部分视图是：

@model Model.Profile.CvModel

<script type="text/javascript">
    $(function () {
        $("#cv-container form").submit(function () {
            $(this).ajaxSubmit({
                target: "#cv-container",
                cache: false
            });

            return false;
        });
    });
</script>

@using(Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Cv</legend>
        @Html.EditorFor(model => model.File) 
        @* I have working editor template for HttpPostedFileBase, nothing to worry about this*@
        @Html.ValidationMessageFor(model => model.File)
        <p>
            <input type="submit" value="Upload" />
        </p>
    </fieldset>
}

这是CvModel的代码

public class CvModel {
    public int? Id { get; set; }

    [Required]
    public HttpPostedFileBase File { get; set; }

    public CvModel() {

    }

    public CvModel(int? cvId) {
        Id = cvId;
    }
}

这是 MyCv 的 post 方法

[HttpPost]
public ActionResult MyCv(CvModel model) {
    // upload cv to database
    return PartialView(model);
}

现在，问题是，当我出于某种未知原因上传简历时，MyBasicInformation, MyExperiances and MyAcademicBackgrounds 的部分视图正在重新加载。我找不到我做错了什么。我哪里做错了？

顺便说一句，我已经确认没有调用 MyBasicInformation, MyExperiances and MyAcademicBackgrounds 的 get 操作。视图正在直接重新加载。

【问题讨论】：

标签： asp.net-mvc-3 partial-views ajaxform

【解决方案1】：

由于您正在使用子操作，因此您必须在表单中明确指定要发布到的操作，否则表单可能无法提交到正确的操作。此外，您的表单上缺少enctype="multipart/form-data"，这是上传文件所必需的：

所以：

@using(Html.BeginForm()) {

应该变成：

@using (Html.BeginForm("MyCv", "SomeController", FormMethod.Post, new { enctype = "multipart/form-data" }))

还可以通过 FireBug 检查控制台中的潜在错误。确保 AJAX 请求发送成功。确保第二次重新附加 .submit() 事件。

【讨论】：

感谢您的额外建议 :) 是的，我在重新附加 .submit() 时遇到了麻烦。但我已经解决了。 :D。而且，我会关注错误控制台。