Question

I have a view and partial View in my MVC 4 Project. I have 3 textbox, one check box and a dropdown in view.I am using ajax.actionlink method, to call my controller, Action and pass the parameters and get the result from the partial view and display them in the div tag of the view page.

Here is my code.

@Html.TextBoxFor(m=>m.searchParameter.cityName)
@Html.TextBoxFor(m=>m.searchParameter.CountryName)
@Html.TextBoxFor(m=>m.searchParameter.StateName)

@Ajax.ActionLink("submit", "DisplaySearchResult", "Home"
      , new { searchParameter =  Model.searchParameter }
     , new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "Results", InsertionMode = InsertionMode.Replace }, new { id = "DisplaySearchResult" }).

The problem is am not able to pass the parameters to the model. I am new to MVC4. Is there any way to pass the parameters using jquery or javascript?. I don’t want to load the page during my search result.

Answer 1

As I see, you’re trying to implement a search form. In this case I avoid using a ViewModel and usually do this:

@Html.TextBox("CityName", string.Empty)
@Html.TextBox("CountryName", string.Empty)
@Html.TextBox("StateName", string.Empty)

Then you can use a bit of jQuery to pass the values to your action method:

$("#submit").click(function() {

            var $form = $('form');

            $.ajax({
                type: "GET",
                cache: false,
                url: '@Url.Action(ActionName, ControllerName)',
                data: $form.serialize(),
                success: loadResult
            });

function loadResult(data)
        {
            $("#container").html(data);
        }

Just make sure your action method has the appropriate parameters CityName, CountryName, StateName so that the values bind correctly.