Performing an Ajax request to submit a form without the need to reload the page in MVC

Question

Performing an Ajax request to submit a form without the need to reload the page in MVC

I am looking for assistance with submitting a form from an MVC view without refreshing the page. However, it seems that my AJAX code below is not functioning properly: //here is ajax call

function AjaxCallAndShowMessage(btnClick) {

$('form').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                ShowTimeChangeMessage(); // show an alert message
            }
        });

    return false;
});

}

// here is the view

<div id="dialog" title="">
@using (Html.BeginForm("Administration", "Home", FormMethod.Post, new { enctype = "multipart/form-data"}))
{
@Html.DropDownList("SeTime", new List<SelectListItem>
{
new SelectListItem{ Text="1 Min", Value = "60" },
new SelectListItem{ Text="2 Min", Value = "120" },
new SelectListItem{ Text="3 Min", Value = "180" },
}, "Select Time")
<input type="submit" value="Set Time "  
onclick="AjaxCallAndShowMessage(this)" />
}
</div>

I am unable to retrieve data for the selected item from the dropdown list "SetTime" in the controller. Can someone provide guidance on how to appropriately make the AJAX call for this view? Thank you.

javascript ajax asp.net-mvc

Answer 1

Answer №1

Your script will create a SELECT element named SeTime. When the form is submitted (via ajax or normal submission), the browser will send the selected option's value as the value of the form item with the key SeTime. This should function properly if you have a parameter with the same name in your HTTP post action method.

[HttpPost]
public ActionResult Administration(string SeTime)
{
 // to do : Do something with SeTime
 // to do : Return something
}

If you are utilizing a view model as the method parameter, ensure it is settable so that the model binder can assign the value from the posted form request.

public class YourViewModel
{
  public string SeTime {set;get;}
  // other properties here
}

Additonally, there seems to be a minor issue in your UI code. With your current implementation, when the user clicks the submit button, it triggers the AjaxCallAndShowMessage JavaScript function, which attaches a submit event handler to the form. Consequently, on subsequent clicks, additional event handlers get registered to the form resulting in multiple Ajax calls being made. To fix this, simply register the event handler once. Remove the onclick attribute from the HTML markup and instead use unobtrusive JavaScript like below:

<input type="submit" value="Set Time "   />

Then, register the submit event handler within the document ready event:

$(function () {

    $('form').submit(function () {

        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
               alert("Ajax call is done");
            }
        });

        return false;
    });
});

Answer 2

Your script will create a SELECT element named SeTime. When the form is submitted (via ajax or normal submission), the browser will send the selected option's value as the value of the form item with the key SeTime. This should function properly if you have a parameter with the same name in your HTTP post action method.

[HttpPost]
public ActionResult Administration(string SeTime)
{
 // to do : Do something with SeTime
 // to do : Return something
}

If you are utilizing a view model as the method parameter, ensure it is settable so that the model binder can assign the value from the posted form request.

public class YourViewModel
{
  public string SeTime {set;get;}
  // other properties here
}

Additonally, there seems to be a minor issue in your UI code. With your current implementation, when the user clicks the submit button, it triggers the AjaxCallAndShowMessage JavaScript function, which attaches a submit event handler to the form. Consequently, on subsequent clicks, additional event handlers get registered to the form resulting in multiple Ajax calls being made. To fix this, simply register the event handler once. Remove the onclick attribute from the HTML markup and instead use unobtrusive JavaScript like below:

<input type="submit" value="Set Time "   />

Then, register the submit event handler within the document ready event:

$(function () {

    $('form').submit(function () {

        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
               alert("Ajax call is done");
            }
        });

        return false;
    });
});

Answer 3

Answer №2

Why use jquery and ajax to submit a form when you can utilize @Ajax.BeginForm? This method functions similarly to a jquery ajax call, allowing the form to be posted without refreshing the page.

<div id="dialog" title="">
@using (Ajax.BeginForm("Administration", "Home", new AjaxOptions
                {
                    OnSuccess = "OnSuccess",
                    OnFailure = "OnFailure",
                    LoadingElementId = "progress"
                }))
     {

      @Html.DropDownList("SeTime", new List<SelectListItem>
        {
         new SelectListItem{ Text="1 Min", Value = "60" },
         new SelectListItem{ Text="2 Min", Value = "120" },
         new SelectListItem{ Text="3 Min", Value = "180" },
         }, "Select Time")
       <input type="submit" value="Set Time" />
      }
     }

 </div>

For further details, visit this link

Answer 4

Why use jquery and ajax to submit a form when you can utilize @Ajax.BeginForm? This method functions similarly to a jquery ajax call, allowing the form to be posted without refreshing the page.

<div id="dialog" title="">
@using (Ajax.BeginForm("Administration", "Home", new AjaxOptions
                {
                    OnSuccess = "OnSuccess",
                    OnFailure = "OnFailure",
                    LoadingElementId = "progress"
                }))
     {

      @Html.DropDownList("SeTime", new List<SelectListItem>
        {
         new SelectListItem{ Text="1 Min", Value = "60" },
         new SelectListItem{ Text="2 Min", Value = "120" },
         new SelectListItem{ Text="3 Min", Value = "180" },
         }, "Select Time")
       <input type="submit" value="Set Time" />
      }
     }

 </div>

For further details, visit this link

Performing an Ajax request to submit a form without the need to reload the page in MVC

Answer №1

Answer №2

Similar questions

Inserting a variable into a JSON string

Insert information into a nested array using Mongoose

How to extract just the year from Material-UI's date picker in React

Exploring the magic of Hover effects using CSS and JQuery

Tips for isolating all the Javascript loaded via ajax or jquery.load within a specific child scope instead of a global scope

Displaying two separate divs on a single jQuery mobile website using jQuery Ajax

Unable to dynamically validate the input field for the name using Angular.js

What is the process for reverting back to a previous version using n (Node Version Manager)?

Handling exceptions in Node.js is an essential part of writing reliable

There seems to be an issue with Material UI Autocomplete not responding to the onChange value

Nodejs Websocket integration with the Firefox browser

When the user clicks, I plan to switch the audio source

Unable to send information to a function (using jQuery)

Creating a blank webpage after including a component tag for an Angular form

Gaining entry to specialized assistance through an occasion

Key within square brackets in a JSON array

When attempting to navigate to a different page in Next.js, the Cypress visit functionality may not function as

Guide for leveraging AngularJS for efficiently loading content within a collapsible panel

What is the best way to retrieve all collections and their respective documents in Firestore using cloud functions?

A step-by-step guide on leveraging useRef() to specifically target dynamic material-ui tabs