how to call An ActionResult from Jquery

Question

this is my ActionResult

{          

    UsersModel um = new UsersModel();
    um.Users = userRepository.GetAllUsers();
    um.UserCustomers = userRepository.GetAllUserCustomerConnections();
    um.UserTypes = enums.GetAllDescriptions(CodeType.UserType);
    um.Customers = userRepository.GetAllCustomers();
    um = SearchUsers(Request,um);
    return View(um);
}

it uses the function SearchUsers :

    private UsersModel SearchUsers(HttpRequestBase request, UsersModel curModel)
    {
        try
        {
            // request parameters
            string userName = request.Params["user-name"];
            string firstName = request.Params["first-name"];
            string lastName = request.Params["last-name"];
            int status,type,businessId;

            if (!string.IsNullOrWhiteSpace(userName))
                curModel.Users = curModel.Users.Where(u => u.Username.Contains(userName));
            if (!string.IsNullOrWhiteSpace(firstName))
                curModel.Users = curModel.Users.Where(u => u.FirstName.Contains(firstName));
            if (!string.IsNullOrWhiteSpace(lastName))
                curModel.Users = curModel.Users.Where(u => u.LastName.Contains(lastName));
            if (int.TryParse(request.Params["status-search"], out status))
                curModel.Users = curModel.Users.Where(u => u.Status == status);
            if (int.TryParse(request.Params["userTypes-search"], out type))
                curModel.Users = curModel.Users.Where(u => u.UserType == type);
            if (int.TryParse(request.Params["busi-name"], out businessId))
                curModel.Users = curModel.Users.Where(u => u.LastCustomerId == businessId);

            return curModel;
        }
        catch
        {
            return curModel;
        }

    }

now i have on my view a button with the id "search-users" and my command in the js file :

$('#search-users').click(function () { 

    });

how can i post the HttpRequestBase to the controller ?

Answer 1

I can't answer this fully because I don't know exactly how everything is structured.

Whether the call to your action is using AJAX or not you will still have the same objects during the request. This means that you will still have a Request object that is of type HttpRequestBase . This is good news; it means that handling AJAX requests is relatively simple.

Firstly, decide how to handle your action so that it's appropriate for it to be used with AJAX. You can use Request.IsAjaxRequest() to branch your logic.

For example:

{          
    UsersModel um = new UsersModel();
    um.Users = userRepository.GetAllUsers();
    um.UserCustomers = userRepository.GetAllUserCustomerConnections();
    um.UserTypes = enums.GetAllDescriptions(CodeType.UserType);
    um.Customers = userRepository.GetAllCustomers();
    um = SearchUsers(Request,um);
    if (Request.IsAjaxRequest())
    {
        return PartialView(um);
    }
    return View(um);
}

In your view you want your button to

1. Send a request using AJAX
2. Do something with the response.

One way to do this might be for your button to send a request to the action and for the action to return a PartialView (as in the example above). This means that you will need to replace the contents of the page with the returned HTML.

Your button looks like a good start.

You'll need your AJAX script to explain which URL to request, some data to send and what to with the response (at a minimum). Example ( non-functional, this is only a guide ):

$('#search-users').click(function () { 
    $.ajax({
        url: "@Url.Action("Index", "MyController")",
        data: {user-name: $("#user-name").val(),
               first-name: $("#first-name").val(),
               last-name: $("#last-name").val()},
        success: function(data) {
                $("#content").html(data);
            };
        }
    );
});

Answer 2

$.ajax({
            type: "GET",
            url: @Url.Action('actionname', 'controllername'),
            data: ({ param1: $('ctl').val(),...}),
            success: function (result) {
//do something
            }
        });