Call Controller Actions using HttpClient

A few months ago I wrote Use ASP.NET MVC Controller as API wherein I discussed how MVC controller can be treated as a service. In that example the client used jQuery Ajax to call the controller actions. Some readers asked whether such actions can be called by HttpClient instead of jQuery. To that end this article explains how that can be donw.

The HttpClient component is typically used to call a Web API. The overall design of HttpClient component is geared towards REST services. Its methods such as GetAsync(), PostAsJsonAsync(), PutAsJsonAsync() and DeleteAsync() use the GET, POST, PUT and DELETE verbs to invoke the respective Web API actions. However, you can also use the HttpClient to call ordinary MVC actions. Of course, the actions to be called must follow the pattern as expected by the HttpClient.

This article shows how HttpClient can be used to invoke MVC actions. We will use the same CustomerController and Customer model explained at the above link. So, make sure you have the code ready before you go any further.

Since we wish to call the actions of CustomerController through HttpClient we need to add a reference to System.Net.Http assembly. This assembly provides the HttpClient component. Once referenced add HomeController to the Controllers folder. The HomeController will have six action methods:

• Index()
• Insert()
• Insert(obj)
• Update(id)
• Update(obj)
• Delete(id)

The Index() action will invoke the GetAll() action on the CustomerController to retrieve a List of Customer objects. The Insert() method will simply display a blank view to accept new Customer details. The Insert(obj) method calls the Post() action of the CustomerController and inserts the new customer into the database. The Update(id) method retrieves a Customer whose CustomerID is specified by calling GetByID() action of CustomerController. It then displays the existing Customer details for editing. The Update(obj) action calls the Put() action of the CustomerController and saves the modified Customer to the database. The Delete() action calls the Delete() action of the CustomerController and deletes a Customer.

The complete code of HomeController is given below:

public class HomeController : Controller
{
    private HttpClient client = new HttpClient();

    public HomeController()
    {
        client.BaseAddress = new Uri("http://localhost:49277");
        client.DefaultRequestHeaders.Accept.Add(
        new MediaTypeWithQualityHeaderValue("application/json"));
    }

    public ActionResult Index()
    {
        HttpResponseMessage response = client.
                     GetAsync("/Customer/GetAll").Result;
        List<Customer> data = response.Content.
                     ReadAsAsync<List<Customer>>().Result;
        return View(data);
    }

    public ActionResult Update(string id)
    {
        HttpResponseMessage response = client.
              GetAsync("/Customer/GetById" + $"/{id}").Result;
        Customer data = response.Content.
              ReadAsAsync<Customer>().Result;
        return View(data);
    }

    [HttpPost]
    public ActionResult Update(Customer obj)
    {
        if (ModelState.IsValid)
        {
            HttpResponseMessage response = client.
                PutAsJsonAsync<Customer>("/Customer/Put" + 
                $"/{obj.CustomerID}", obj).Result;
            TempData["Message"] = "Customer modified successfully!";
            return RedirectToAction("Index");
        }
        else
        {
            return View(obj);
        }
    }

    public ActionResult Insert()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Insert(Customer obj)
    {
        if (ModelState.IsValid)
        {
            HttpResponseMessage response = client.
               PostAsJsonAsync<Customer>
               ("/Customer/Post", obj).Result;
            TempData["Message"] = "Customer added successfully!";
            return RedirectToAction("Index");
        }
        else
        {
            return View(obj);
        }
    }


    public ActionResult Delete(string id)
    {
        HttpResponseMessage response = client.
               DeleteAsync("/Customer/Delete" + $"/{id}").Result;
        TempData["Message"] = "Customer deleted successfully!";
        return RedirectToAction("Index");
    }
}

When you call a Web API using HttpClient the URL is a REST based end point of the Web API (for example, http://localhost/api/customer). However, you can't use this pattern with the normal MVC controllers. If you observe the URLs in the above code you will find that they point to the actual action such as GetAll and Post. But apart from this difference the rest of the code is quite similar to the Web API based application.

You will also need to add three views - Index, Insert and Update. These views are given below:

Index view

@model List<MVCControllerViaHttpClient.Models.Customer>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <h1>List of Customers</h1>
    <a href="/home/insert">Add New Customer</a>
    <br />
    @TempData["Message"]
    <br />
    <table border="1" cellpadding="10">
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.CustomerID</td>
                <td>@item.CompanyName</td>
                <td><a href="/home/update/
                      @item.CustomerID">Edit</a></td>
                <td><a href="/home/delete/
                      @item.CustomerID">Delete</a></td>
            </tr>
        }
    </table>
</body>
</html>

Insert view

@model MVCControllerViaHttpClient.Models.Customer

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>New</title>
</head>
<body>
    <h1>Add New Customer</h1>

    @using (Html.BeginForm("insert", "home", FormMethod.Post))
    {
        <table border="1" cellpadding="10">
            <tr>
                <td>Customer ID :</td>
                <td>@Html.TextBoxFor(m => m.CustomerID)</td>
            </tr>
            <tr>
                <td>Company Name :</td>
                <td>@Html.TextBoxFor(m => m.CompanyName)</td>
            </tr>
            <tr>
                <td>Contact Name :</td>
                <td>@Html.TextBoxFor(m => m.ContactName)</td>
            </tr>
            <tr>
                <td>Country :</td>
                <td>@Html.TextBoxFor(m => m.Country)</td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="Insert" />
                </td>
            </tr>
        </table>
    }

    @ViewBag.Message
</body>
</html>

Update view

@model MVCControllerViaHttpClient.Models.Customer

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
</head>
<body>
    <h1>Edit Existing Customer</h1>

    @using (Html.BeginForm("update", "home", FormMethod.Post))
    {
        <table border="1" cellpadding="10">
            <tr>
                <td>Customer ID :</td>
                <td>@Html.TextBoxFor(m => m.CustomerID, 
                    new { @readonly="readonly" })</td>
            </tr>
            <tr>
                <td>Company Name :</td>
                <td>@Html.TextBoxFor(m => m.CompanyName)</td>
            </tr>
            <tr>
                <td>Contact Name :</td>
                <td>@Html.TextBoxFor(m => m.ContactName)</td>
            </tr>
            <tr>
                <td>Country :</td>
                <td>@Html.TextBoxFor(m => m.Country)</td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="Update" />
                </td>
            </tr>
        </table>
    }

    @ViewBag.Message
</body>
</html>

Make sure to change the model namespace in the @model directive of all the views as per your setup.

That's it! Run the Index view and test the insert, update and delete operations.