asp.net mvc 4 - MVC 4 Updating a partial view from another partial view using Ajax.BeginForm() -
i have comment section set on 1 of pages. parent view has partial view shows comments id , gives option display partial view post comment. when post comment want first partial view within parent refresh displaying new comment.
currently when click post comment, addcomment method called , added database. error saying passing wrong type of model view. seems trying pass return value addcomment partial view instead of injecting partent view div.
parent view
@model qieducationwebapp.models.course @{ viewbag.title = "course details"; } <h1 class="page-header">@viewbag.title</h1> javascript here . . . <table class="table"> details here </table> <ul id="view-options"> <li>@html.actionlink("back courses", "index", "course")</li> </ul> <input type="button" id="view" class="showcomment" value="show comments"/> <div id="commentsection"/>
partial view view comments
javascript here . . . <div class="commentsection"> @foreach (var item in model) { <div class="comment"> <div class="commenttext"> @html.displayfor(modelitem => item.commenttext) </div> <div class="commentsep"> <span class="commenter">@html.displayfor(modelitem => item.username)</span> - <span class="commentdate">@html.displayfor(modelitem => item.commentdate)</span> </div> </div> } <input type="button" id="post" class="addcomment" value="add comment"/> <br /> <br /> </div> <div id="addcomment" /> <br /> <br /> page @(model.pagecount < model.pagenumber ? 0 : model.pagenumber) of @model.pagecount @html.pagedlistpager(model, page => url.action("viewcomments", new { courseid = @viewbag.courseid, page }), pagedlistrenderoptions.enableunobtrusiveajaxreplacing( new pagedlistrenderoptions { maximumpagenumberstodisplay = 5, displaylinktofirstpage = pagedlistdisplaymode.ifneeded, displaylinktolastpage = pagedlistdisplaymode.ifneeded }, new ajaxoptions() { httpmethod = "get", updatetargetid = "commentsection" }))
method behind partial view
public partialviewresult viewcomments(int courseid, int? page = 1) { viewbag.courseid = courseid; var coursecomments = db.coursecomments.where(cc => cc.courseid == courseid); int pagesize = 10; int pagenumber = (page ?? 1); return partialview(coursecomments.orderbydescending(cc => cc.commentdate).topagedlist(pagenumber, pagesize)); }
partial post comment
javascript here . . . @using (ajax.beginform("addcomment", "coursecomment", new { courseid = @viewbag.courseid, username = @user.identity.name }, new ajaxoptions { updatetargetid = "commentsection" })) { @html.validationsummary(true) <div class="newcomment"> <div class="editor-field"> @html.textareafor(model => model.commenttext, new { maxlength = 500 }) @html.validationmessagefor(model => model.commenttext) </div> <input type="submit" class="postcomment" value="post comment" /> <div id="counter" class="commentcounter"/> </div> }
controller method linked post comment ajax.beginform()
public partialviewresult addcomment(coursecomment coursecomment, int courseid, string username) { coursecomment.commentdate = system.datetime.now; coursecomment.courseid = courseid; coursecomment.username = username; if (modelstate.isvalid) { db.coursecomments.addobject(coursecomment); db.savechanges(); } viewbag.courseid = courseid; return viewcomments(courseid); }
adding pictures
details
after selecting view comments button
after selecting add comment
after posting the comment want list of comments refresh displaying newly added comment. so
for have changed. wanted comments section hidden until show comments clicked. after posting comment on comments section refreshed, couldn't work. reloading whole page refresh comments section, make hidden @ time. made comments section shows default without option hide it. unless can figure out way work how wanted, works now.
Comments
Post a Comment