Question

I’m messing around w/ MVC 3 a little and am having trouble getting a partial view to show up properly.

Here’s my dilemma:

In my Home/Index view I have an actionLink to my controller/action, Post/Create:

<p>
    @Html.ActionLink("Create Post", "Create", "Post")
</p>
<div id="PostCreation">
</div>  

My Create View is a partialView with a basic form for title, content, etc.:

@using (Html.BeginForm())
{
    <div>
        <fieldset>
            <legend>Post Creation</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.PostTitle)
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(m => m.PostTitle)
            </div>
            <p>
                <input type="submit" value="Publish" />
            </p>
        </fieldset>
    </div>
}

I added some jQuery to my _Layout.cshtml file to capture clicks on attributes:

<script type="text/javascript">
      $(document).ready(function () {
          $('a').live('click', function () {
              $.get($(this).attr('href'), function (html) {
                  $('#PostCreation').html(html);
              });
          });
      });
</script> 

The click should then update the PostCreation div which is in the Home/Index view.

Using firebug I found that as I step through the jQuery the ParialView does get rendered properly in the Home/Index but then once I finish the jQuery function it renders an entire new page that just displays the Post/Create form.

Any help is appreciated. Thanks.

Answer 1

You need to cancel the navigation in your jQuery.

try changing you .live() signature to this:

          $('a').live('click', function (e) {
              e.preventDefault();
              $.get($(this).attr('href'), function (html) {
                  $('#PostCreation').html(html);
              });
          });