单击按钮后在视图中加载数据而不重新加载页面asp.net mvc中的所有数据

Posted 2023-04-01

【中文标题】单击按钮后在视图中加载数据而不重新加载页面asp.net mvc中的所有数据

【英文标题】：Loading data in view after click the button without reload all data in page asp.net mvc

【发布时间】：2017-12-12 15:58:59

【问题描述】：

单击“所有 cmets”按钮后，我需要加载所有 cmets 而无需重新加载页面。 我有带有 cmets 的“新闻”页面，加载页面后，我们可以在文本新闻下方看到一条评论。位于表格行中的所有数据。我有两行。一行有按钮“所有 cmets”，第二行有来自 cmets 的文本框和按钮“添加新评论”。 单击“所有 cmets”按钮后，我需要在不重新加载页面的情况下加载所有列表 cmets（带有数据的动态加载行）。而且我需要在单击“添加新评论”按钮后在数据库中添加评论，而无需重新加载页面。 我不知道该怎么做。

我已经合并了模型：

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;  
    

代码查看：

<tr class="trDiscussion">

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

                </tr>

                <tr class="trComments">

                    <td   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" >
                        <div>
                            <a class="comm" role="button" href="#">Все комментарии</a>
                        </div>
                    </td>

                </tr>

                <tr class="trAddNewComment">

                    <td   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>

【参考方案1】：

您可以使用 jquery ajax post 或 get 方法使用 jquery 提取或发送数据。

sample jquery

sample asp mvc with jquery

希望能帮到你

【参考方案2】：

认为您应该阅读有关 Asp.net WebApi 的信息，或者通过在常规 mvc 控制器中实现 api 函数来做一些棘手的事情，这将返回仅包含 json 序列化数据的页面。当然也可以使用 ajax（或者如果你不想加载外部库，则只使用 XmlHttpRequest）从适当的 api 操作中检索数据