猿教程 Logo

ASP.NET MVC中调用Web API Put方法

在前面的两个部分,我们学习了如何在Asp.net MVC中调用用Web API Get和Post方法。在这里,我们将看到如何在Asp.NET MVC中调用Web API的Put方法来更新现有的记录。

我们已经在前面的章节中创建了Web API的Put方法,用来处理HTTP Put请求,方法的实现部分如下。

public class StudentController : ApiController
{
    public StudentController()
    {
    }
    public IHttpActionResult Put(StudentViewModel student)
    {
        if (!ModelState.IsValid)
            return BadRequest("Not a valid data");
        using (var ctx = new SchoolDBEntities())
        {
            var existingStudent = ctx.Students.Where(s => s.StudentID == student.Id).FirstOrDefault<Student>();
            if (existingStudent != null)
            {
                existingStudent.FirstName = student.FirstName;
                existingStudent.LastName = student.LastName;
                ctx.SaveChanges();
            }
            else
            {
                return NotFound();
            }
        }
        return Ok();
    }
}

我们前一节中创建了学生的列表视图如下。下面的视图中有一个edit链接为每条记录编辑特定的记录。在本节中,我们将处理编辑功能。


以下是在前面章节中创建的一个Web API MVC项目结构。在这个项目中我们将添加必要的类。


我们已经在模型文件夹下创建了以下StudentViewModel类。

public class StudentViewModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
        
    public AddressViewModel Address { get; set; }
    public StandardViewModel Standard { get; set; }
}

现在让我们通过调用Web API的Put方法来实现编辑功能。

第一步:

在上面的学生列表视图中,当用户单击Edit链接时将发送HTTP GET请求http://localhost:64189/student/edit/{id} 到 MVC控制器。所以,我们需要在StudentController中添加HttpGet动作方法“Edit”用来呈现一个编辑视图如下所示。

public class StudentController : Controller
{
    public ActionResult Index()
    {
        //consume Web API Get method here.. 
        return View();
    }
    public ActionResult Edit(int id)
    {
        StudentViewModel student = null;
        using (var client = new HttpClient())
        {
            client.BaseAddress = new Uri("http://localhost:64189/api/");
            //HTTP GET
            var responseTask = client.GetAsync("student?id=" + id.ToString());
            responseTask.Wait();
            var result = responseTask.Result;
            if (result.IsSuccessStatusCode)
            {
                var readTask = result.Content.ReadAsAsync<StudentViewModel>();
                readTask.Wait();
                student = readTask.Result;
            }
        }
        return View(student);
    }
}

正如您所看到的,Edit()操作方法包括id参数。这个id参数将被绑定到查询字符串中。通过这个id参数,我们将使用HttpClient调用Web API接口从数据库中查询到对应的学生记录并显示在Edit视图中。

第二步:

现在,我们创建编辑视图,在上面编辑操作方法上单击右键并选择添加视图。这将打开添加视图弹窗如下所示。


在添加视图弹窗中,选择Template为Edit,并选择StudentViewModel作为一个模型类如上所示。单击Add按钮来生成Edit.cshtml文件。该文件在Views > Student文件夹下,如下所示。

@model WebApiDemo.Models.StudentViewModel
@{
    ViewBag.Title = "Edit Student - MVC";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Edit Student</h2>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.Id)
        <div class="form-group">
            @Html.LabelFor(model => model.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.LastName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

在上面的案例中,Html.BeginForm()将生成HTML表单标记,当用户单击save按钮时此表单将发送post请求。

现在,按下Ctrl + F5运行项目时它将显示以下学生列表视图。


在上面的页面中,当您单击edit链接它将显示以下编辑视图。



第三步:

在StudentController中添加HttpPost 动作方法,该方法将发送HTTP PUT请求到Web API来更新当前记录。

public class StudentController : Controller
{
        
    public ActionResult Edit(int id)
    {
        StudentViewModel student = null;
        using (var client = new HttpClient())
        {
            client.BaseAddress = new Uri("http://localhost:64189/api/");
            //HTTP GET
            var responseTask = client.GetAsync("student?id=" + id.ToString());
            responseTask.Wait();
            var result = responseTask.Result;
            if (result.IsSuccessStatusCode)
            {
                var readTask = result.Content.ReadAsAsync<StudentViewModel>();
                readTask.Wait();
                student = readTask.Result;
            }
        }
        return View(student);
    }
    [HttpPost]
    public ActionResult Edit(StudentViewModel student)
    {
        using (var client = new HttpClient())
        {
            client.BaseAddress = new Uri("http://localhost:64189/api/student");
            //HTTP POST
            var putTask = client.PutAsJsonAsync<StudentViewModel>("student", student);
            putTask.Wait();
            var result = putTask.Result;
            if (result.IsSuccessStatusCode)
            {
                return RedirectToAction("Index");
            }
        }
        return View(student);
    }
}

正如上面你可以看到的,HttpPost Edit动作方法使用HttpClient发送HTTP PUT请求到Web API来更新学生记录。

通过这种方式我们可以调用Web API的Put方法来执行HTTP Put请求编辑现有记录。

接下来,我们将调用Web API的Delete方法来删除数据来源中的一个记录。


版权声明:本站所有教程均为本站原创或翻译,转载请注明出处,请尊重他人劳动果实。请记住本站地址:www.yuanjiaocheng.net (猿教程) 作者:卿文刚
本文标题: C#环境
本文地址:http://www.yuanjiaocheng.net/webapi/mvc-consume-webapi-put.html