Error in rendering partial view in asp.net mvc ajax

In asp.net ajax, the partial view response replaces the html and only the partial view is rendered. In the below snippet, when I click the ActionLink "Steps", the partial view is returned and replaces the Details.cshtml.

What I need is this partial view should replace only the "main-content-div" div.

Please help out. Thanks

View: Details.cshtml

<div class="main-body">

<table>
    <tr>
        <td class="left-sidebar extended">

            @Ajax.ActionLink("Steps", "Steps", new { id = ViewBag.Id }, new AjaxOptions { AllowCache = false, UpdateTargetId = "main-content-div", InsertionMode=InsertionMode.Replace })
        </td>
        <td class="main-wrapper">

            <div class="main-content" id="main-content-div">
                This is the default stuff which I'll be replacing...
            </div>
        </td>
        <td class="right-sidebar"></td>
    </tr>

</table>

Action Method:

[HttpGet]
    public PartialViewResult Steps(string id)
    {
        //reading model from db
        return PartialView("~/Views/Author/Exercise/_StepsPartial.cshtml", Model);
    }

Partial View:

@model IEnumerable<Model>
<div>
    <div>
        <input type="text" />
    </div>
</div>