MVC / AJAX send data to controller and load response in same view

Question

I have a page with three form fields (2 textbox, 1 dropdown), a submit button and a 'refresh' link. I want to be able to click the link and pass two form textbox values to a controller action, and get a list of values to populate the dropdown box. I do not want to submit the form at this stage.

At the moment, I have managed to call the controller action from the link click, but I cannot pass the two form field values in for some reason. Also, the return JSON just takes me to a new page instead of populating my dropdown list. Any pointers would be great as I am new to javascript and MVC. My code is below;

Controller

public ActionResult Find(AddressFormViewModel model)
{
    ...
    var temp = new List<OptionModel>();
    temp.Add(new OptionModel {Id = item.Id, Value = item.desc});
    return Json(temp, JsonRequestBehavior.AllowGet);
}

HTML

@Html.TextBoxFor(x => Model.HouseNameInput, new { id = "HouseNameInput" })
@Html.TextBoxFor(x => Model.PostCodeInput, new { id = "PostCodeInput" })
@Html.ActionLink("Find","Find", "Address", new { houseInput = Model.HouseNameInput, postcodeInput = Model.PostCodeInput }, new { htmlAttributes = new { @class = "Find" } })

@Html.DropDownListFor(x => Model.AddressOption, Enumerable.Empty<System.Web.Mvc.SelectListItem>(), "-- Loading Values --", new {id = "AddressOptions"})

And lastly, my Javascript method which is retrieving the data from the controller action but not populating the dropdown list (it displays the results in a new page). It is also not successfully sending the form values to the controller action.

    $(function () {
    $('.Find').click(function (evt) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("Find","AddressFormSurface")',
            cache: false,
            async: true,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: {
                houseNameInput: $("#HouseNameInput").value,
                postCodeInput: $("#PostCodeInput").value
            },
            success: function (data) {
                if (data.exists) {
                    var ddl = $('#AddressOptions');
                    ddl.empty();

                    data.each(function () {
                        $(document.createElement('option'))
                            .attr('value', this.Id)
                            .text(this.Value)
                            .appendTo(ddl);
                    });
                }
            },
            error: function (req) {

            }
        });

        // we make sure to cancel the default action of the link
        // because we will be sending an AJAX call
        return false;
    });
});

First remove contentType: "application/json; charset=utf-8",. And suggest you just use <a href="#" id="find">Find</a> rather than the helper (there is no point in adding the rote values etc) and the use $('#find').click() { — user3559349
– user3559349, Commented Sep 22, 2015 at 22:26
@StephenMuecke right but in your case you can just write evt.preventDefault(); before $.ajax and i gess it will work — teo van kot
– teo van kot, Commented Sep 22, 2015 at 22:28
@teovankot, OP already has return false; at the end of the script, but clearly the script is not running if it doing a redirect. — user3559349
– user3559349, Commented Sep 22, 2015 at 22:29

score 1 · Accepted Answer · 2015-09-23 08:10:11Z

1

You have a number of errors in your script which will cause it to fail.

You specify contentType: "application/json; charset=utf-8", but do not stringify the data (the option should be removed)
You need to use .val() (not .value) to get the values of the inputs
The data you receiving does not contain a property named exists so the if block where you append the options will never be hit

In addition it is unnecessary to generate your link using @Html.ActionLink() (your adding route values based on the initial values of the model). Instead just create it manually

<a href="#" id="find">Find</a>

and change the script to

var ddl = $('#AddressOptions'); // cache it
$('#find').click(function () { // change selector
    $.ajax({
        type: 'GET', // its a GET, not a POST
        url: '@Url.Action("Find","AddressFormSurface")', // see side note below
        cache: false,
        async: true,
        dataType: "json",
        data: {
            houseNameInput: $("#HouseNameInput").val(),
            postCodeInput: $("#PostCodeInput").val()
        },
        success: function (data) {
            if (!data) {
                // oops
                return;
            }
            ddl.empty();
            $.each(data, function(index, item) {
                $(document.createElement('option'))
                    .attr('value', item.Id)
                    .text(item.Value)
                    .appendTo(ddl);
                // or ddl.append($('<option></option>').text(item.Value).val(item.Id));
            });
        },
        error: function (req) {
            ....
        }
    }
});

Side note: Also check the name of the controller. Your Html.ActionLink() suggests its AddressController but your script is calling AddressFormSurfaceController

edited Sep 23, 2015 at 8:10

answered Sep 22, 2015 at 22:45

user3559349

Sign up to request clarification or add additional context in comments.

2 Comments

creatiive Over a year ago

Thanks so much! I will test this in the morning and update with / as answer

creatiive Over a year ago

Works perfectly. The error: param is in the wrong section though. Thanks for the help!

Collectives™ on Stack Overflow

MVC / AJAX send data to controller and load response in same view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related