stop reloading the entire page after Modal from submission in razor pages

Blooming Developer 276 Reputation points
2021-11-26T09:02:29.223+00:00

Hi All,

I have a edit page like this

PIR9h.png

i have a comment button in this page,which is a modal form ,where users can leave their comment

ow5pZ.png

when i submit the Comment form,the entire page is reloading and im losing the edit page content.
Im handling edit page content and comment box in two different forms.
So when i submit the comment form,the modal should open as it is and also the edit page content should not be gone.

This is my modal

<div class="modal modal_outer right_modal fade" id="information_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">  
    <div class="modal-dialog" role="document">  
        <div class="modal-content ">  
            <div class="modal-header bg-warning" style="height:50px;padding:10px 5px;font-family:'Delivery';">  
                <h4 class="modal-title">Comments:</h4>  
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">  
                    <span aria-hidden="true">&times;</span>  
                </button>  
            </div>  
            <div class="modal-body get_quote_view_modal_body">  
                <div class="list-group">  
                    <a href="#" class="list-group-item list-group-item-action">  
                        <div class="d-flex w-100">  
                            <h5><i class="fas fa-user"></i>&nbsp; User 1</h5>  
                            <small class="ml-auto">1 days ago</small>  
                        </div>  
                        <p>This is for testing.Please ignore this.</p>  
                    </a>  
                </div>  
                <form asp-page-handler="SubmitChat">  
                    <div class="form-group mt-2">  
                        <label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>  
                        <textarea asp-for="RequestChatBox.Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>  
                        <input id="hdnCommentReqID" type="hidden" asp-for="RequestChatBox.RequestID" value='@Request.Query["RequestID"]' />  
                    </div>  
                    <div class="modal-footer">  
                        <button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>  
                        <button type="submit" class="btn btn-primary">Submit</button>  
                    </div>  
                </form>  
            </div>  
        </div>  
    </div>  
</div>  

Thanks,
Teena

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,010 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Brando Zhang-MSFT 2,556 Reputation points Microsoft Vendor
    2021-11-29T03:15:37.333+00:00

    Hi @Blooming Developer ,

    According to your description, I suggest you could try to use jquery ajax post method to achieve your requirement. By using this, post method will not refresh the whole page.

    More details, you could refer to below codes sample:

    Razor pages:

                         <form asp-page-handler="SubmitChat">  
                             <div class="form-group mt-2">  
                                 <label for="TxtAreaChatBox"><b>Leave Your Comments</b></label>  
                                 <textarea asp-for="Comments" class="form-control" id="TxtAreaChatBox" rows="4"></textarea>  
                                 <input id="hdnCommentReqID" type="hidden" asp-for="RequestID" value='111' />  
                             </div>  
                             <div class="modal-footer">  
                                 <button type="reset" class="btn btn-danger" data-dismiss="modal"><i class="fas fa-window-close mr-2"></i> Cancel</button>  
                                 <button type="submit" class="btn btn-primary" id="btnpost">Submit</button>  
                             </div>  
                         </form>  
    

    Js:

    153223-image.png

    Codes sample for js :

    153125-jscodes.txt

    Backend-codes:

    Notice: you should modify the codes according to your actually post parameter.

            public IActionResult OnPostSubmitChat(string Comments, string RequestID) {  
      
                return new OkResult();  
      
            }  
    
    0 comments No comments