ASP .NET core Razor page - Avoid refreshing the page-CodePudding

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 >
      <label  asp-for="NewWebSiteInfo.websiteName">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteName"  />
</div>

 <div >
      <label  asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteUrl"  />
</div>

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

 <div >
                @if (AddInfoModel.WebSitelist.Count > 0)
                {
                    <div >
                        <table >
                            <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 >
      <label  asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaName"  />
</div>

 <div >
      <label  asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount"  />
</div>

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

<div >
                @if (AddInfoModel.SocialMedialist.Count > 0)
                {
                    <div >
                        <table >
                            <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 >
      <button type="submit" > 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});
}

CodePudding user response：

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

CodePudding user response：

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 >
      <label  asp-for="NewWebSiteInfo.websiteName">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteName"  />
</div>

 <div >
      <label  asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
      <input type="text" asp-for="NewWebSiteInfo.websiteUrl"  />
</div>

<input type="button" onclick="AddWebsiteInfo()"  value="Add Website info">
 <div >
                @if (AddInfoModel.WebSitelist.Count > 0)
                {
                    <div >
                        <table >
                            <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 >
      <label  asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaName"  />
</div>

 <div >
      <label  asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
      <input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount"  />
</div>

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

<div >
                @if (AddInfoModel.SocialMedialist.Count > 0)
                {
                    <div >
                        <table >
                            <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 >
     <input type="button" onclick="AddAllInfo()"  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);
        }