Loading data in view after click the button without reload all data in page asp.net mvc

Question

I need to load all of comments after click button "all comments" without reload page. I have "News" page with comments, after load page we can see one comment below the text news. All data situated in table rows. I have two rows. One row have button "All comments", second row have textbox from comments and button "Add new comment". I need after click button "All comments" load all list comments (dynamic load rows with data) without reload page. And I need to add comment in database after click button "Add new comment" without reload page too. I don't know how to do this.

I have combined model:

using System.Collections.Generic;

namespace NarkomApp.Models

{
    public class News_CommentsModel
    {
        public NEWS newsModel { get; set; }
    public List<COMMENTS> commentsModel { get; set; }

    public List<NEWS> recomendNewsModel { get; set; }
    public List<NEWS> waterShutOffModel { get; set; } 
    }
}

Code view:

<tr class="trDiscussion">

                    <td colspan="2">
                        <div class="gray"></div>
                        <div class="interesting">
                            <p>Обсуждение</p>
                        </div>
                    </td>

                </tr>

                <tr class="trComments">

                    <td width="100%" height="auto" colspan="2">
                        <div class="comments">

                            @{
                                if (Model.commentsModel.Count != 0)
                                {
                                    for (int i = 0; i < Model.commentsModel.Count; i++)
                                    {
                                        <p>@Model.commentsModel[i].sUserName</p>
                                        <p><a class="date-comment">@Model.commentsModel[i].vDateTime</a></p>
                                        <p class="text-comment">@Model.commentsModel[i].vComment</p>
                                    }

                                }
                                else
                                {
                                    <p>Комментариев нет</p>
                                }
                            }


                        </div>
                    </td>

                </tr>

                <tr class="trButtonShowAllComments">

                    <td colspan="2" height="50px">
                        <div>
                            <a class="comm" role="button" href="#">Все комментарии</a>
                        </div>
                    </td>

                </tr>

                <tr class="trAddNewComment">

                    <td width="100%" height="auto" colspan="2">
                        @{
                            if (Session["iIdUsers"] == null)
                            {
                                <div class="new-comment">
                                    Вы не авторизированы, для того, чтобы оставлять коментарии войдите под своим аккаунтом: @Html.ActionLink("Войти", "LogIn", "Home")                                        
                                </div>
                            }
                            else
                            {
                                <div class="new-comment">
                                    <p>Новый комментарий:</p>
                                </div>
                                <textarea class="message" size="40" name="search" placeholder=""></textarea>
                                <div>
                                    <a class="send" role="button" href="#">Отправить</a>
                                </div>
                            }
                        }
                    </td>

Javier Jimenez Matilla · Accepted Answer · 2017-07-08 12:43:50Z

2

you can use jquery ajax post or get method to extract or send data using jquery.

sample jquery

sample asp mvc with jquery

hope I help you

answered Jul 8, 2017 at 12:43

Javier Jimenez Matilla

3121 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bogdanbrizhaty · Accepted Answer · 2017-07-08 12:42:28Z

0

Think you should read about Asp.net WebApi, or doing some tricky stuff by implementing api function inside your regular mvc controller, which would return page with only json-serialized data. And of course use ajax(or just XmlHttpRequest if you don't want to load external library) to retrieve tha data from apropreate api action

answered Jul 8, 2017 at 12:42

bogdanbrizhaty

1451 silver badge8 bronze badges

Collectives™ on Stack Overflow

Loading data in view after click the button without reload all data in page asp.net mvc

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related