Perform CURD Web API Service Call Function In .NET Core 2.0 And 2.1 MVC (CSHTML)

Introduction

 

API Web service call functions in .NET Core MVC are based on CSHTML. It runs on multiple operating systems because of its cross-platform support. CSHTML generates the client web browser.

 

The below service model name is WebApiCallCoreMVC.Models and the controller name is MobileuserController.cs.

 

This service based on System.Net.Http. It is formatting-oriented and easy to handle on the data Grid View layout.

 

Step 1

 

Create a new project.

 

 

Step 2

 

Choose Web and Select  ASP.NET Web Application (.NET Framework)

 

 

Choose the MVC

 

 

Add on DLL Reference (System.Net.Http.Formatting, Newtonsoft.json)

 

 

Step 3

 

Add class Users.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApiCallCoreMVC.Models
{
    public class Users
    {
        public int ID { get; set; }
        public string Username { get; set; }
        public string Mobile { get; set; }
    }
}

Add Controller class MobileuserController.cs

 

Create Index

// GET: Mobileuser
        public ActionResult Index()
        {
            IEnumerable<Users> emp = null;

            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri("http://localhost:2514/");
                //HTTP GET
                var responseTask = client.GetAsync("api/values");
                responseTask.Wait();

                var result = responseTask.Result;
                if (result.IsSuccessStatusCode)
                {
                    var readTask = result.Content.ReadAsAsync<IList<Users>>();
                    readTask.Wait();

                    emp = readTask.Result;
                }
                else //web api sent error response
                {
                    //log response status here..

                    emp = Enumerable.Empty<Users>();

                    ModelState.AddModelError(string.Empty, "Server error. Please contact administrator.");
                }
            }
            return View(emp);
        }

@model IEnumerable<WebApiCallCoreMVC.Models.Users>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.ID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Username)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Mobile)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Username)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Mobile)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new {  id=item.ID}) |
                @*@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })*@ |
                @Html.ActionLink("Delete", "Delete", new { id=item.ID })
            </td>
        </tr>
}
    </tbody>
</table>

 

Create Edit

public ActionResult GetUpdate(Users us)
      {
          if (ModelState.IsValid)
          {
              string id = us.ID.ToString();
              string uname = us.Username;
              string MobNo = us.Mobile;

              Users objProduct = new Users();
              objProduct.Username = uname;
              objProduct.Mobile = MobNo;
              string json = JsonConvert.SerializeObject(objProduct);

              var baseAddress = "http://localhost:2514/api/values/GetMobileUpdate?ID=" + id + "&Username=" + uname + "&Mobile=" + MobNo + "";

              var http = (HttpWebRequest)WebRequest.Create(new Uri(baseAddress));
              http.Accept = "application/json";
              http.ContentType = "application/json";
              http.Method = "PUT";

              string parsedContent = json;
              ASCIIEncoding encoding = new ASCIIEncoding();
              Byte[] bytes = encoding.GetBytes(parsedContent);

              Stream newStream = http.GetRequestStream();
              newStream.Write(bytes, 0, bytes.Length);
              newStream.Close();

              var response = http.GetResponse();

              var stream = response.GetResponseStream();

          }
          return RedirectToAction("Index");
      }

@model WebApiCallCoreMVC.Models.Users

@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit</h2>

<h4>Users</h4>
<hr />
@using (Html.BeginForm("GetUpdate", "Mobileuser", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Edit">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="ID" class="control-label"></label>
                    <input asp-for="ID" class="form-control" />
                    <span asp-validation-for="ID" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Username" class="control-label"></label>
                    <input asp-for="Username" class="form-control" />
                    <span asp-validation-for="Username" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Mobile" class="control-label"></label>
                    <input asp-for="Mobile" class="form-control" />
                    <span asp-validation-for="Mobile" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input type="submit" value="Save" class="btn btn-default" />
                </div>
            </form>
        </div>
    </div>
}
    <div>
        <a asp-action="Index">Back to List</a>
    </div>

    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }

 

Create Delete

public ActionResult GetDelete(Users us)
        {
            if (ModelState.IsValid)
            {
                string id = us.ID.ToString();
                string uname = us.Username;
                string MobNo = us.Mobile;

                Users objProduct = new Users();
                objProduct.Username = uname;
                objProduct.Mobile = MobNo;
                string json = JsonConvert.SerializeObject(objProduct);

                var baseAddress = "http://localhost:2514/api/values?ID=" + id + "";

                var http = (HttpWebRequest)WebRequest.Create(new Uri(baseAddress));
                http.Accept = "application/json";
                http.ContentType = "application/json";
                http.Method = "DELETE";

                string parsedContent = json;
                ASCIIEncoding encoding = new ASCIIEncoding();
                Byte[] bytes = encoding.GetBytes(parsedContent);

                Stream newStream = http.GetRequestStream();
                newStream.Write(bytes, 0, bytes.Length);
                newStream.Close();

                var response = http.GetResponse();

                var stream = response.GetResponseStream();
            }
            return RedirectToAction("Index");
        }

@model WebApiCallCoreMVC.Models.Users

@{
    ViewData["Title"] = "Delete";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Delete</h2>

@using (Html.BeginForm("GetDelete", "Mobileuser", FormMethod.Post))
{
    <div>
        <fieldset>
            <legend>Mobile Number Information</legend>
            <div>
                @Html.LabelFor(model => model.ID)
                @Html.TextBoxFor(model => model.ID)
            </div> <br />
            <br />
            <input id="Submit" type="submit" value="Delete" />
            <script>
               document.getElementById("Submit").click();
            </script>
            <br />


        </fieldset>
    </div>
}

<h3>Are you sure you want to delete this?</h3>
@using (Html.BeginForm("GetDelete", "Mobileuser", FormMethod.Post))
{
    <div>
        <h4>Users</h4>
        <hr />
        <dl class="dl-horizontal">
            <dt>
                @Html.DisplayNameFor(model => model.ID)
            </dt>
            <dd>
                @Html.DisplayFor(model => model.ID)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.Username)
            </dt>
            <dd>
                @Html.DisplayFor(model => model.Username)
            </dd>
            <dt>
                @Html.DisplayNameFor(model => model.Mobile)
            </dt>
            <dd>
                @Html.DisplayFor(model => model.Mobile)
            </dd>
        </dl>

        <form asp-action="Delete">
            <input type="submit" value="Delete" class="btn btn-default" /> |
            <a asp-action="Index">Back to List</a>
        </form>
    </div>
}

Create New

@model WebApiCallCoreMVC.Models.Users

@{
    ViewData["Title"] = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

<h4>Users</h4>
<hr />
@using (Html.BeginForm("getCreate", "Mobileuser", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Create">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    @*<label asp-for="ID" class="control-label"></label>
                    <input asp-for="ID" class="form-control" />
                    <span asp-validation-for="ID" class="text-danger"></span>*@
                </div>
                <div class="form-group">
                    <label asp-for="Username" class="control-label"></label>
                    <input asp-for="Username" class="form-control" />
                    <span asp-validation-for="Username" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Mobile" class="control-label"></label>
                    <input asp-for="Mobile" class="form-control" />
                    <span asp-validation-for="Mobile" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </form>
        </div>
    </div>
}
    <div>
        <a asp-action="Index">Back to List</a>
    </div>

    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }

 

 

Summary

 

The function is service-oriented and Create, Index, Edit, Delete are of CSHTML design.

 

The single value controller returns the design view. CSHTML is the default view engine of MVC projects. Most web page files use in CSHTML.

 

I hope this method helps you to create a Web API Service Call function in .NET Core 2.0 and 2.1 MVC (CSHTML).