当前位置： 文江博客话题详情

ASP .NET Core Razor页面 - 避免刷新页面

发布于 2025-02-07 21:34:13 字数 4579 浏览 1 评论 0原文

我有一种形式的拖曳按钮，第一个按钮以将网站信息添加到本地表格，第二个按钮以将社交媒体信息添加到另一个表格，此后所有信息在本地添加了所有信息， 然后，我可以单击“添加所有信息”按钮以同时将所有信息添加到数据库。

我的问题是，如何在不刷新页面的情况下将信息添加到表中？

addallinfo.cshtml：


 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>

<button type="submit" validatedisable="True" asp-page-handler="AddWebsiteInfo" class="btn btn-primary" >Add Website info</button>

 <div class="mb-3">
                @if (AddInfoModel.WebSitelist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>WebsiteName</th>
                                    <th>websiteURL</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (Website item in AddAllInfoModel.WebSitelist)
                                {
                                    <tr>

                                        <td>@item.WebsiteName</td>
                                        <td>@item.websiteURL</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>

</br>
</br>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>

<button type="submit" validatedisable="True" asp-page-handler="AddSocialMediaInfo" class="btn btn-primary" >Add socil Media info</button>

<div class="mb-3">
                @if (AddInfoModel.SocialMedialist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>SocialMediaName</th>
                                    <th>SocialMediaAccount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
                                {
                                    <tr>

                                        <td>@item.SocialMediaName</td>
                                        <td>@item.SocialMediaAccount</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>
</br>
 <div class="col-4 offset-2">
      <button type="submit" class="btn btn-primary form-control"> Add all info </button>
 </div>

</form> ```
                                 
AddAllInfo.cshtml.cs:
                                        
    public void OnPostAddSocialMediaInfo()
{
    SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName, 
    SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
}

public void OnPostAddWebsiteInfo()
{
    WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName, 
      websiteUrl =NewWebSiteInfo.websiteUrl});
}
原文

I have tow buttons in one Form, first button for add website info to a local table and second button for add social media info to another table, after all info added locally,
then I can click on 'add all info' button for add all info in same time to database.

My question is how can I add info to a table without refreshing the page?

AddAllInfo.cshtml:


 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>

<button type="submit" validatedisable="True" asp-page-handler="AddWebsiteInfo" class="btn btn-primary" >Add Website info</button>

 <div class="mb-3">
                @if (AddInfoModel.WebSitelist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>WebsiteName</th>
                                    <th>websiteURL</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (Website item in AddAllInfoModel.WebSitelist)
                                {
                                    <tr>

                                        <td>@item.WebsiteName</td>
                                        <td>@item.websiteURL</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>

</br>
</br>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>

<button type="submit" validatedisable="True" asp-page-handler="AddSocialMediaInfo" class="btn btn-primary" >Add socil Media info</button>

<div class="mb-3">
                @if (AddInfoModel.SocialMedialist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>SocialMediaName</th>
                                    <th>SocialMediaAccount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
                                {
                                    <tr>

                                        <td>@item.SocialMediaName</td>
                                        <td>@item.SocialMediaAccount</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>
</br>
 <div class="col-4 offset-2">
      <button type="submit" class="btn btn-primary form-control"> Add all info </button>
 </div>

</form> ```
                                 
AddAllInfo.cshtml.cs:
                                        
    public void OnPostAddSocialMediaInfo()
{
    SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName, 
    SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
}

public void OnPostAddWebsiteInfo()
{
    WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName, 
      websiteUrl =NewWebSiteInfo.websiteUrl});
}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

薆情海 2025-02-14 21:34:13

您可以使用JS将数据传递给处理程序，然后使用JS将HTML添加到TBODY，这是一个演示，可以将数据添加到表中，而无需刷新页面：

<div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>

<input type="button" onclick="AddWebsiteInfo()" class="btn btn-primary" value="Add Website info">
 <div class="mb-3">
                @if (AddInfoModel.WebSitelist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>WebsiteName</th>
                                    <th>websiteURL</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (Website item in AddAllInfoModel.WebSitelist)
                                {
                                    <tr>

                                        <td>@item.WebsiteName</td>
                                        <td>@item.websiteURL</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>

</br>
</br>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>

<input type="button" onclick="AddSocialMediaInfo()" class="btn btn-primary" value="Add socil Media info">

<div class="mb-3">
                @if (AddInfoModel.SocialMedialist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>SocialMediaName</th>
                                    <th>SocialMediaAccount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
                                {
                                    <tr>

                                        <td>@item.SocialMediaName</td>
                                        <td>@item.SocialMediaAccount</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>
</br>
 <div class="col-4 offset-2">
     <input type="button" onclick="AddAllInfo()" class="btn btn-primary" value="Add all info">
 </div>

</form> ```

JS：

@section Scripts{
    <script>
        function AddWebsiteInfo() {
            var NewWebSiteInfo = {
                'websiteName': $("#NewWebSiteInfo_websiteName").val(),
                'websiteUrl': $("#NewWebSiteInfo_websiteUrl").val()
            };
            $.ajax({
                type: 'POST',
                url: '?handler=AddWebsiteInfo',
                data: NewWebSiteInfo,
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                dataType: 'json',
                success: function (data) {
                    var html = "<tr><td>" + data.websiteName + "</td><td>" + data.websiteUrl + "</td></tr>";
                    $("tbody")[0].innerHTML = $("tbody")[0].innerHTML + html;
                }
            });
        }
        function AddSocialMediaInfo() {
            var NewAddSocialMediaInfo = {
                'SocialMediaName': $("#NewSocialMediaInfo_SocialMediaName").val(),
                'SocialMediaAccount': $("#NewSocialMediaInfo_SocialMediaAccount").val()
                
            };
            $.ajax({
                type: 'POST',
                url: '?handler=AddSocialMediaInfo',
                data: NewAddSocialMediaInfo,
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                dataType: 'json',
                success: function (data) {
                    var html = "<tr><td>" + data.socialMediaName + "</td><td>" + data.socialMediaAccount + "</td></tr>";
                    $("tbody")[1].innerHTML = $("tbody")[1].innerHTML + html;
                }
            });
        }
        function AddAllInfo() {
            AddWebsiteInfo();
            AddSocialMediaInfo();
        }
    </script>
}

Handler：

[BindProperty]
        public WebSiteInfo NewWebSiteInfo { get; set; }
        [BindProperty]
        public SocialMediaInfo NewSocialMediaInfo { get; set; }
        public void OnGet()
        {
        }
        public JsonResult OnPostAddWebsiteInfo()
        {
            WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName, 
            websiteUrl =NewWebSiteInfo.websiteUrl});
            return new JsonResult(NewWebSiteInfo);
        }
        public JsonResult OnPostAddSocialMediaInfo()
        {
            SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName, 
            SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
            return new JsonResult(NewSocialMediaInfo);
        }

You can use js to pass data to handler,and then use js to add html to tbody,here is a demo to add data to table without refresh the page:

<div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>

<input type="button" onclick="AddWebsiteInfo()" class="btn btn-primary" value="Add Website info">
 <div class="mb-3">
                @if (AddInfoModel.WebSitelist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>WebsiteName</th>
                                    <th>websiteURL</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (Website item in AddAllInfoModel.WebSitelist)
                                {
                                    <tr>

                                        <td>@item.WebsiteName</td>
                                        <td>@item.websiteURL</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>

</br>
</br>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>

 <div class="col-md-6 mb-3">
      <label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>

<input type="button" onclick="AddSocialMediaInfo()" class="btn btn-primary" value="Add socil Media info">

<div class="mb-3">
                @if (AddInfoModel.SocialMedialist.Count > 0)
                {
                    <div class="col-12 border p-3">
                        <table class="table table-striped table-bordered">
                            <thead style="background-color:lightgray">
                                <tr>
                                    <th>SocialMediaName</th>
                                    <th>SocialMediaAccount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
                                {
                                    <tr>

                                        <td>@item.SocialMediaName</td>
                                        <td>@item.SocialMediaAccount</td>
                                    </tr>

                                }
                            </tbody>
                        </table>
                    </div>

                }

</div>
</br>
 <div class="col-4 offset-2">
     <input type="button" onclick="AddAllInfo()" class="btn btn-primary" value="Add all info">
 </div>

</form> ```

js:

@section Scripts{
    <script>
        function AddWebsiteInfo() {
            var NewWebSiteInfo = {
                'websiteName': $("#NewWebSiteInfo_websiteName").val(),
                'websiteUrl': $("#NewWebSiteInfo_websiteUrl").val()
            };
            $.ajax({
                type: 'POST',
                url: '?handler=AddWebsiteInfo',
                data: NewWebSiteInfo,
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                dataType: 'json',
                success: function (data) {
                    var html = "<tr><td>" + data.websiteName + "</td><td>" + data.websiteUrl + "</td></tr>";
                    $("tbody")[0].innerHTML = $("tbody")[0].innerHTML + html;
                }
            });
        }
        function AddSocialMediaInfo() {
            var NewAddSocialMediaInfo = {
                'SocialMediaName': $("#NewSocialMediaInfo_SocialMediaName").val(),
                'SocialMediaAccount': $("#NewSocialMediaInfo_SocialMediaAccount").val()
                
            };
            $.ajax({
                type: 'POST',
                url: '?handler=AddSocialMediaInfo',
                data: NewAddSocialMediaInfo,
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                dataType: 'json',
                success: function (data) {
                    var html = "<tr><td>" + data.socialMediaName + "</td><td>" + data.socialMediaAccount + "</td></tr>";
                    $("tbody")[1].innerHTML = $("tbody")[1].innerHTML + html;
                }
            });
        }
        function AddAllInfo() {
            AddWebsiteInfo();
            AddSocialMediaInfo();
        }
    </script>
}

handler:

[BindProperty]
        public WebSiteInfo NewWebSiteInfo { get; set; }
        [BindProperty]
        public SocialMediaInfo NewSocialMediaInfo { get; set; }
        public void OnGet()
        {
        }
        public JsonResult OnPostAddWebsiteInfo()
        {
            WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName, 
            websiteUrl =NewWebSiteInfo.websiteUrl});
            return new JsonResult(NewWebSiteInfo);
        }
        public JsonResult OnPostAddSocialMediaInfo()
        {
            SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName, 
            SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
            return new JsonResult(NewSocialMediaInfo);
        }
回复 原文
魄砕の薆 2025-02-14 21:34:13

最好的方法是在JavaScript中运行POST请求，这不会刷新页面。

第二个选项是在邮政方法末尾再次调用GET方法，然后将模型传递给GET。因此，当页面刷新时，数据再次填写

The best way to do this is to run the post request in javascript, this will not refresh the page.

2nd option is by calling the get method again at the end of the post method and then passing the model with the data to the get. So that when the page refreshes the data is filled in again

回复 原文
~没有更多了~

关于作者

蛮可爱

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文