CODEWITHSUNDEEP
asp.netjquery-uijqueryasp.net-mvc-4
NNassar
NNassar

Reputation: 485

jQuery $.post() Method in MVC4

I'm using jQuery $.post() Method to make a call to a method in the controller but it's not hitting that method when this function is called. Anyone know how to work jQuery $.post() Method?

function OpenDialog(StateCode) { 
    $.post("~/Home/LoadCityViewModel", { 
        stateCode: StateCode }, 
        function () { 
            $("#dialog-modal").dialog("open"); 
        }); 
        return false; 
}

private ListingsViewModel LoadCityViewModel(string stateCode) { return null; }

Upvotes: 2

Views: 4670

Answers (3)

NNassar
NNassar

Reputation: 485

Finally, this was the most consistent way to make the call that worked every time.

function OpenDialog(StateCode) {
    $.ajax({
        type: 'POST',
        url: 'Home/LoadCityViewModel',
        data: JSON.stringify({ stateCode: StateCode }),
        contentType: 'application/json; charset=utf-8',
        cash: false,
        success: function () {
            $("#dialog-modal").dialog("open");
        }
    });
    return false;
}

Upvotes: 1

Olexander Ivanitskyi
Olexander Ivanitskyi

Reputation: 2240

As you have some questions besides $.post(), I can specify the several basic problems in your code:

  1. The "~/Home/LoadCityViewModel" is not a valid url, the ~/ symbols are recognized by ASP.NET server side only to point to web application root path (whether it's a virtual directory or a web site root). Use Url.Action or Url.Content instead to resolve the url. And if the specified code is declared in a separate javascript file, consider passing the url as a setting parameter (initializing it in Razor view), or just specify "/Home/LoadCityViewModel" (if you are sure that your web application will be deployed to web site root and not to virtual directory). Note that "Home/LoadCityViewModel" (without leading "/") means "from current location" or "from the current page path" and it won't work, for example if you call from a View of another Controller.

  2. jQuery UI Dialog Widget: check the API sample or the source code on http://jqueryui.com/dialog/

  3. return false, does it really make any sense when the function always returns false?

  4. Action method of your Controller should be public.

  5. Note that Action method should return ActionResult, not a ViewModel.

  6. If you need to restrict your action to handle POST http method only (that's why you chose jQuery.post() and not jQuery.get(), I guess), mark your method with HttpPostAttribute

So, I guess this is what you basically need (in case it's inline script in Razor View):

function OpenDialog(StateCode) { 
    $.post("@Url.Action("LoadCityViewModel", "Home")",
        // it will actually output "/Home/LoadCityViewModel"
        { stateCode: StateCode }, 
        function () { 
            $("#dialog-modal").dialog(); 
        });
}

And the server code:

[HttpPost]
public ActionResult LoadCityViewModel(string stateCode) 
{ 
    return Json(null); //Pass your model as a parameter here.
}

If I wrote too many redundant things, then I'm sorry;)

Upvotes: 2

iAmClownShoe
iAmClownShoe

Reputation: 616

            $.Ajax({
                url: path to script,
                success: onSuccess,
                error: onError,
                type: 'POST',
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(query)
            });

There is an example of an ajax request as I like to format it. But that isn't your problem necessarily. I believe the issue is the path to your method. Let's say for example, i have a controller called UserLoginController. from the user login view page, (where the javascript lives) i make a call to the controller using the url - UserLogin/Validate
basically you want to specify the controller and method you want to call. Validate being the method in this case.

Upvotes: 0

Related Questions