Question

I have a view like this:

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

The Partial View MyCv is:

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

And here is the code of CvModel

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

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

    public CvModel() {

    }

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

And Here is the post method for MyCv

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

Now, the problem is, when I upload the CV for some unknown reason, the partial views for MyBasicInformation, MyExperiances and MyAcademicBackgrounds are reloading. I cannot find what I have done wrong. Where am I doing wrong?

By the way, I have cheched that the get actions of MyBasicInformation, MyExperiances and MyAcademicBackgrounds are not being called. The views are derectly reloading.

Answer 1

Since you are using child actions you must explicitly specify the action you want to post to in your form, otherwise the form might not be submitted to the correct action. Also you are missing an enctype="multipart/form-data" on your form which is necessary for uploading files:

So:

@using(Html.BeginForm()) {

should become:

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

Also check with FireBug for potential errors in the console. Make sure the AJAX request is sent successfully. Ensure that the .submit() event is reattached the second time.