PartialView renders new page instead of in div

Question

Hi,

I had this problem before and can't for life of me remember how to fix it or where I googled about it.

I am passing back from an action a partial view

        return PartialView("CommentsListControl", recipe.Comments);

But this loads a new web page and not into my div WHY?????????

<table width="100%">
    <tr><td>
        <div id="divComments">
            <% using (Ajax.BeginForm("CreateComment", new AjaxOptions { UpdateTargetId = "divCommentsList", InsertionMode = InsertionMode.Replace }))
               { %>
            <textarea id="comments" name="comments" rows="3" cols="60"></textarea>
            <table width="100%"><tr><td align="right">
                <a href="#" id="savecomment">Save Comment</a>
                <%= Html.Hidden("recipeid", Model.RecipeID) %>
            </td></tr>
            </table>
            <% } %>
        </div>
    </td></tr>
    <tr><td>
        <div id="divCommentsList">
            <% Html.RenderPartial("CommentsListControl", Model.Comments); %>
        </div>
    </td></tr>
</table>

Answer 1

The sample you showed doesn't have a submit button on the form. In WebForms, you could use an "asp:Hyperlink" control to generate a link that looked liked it submitted a form, but that was because WebForms was implementing the JavaScript for you. In MVC you have to do that yourself. Try swapping your "Save Comment" link out for a submit button:

<input type="submit" value="Save Comment" />

Then use CSS to style the button to your hearts content.