Page reloading after save data in MVC.

Question

Look I have called an API using client. I have a button that I posted inside a form tag. Now the issue I'm facing is that whenever I save the data my page reloads. Is there a way that the API call happens through Client without my page refreshing?

Jignesh Kumar · Answer

Hello Sorabh Without page load and Ajax call you can use partial view in mvc application Please find solution below Create form inside a view @model YourNamespace.Models.YourModel @using (Html.BeginForm(SaveData YourController FormMethod.Post new { id = saveForm enctype = multipart/form-data })) { @Html.TextBoxFor(m => m.Name new { @placeholder = Enter your name }) Save } } Create controller for api and submission to your form public class YourController : Controller { [HttpPost] public PartialViewResult SaveData(YourModel model) { if (ModelState.IsValid) { // Example: Call your API or save data // Simulating a successful API call bool isSuccess = CallYourApi(model.Name); // Return a partial view with a response message ViewBag.Message = isSuccess ? Data saved successfully! : Failed to save data.; return PartialView(_Response); } ViewBag.Message = Validation failed. Please correct the errors.; return PartialView(_Response); } private bool CallYourApi(string name) { // Implement your API call logic here // Example: return true if success false otherwise return !string.IsNullOrEmpty(name); } } Create a partial view called _Response.cshtml . @ViewBag.Message Update the Form Container Dynamically @using (Html.BeginForm(SaveData YourController FormMethod.Post new { id = saveForm target = responseIframe })) { @Html.TextBoxFor(m => m.Name new { @placeholder = Enter your name }) Save } This approach ensures a clean MVC structure while achieving dynamic updates on the page without requiring extensive JavaScript.

Jaish Mathews · Answer

To achieve a more seamless user experience you need to implement partial page updates where only the relevant section of the screen is refreshed rather than reloading the entire page. This can be accomplished using client-side technologies such as AJAX or modern solutions like WebSocket-based frameworks or WebAssembly applications (e.g. Blazor). Without leveraging these technologies the entire page will continue to refresh because traditional HTTP operates on a Request/Response model leading to a full-page reload by default.

Sourabh Dhiman · Answer

Jignesh I want to without ajax call.

Jignesh Kumar · Answer

Hello Sourabh You can use ajax call or fetch with api endpoint which will resolve your issue Form with API Call Save Data document.getElementById('myForm').addEventListener('submit' function (e) { e.preventDefault(); // Prevent form submission (page reload) const data = document.getElementById('dataInput').value; // Make the API call using fetch fetch('YOUR_API_ENDPOINT' { method: 'POST' // or 'GET' depending on your API headers: { 'Content-Type': 'application/json' } body: JSON.stringify({ data: data }) // Pass form data as JSON }) .then(response => response.json()) // Assuming the server responds with JSON .then(data => { console.log('Success:' data); // Handle success here like showing a success message }) .catch((error) => { console.error('Error:' error); // Handle error here like showing an error message }); }); Note : key points is you must need to add e.preventDefault() which will stop page from submit and reload.