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>

score 2 · Answer 1 · answered Jul 08 '17 at 12:43

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 08 '17 at 12:43

Javier Jimenez Matilla

302
1
7

score 0 · Answer 2 · answered Jul 08 '17 at 12:42

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

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

2 Answers2