Reputation: 71
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.
Upvotes: 0
Views: 193
Reputation: 19601
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);
});
});
Upvotes: 1