Ajax call to submit a form without a refreshing page in MVC5

advertisements

I need some help on submitting form from MVC view wihtout refreshing page but it appers my bellow ajax code is not working: //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 not getting data for selected item, which I like to get in controller from dropDownkist "SetTime". May I get some help to making ajax call appropriately for this view. Thanks


Your code will generate a SELECT element with name SeTime. So when you submit the form (ajax or normal form submit), the browser will send the selected option value as the value of the form item with key SeTime. It should work assuming you have a parameter with 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 using a view model as your method parameter, make sure it is settable so that model binder will be able to set the value from the posted form request.

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

Also i see a small problem with your UI code. With your current code, when user clicks on the submit button, it calls the AjaxCallAndShowMessage js function, which adds a submit event handler to the form. So when user clicks the second time, It register the event handler again to the same form. That means it will make 2 ajax calls now. When user clicks for 3rd time, It will register the event handler again and it will make 3 calls now. This goes on!!!

All you have to do is register once. If you remove the onclick from the html markup and go the onobutrusive javascript way,

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

and register the submit event handler in 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;
    });
});