CODEWITHSUNDEEP
jqueryasp.netajaxasp.net-mvcrazor
Redadublex
Redadublex

Reputation: 129

Razor view send dropdown value with ajax

I want to send value of my dropdownlist 

     @Html.DropDownListFor(model => model.selection, Model.liste_selection, new {@id="Selection", @class = "form-control" })

with this ajax post 

<script>
$('#valider').on("click",function () {


    $.ajax({
        url: '@Url.Action("Executer", "Requete")',
        type: "POST",
        data: { id: $('#Selection').val() },
        success: function (result) {
            $('#ajaxDisplay').html(result);
        }
    });

});

But the value of my dropdown list doenst reach controller it goes null

Here is my controller 

   [HttpPost]
    public ActionResult Executer(RequeteOptimise ro, string Command)
    {

        Session["dateDebutReq"] = ro.begin.ToString("dd/MM/yyyy", CultureInfo.InvariantCulture);
        Session["dateFinReq"] = ro.end.ToString("dd/MM/yyyy", CultureInfo.InvariantCulture);
        if (ro.selection.Contains("Tous"))
        {
            var viewModel = new RequeteOptimise
            {
                nombre = rr.callReqCount(ro)
            };

            return PartialView("../utilities/Nombre", viewModel);
        }

Upvotes: 0

Views: 2031

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Try making some changes in your ajax as below

$('#valider').on("click",function () {
    var info={
              id:$('#Selection option:selected').text();
             };
    $.ajax({
        url: '@Url.Action("Executer", "Requete")',
        type: "POST",
        data: JSON.stringify(info),
        success: function (result) {
            $('#ajaxDisplay').html(result);
        }
    });

});

Let me know if you face any problem?

EDIT - Assuming that your model contains 2 strings and 2 dateTime fields I will edit the Jsondata as below:

 $('#valider').on("click",function () {
var date1=$('#date1ID').val();
var date2=$('#date2ID').val();
var model={
             string1: $('#string1ID').val(), 
             string2: $('#string2ID').val(),
             date1: new Date(date1),
             date2: new Date(date2)
          };

$.ajax({
            url: '@Url.Action("Executer", "Requete")',
            type: "POST",
            data: JSON.stringify(model),
            success: function (result) {
                $('#ajaxDisplay').html(result);
            }
        });
});

EDIT: $('#string1ID').val() - here string1ID is ID of whatever control from where you are fetching the value. Same incase of string2ID, date1ID and date2ID

Just check if you are receiving any values in you model parameter of controller method

EDIT 2- Well if you want to pass model value one by one that the above said way will work for sure but if you want to pass the whole form to the controller through Ajax you can modify it as below:

$('#valider').on("click",function (e) {
    e.preventDefault();
    var form=$("#formID");
    $.ajax({
        url: '@Url.Action("Executer", "Requete")',
        type: "POST",
        data: form.serialize(),
        success: function (result) {
            $('#ajaxDisplay').html(result);
        }
    });
});

For more detail on serializing the form I suggest you to go through this link

Upvotes: 1

Related Questions