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

Question

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

Answer 1

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:

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();  
  
        }