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

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I'm curious if it is possible to retrieve the dates of actions on websites using Selenium with Python

Repeater employs Endless Scrolling feature within DotNetNuke

The alignment of the timeline in HTML CSS becomes distorted once it reaches the fourth element

Encountering an error stating "cloudinary.uploader is undefined" while attempting to delete media files from Cloudinary

Organize tabs with ease in the bootstrap-tabdrop plugin

I need assistance with a feature on my website where a new form is added every time the invite button is clicked, and the form is deleted when the delete button is

Utilize AngularJS to inject a service into a module without assigning it to a variable, enabling easier minification

What is the best way to mention @here with an attachment?

Tips for executing a right slide animation in Jquery

Transferring information within React components

Is it possible for a form to direct submissions to various pages depending on the value of certain fields

Activating a inaccessible element

Display JSON data values using jQuery

Don't forget to retain the checkboxes that were chosen in the

Node.Js error: "The requested resource does not have the 'Access-Control-Allow-Origin' header present."

Using Javascript to dynamically add rows to a table, however they mysteriously appear and disappear soon

Compose an email without the need to access the website

What is the correct way to establish an array variable containing objects?

interactive form fields updating using javascript