Ajax Post in MVC... Why is the string null?

Question

So basically I'm creating a Request system in a MVC application. I have this "Create Request" section where I can select the type of request I want to do in a DropDownList from Telerik. What I want to do is, every time I choose something from the list, a partial view appears with the form related to that type of request.

This is my ajax Post from the Create.cshtml View:

<script>
    function change() {
        var value = $("#RequestType").val();
        alert(value);
        $.ajax({
            url: "/Request/CreateRequestForm",
            type: "get",
            data: { requestValue : JSON.stringify(value)}
        }).done(function (data) {
            $("#partialplaceholder").html(data);
        }).fail(function () {
            alert('error');
        })
    };
</script>

This is my controller:

public ActionResult Index()
        {
           //Things
            return View();
        }

    [HttpGet]
    public ActionResult Create()
    {
        return View();
    }

    [HttpGet]
    public PartialViewResult CreateRequestForm(string dropDownValue)
    {   string partialView="";
        int RequestType = Convert.ToInt32(dropDownValue);
        switch (RequestType)
        {
            case 1 :
                partialView+="_CreateAbsence";
                break;
            case 2 :
                partialView += "_CreateAdditionalHours";
                break;
            case 3 :
                partialView += "_CreateCompensationDay";
                break;
            case 4 :
                partialView += "_CreateErrorCorrection";
                break;
            case 5 :
                partialView += "_CreateVacation";
                break;
        }
        return this.PartialView(partialView);
    }

Everytime time the even triggers my dropDownValue string is null... Why? Thanks in advance! :)

EDIT View Code

<h1>Create New Request</h1>

        @(Html.Kendo().DropDownList()
          .Name("RequestType")
          .DataTextField("Text")
          .DataValueField("Value")
          .Events(e => e.Change("change"))
          .BindTo(new List<SelectListItem>() {
              new SelectListItem() {
                  Text = "Absence",
                  Value = "1"
              },
              new SelectListItem() {
                  Text = "Additional Hours",
                  Value = "2"
              },
              new SelectListItem() {
                  Text = "Compensation Day",
                  Value = "3"
              },
              new SelectListItem() {
                  Text = "Error Correction",
                  Value = "4"
              },
              new SelectListItem() {
                  Text = "Vacation",
                  Value = "5"
              }
          })
          .Value("1")
        )


<script>
    function change() {
        var value = $("#RequestType").val();
        alert(value);
        $.ajax({
            url: "/Request/CreateRequestForm",
            type: "get",
            data: { requestValue : JSON.stringify(value)}
        }).done(function (data) {
            $("#partialplaceholder").html(data);
        }).fail(function () {
            alert('error');
        })
    };
</script>

<div id="partialplaceholder">

</div>

Your sending a name/value pair which is requestValue: someValue but your CreateRequestForm() method has a parameter named dropDownValue (not requestValue) - change one or the other so they match (and its not necessary to stringify the value) — user3559349
– user3559349, Commented Aug 4, 2015 at 14:08
And since you obviously want an int then the parameter should be int requestValue (not string) — user3559349
– user3559349, Commented Aug 4, 2015 at 14:14

Zippy · Accepted Answer · 2015-08-04 14:15:50Z

First of all: The title says you're doing a post request but in your code there's a get request.

Second: In order to make it work you have to change either the name of the data in the javascript you're sending to match the parameter name in the c# code like:

<script>
    function change() {
        var value = $("#RequestType").val();
        alert(value);
        $.ajax({
            url: "/Request/CreateRequestForm",
            type: "get",
            data: { dropDownValue: JSON.stringify(value)}
        }).done(function (data) {
            $("#partialplaceholder").html(data);
        }).fail(function () {
            alert('error');
        })
    };
</script>

or change the name of the parameter in the c# method, like:

        [HttpGet]
        public PartialViewResult CreateRequestForm(string requestValue )
        {
          ... 
        }

Third: I'm quite sure you don't need to JSON.Stringify() the data. For more details about the Stringify() method & usages please check this link

Collectives™ on Stack Overflow

Ajax Post in MVC... Why is the string null?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related