MVC Updating Partial View with Ajax.BeginForm

Question

The Ajax form does update selected div, but instead of just reloading a partial view in that div it inserts the whole page content into that div.

.cshtml file

<fieldset>
 <legend>File(s)</legend> 
 <div id="filesBody">
 @Html.Action("Action", "Controller", new {id=Model.Id})
 </div>
 <br />
 @using (Ajax.BeginForm("UploadFile", "Controller", null, new AjaxOptions { UpdateTargetId="filesBody"}, new { enctype = "multipart/form-data", @id = "myForm" }))
 { 
 @Html.HiddenFor(model => model.ComplaintId)
 <div>
 <label for="File">Add File:</label>
 <input type="file" name="FileAttachment" />
 &nbsp;<input type="submit" value="Upload" />
 @Html.ValidationMessage("FileAttachment")
 </div>
 }
</fieldset>

Controller

public PartialViewResult GetFilesData(long? Id)
{
 Model Model = new Model(Id);
 TryUpdateModel(Model);
 return PartialView(Model);
}

Partial view

@model Models
<div id="reloadField">
 @foreach (var ph in Model.docs)
 {
 ///code
 }
</div>

• asymptoticFault: Shouldn't your Ajax.BeginForm be targeting the GetFilesData action?

Answer 1

In your partial view set the Layout equal to null.

@model Models
@{
 Layout = null;
}

UPDATE

Change your Ajax.BeginForm to call the GetFilesData action.

• Alexander C.: Still inserts whole page into that div
• Daniel Leiszen: I don't know if the problem still exists, but unobtrusive javascript should be enabled in web.config and jquery.unobtrusive-ajax.js should be referenced on page.