Parameters from jQuery.load() not passed to Controller Action method

Question

In my MVC3 View I have a textbox linked to a Model property, like so:

 <tr> 
        <td>Name contains:</td> 
        <td>@Html.TextBoxFor(model => model.NameContains, new { @style = "width:99%" })</td> 
        <td>@Html.ImageButton("Search", "nameContainsSearchButton")</td> 
</tr>

My Image button is used in a piece of script to call the appropriate method on the controller that returns a partial view, like so:

<script type="text/javascript">
$(function () {
    $('#nameContainsSearchButton').click(function () {

        var data = $("#NameContains").val();

        // send an AJAX request to the controller action
        $('#searchResults').load("/QuickSearch/Search", data);

        return false;
    });
});

As you can see, I am trying to pass the value of the TextBox 'NameContains' as a parameter to my controller method. However, the parameter received by the method is always null.

Anybody have any idea what I am doing wrong?

Thanks in advance,

Lucien.

EDIT: I got the above working by changing the call to:

$('#searchResults').load("/QuickSearch/Search", {nameContains: data});

where nameContains is the name of the parameter in the action method.

I have a follow-up question, though: how can I pass the entire Model as a parameter to an action method? There's another page where the user can enter many search criteria and I want to just pass the entire search criteria model object to the controller....

what does the rendered HTML look like?

Shad
– Shad

2011-10-30 22:27:00 +00:00
Commented Oct 30, 2011 at 22:27 — Shad
– Shad, Commented Oct 30, 2011 at 22:27

T W · Accepted Answer · 2011-10-30 22:29:41Z

4

You are doing it wrong, take a look at http://api.jquery.com/load/, you passed data as callback which should be invoked after server response, it should be

$('#searchResults').load("/QuickSearch/",{Search: data});

answered Oct 30, 2011 at 22:29

T W

6,3272 gold badges28 silver badges33 bronze badges

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

1 Comment

Lucien Dol Over a year ago

Yes, you are right. I figured that one out just before I read your answer. However, it does not look like I require the method name as a parameter in my case (the method will return a partial view). Any ideas about my follow-up question (see edit)?

Darin Dimitrov · Accepted Answer · 2011-10-31 06:59:42Z

1

You could send your entire model as a JSON request:

var model = {
    nameContains: $('#NameContains').val(),
    someOtherPropertyName: 'some other value',
    someComplexObject: {
        complexProp1: 'value 1',
        complexCollectionProp: [ 1, 2, 3 ]
    }
};

$.ajax({
    url: '@Url.Action("Search", "QuickSearch")',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(model),
    success: function(result) {
        $('#searchResults').html(result);
    }
});

answered Oct 31, 2011 at 6:59

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

6 Comments

Lucien Dol Over a year ago

That looks promising. I guess I don't need your first code snippet as the (Razor) code in the rest of my page already updates the model. What would the signature of my controller method look like in this case - specifically the type of the parameter? And would I still return a PartialView?

Darin Dimitrov Over a year ago

@LucienDol, in this case the action will take a single parameter which will represent your view model. It will have the same properties as the javascript object defined below: nameContains, someOtherPropertyName, someComplexObject (with complexProp1 and complexCollectionProp). As far as the return type is concerned that would entire depend on what you are trying to achieve. Could be a partial view, yet another JSON object, XML, etc ...

Lucien Dol Over a year ago

So this does not have to be a JSON parameter type (if such a thing exists)?

Darin Dimitrov Over a year ago

@LucienDol, no, a plain POCO object.

Darin Dimitrov Over a year ago

@LucienDol, you subscribe to the .click event handler of the button: $('#id_of_your_button').click(function() { ... });

|

Dmitrii Tarasov · Accepted Answer · 2011-10-30 22:28:04Z

0

Second parameter 'data' should have key-value format, f.ex:

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

Not just value. See third example in documentation http://api.jquery.com/load/

answered Oct 30, 2011 at 22:28

Dmitrii Tarasov

4142 silver badges13 bronze badges

1 Comment

Lucien Dol Over a year ago

Yes, you are right. I figured that one out just before I read your answer. Any ideas about my follow-up question (see edit)?

Collectives™ on Stack Overflow

Parameters from jQuery.load() not passed to Controller Action method

3 Answers 3

1 Comment

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related