猿教程 Logo

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

在前面的小节中,我们学习了如何在Asp.net MVC中调用Web API Get方法并在视图中展示记录。在这里,我们将看到如何调用Web API的Post方法来创建一个新记录到数据源中。

我们已经在“创建包含CRUD操作的Web API接口3:实现Post方法”一节中创建了Web API的Post方法,实现Post方法部分如下所示。

public class StudentController : ApiController
{
    public StudentController()
    {
    }
    //Get action methods of the previous section
    public IHttpActionResult PostNewStudent(StudentViewModel student)
    {
        if (!ModelState.IsValid)
            return BadRequest("Not a valid model");
        using (var ctx = new SchoolDBEntities())
        {
            ctx.Students.Add(new Student()
            {
                StudentID = student.Id,
                FirstName = student.FirstName,
                LastName = student.LastName
            });
            ctx.SaveChanges();
        }
        return Ok();
    }
}

在上面的Web API中,PostNewStudent方法将处理HTTP POST请求http://localhost:64189/api/student。它将使用实体框架在数据库中插入新记录并将返回200 OK响应状态。

以下是在前面章节中创建的一个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; }
}

现在,让我们创建一个用来创建一个新的记录的MVC视图,该视图将通过使用上面的Web API Post方法来向数据库插入记录。

第一步:

首先,我们需要添加Action方法“create”,它将呈现“Create New Student”视图,用户可以输入数据并提交它。在前一节中我们已经创建了StudentController类用来显示学生列表视图。这里,在StudentController中添加“create”操作方法来呈现“Create New Student”视图如下所示。

public class StudentController : Controller
{
    public ActionResult Index()
    {
        //consume Web API Get method here.. 
        return View();
    }
    public ActionResult create()
    {
        return View();
    }
}

现在,右键单击在上面操作方法并选择添加视图。这将打开下面的添加视图弹窗。


现在,选择Template为Create,StudentViewModel类作为一个模型如上所示,点击添加按钮。

这将在View>Student文件夹下生成createcshtml视图。

@model WebApiDemo.Models.StudentViewModel
@{
    ViewBag.Title = "Create New Student - MVC";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create New Student</h2>
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <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="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>


在上面,Html.BeginForm()将生成HTML表单标记<form> action="/Student/Create" method="post" </form>,当用户单击Create按钮时,该表单将发送post请求。

现在,运行项目,并导航到http://localhost:64189/student/create。它将显示简单的数据输入视图如下所示。


当用户输入学生数据,并单击Create按钮,它将向Student Controller发送Post请求。添加一个create方法来处理这个post请求,如下所示。

public class StudentController : Controller
{
    public ActionResult Index()
    {
        //consume Web API Get method here.. 
        return View();
    }
    public ActionResult create()
    {
        return View();
    }
    [HttpPost]
    public ActionResult create(StudentViewModel student)
    {
        using (var client = new HttpClient())
        {
            client.BaseAddress = new Uri("http://localhost:64189/api/student");
            //HTTP POST
            var postTask = client.PostAsJsonAsync<StudentViewModel>("student", student);
            postTask.Wait();
            var result = postTask.Result;
            if (result.IsSuccessStatusCode)
            {
                return RedirectToAction("Index");
            }
        }
        ModelState.AddModelError(string.Empty, "Server Error. Please contact administrator.");
        return View(student);
    }
}

正如你在上面所看到的,HttpPost动作方法Create(),它使用HttpClient发送HTTP POST请求到Web API,Post数据中包含要新增的学生信息。如果响应返回成功状态,那么它将重定向到列表视图。

现在,运行项目,并导航到http://localhost:64189/student/create输入学生信息如下所示。


现在,点击上面的创建按钮,它会插入一个新记录到DB,然后重定向到列表视图如下所示。


同时,如果Web API发送错误响应,上述创建视图将显示一条错误消息,如下所示。


通过本节教程,我们可以调用Web API的Post方法来执行HTTP Post请求,向数据库中创建一个新的记录。

接下来,我们将学习调用Web API的Put方法来修改一条记录。


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