مشخصات مقاله

تعداد دانلود:
1496
امتیاز :
0.0
تعداد بازدید:
3425
تعداد نظرات:
0
لایک ها :
0

آموزش MVC Core-شروع کار با ASP.NET Core و jQuery CRUD با استفاده از WEB API

معرفی

در این بخش ما یاد خواهیم گرفت:

چگونه با استفاده از EmployeeRepository نحوه استفاده از پایگاه داده کارمند در حافظه (Employee in-memory database) فرا بگیریم.
چگونگی ایجاد API controller سفارشی در ASP.NET Core با عملیات CRUD.
گرفتن لیست Objects
یک آیتم insert جدید ایجاد کنید
یک Itemرا به روز کنید(Update)
یک Item را پاک کنید(Delete)
Write HttpPost Create API method.
Write HttpPut Update API method.
Write HttpPost Delete API method.
Route table
تنظیم کردن شروع(Start) controller Route به Home Index method.
مقدار jQuery / HTML ردیف جدول به JavaScript function
jQuery Ajax HttpGet
jQuery Ajax HttpPut
jQuery Ajax HttpPost
Editable HTML table
Responsive Web Design

یک تمرین آزمایشی برای نشان دادن آنچه که از این موارد آموزشی یاد گرفته اید، برای ایجاد عملیات Todo CRUD با استفاده از TodoRepository که در این موارد آموزش دیده اید، ایجاد کنید.

پیش نیاز

برای اینکه بتوانید مثال را از طریق دانلود یا از ابتدا بسازید، باید ابزارهای زیر را داشته باشید:

Visual Studio 2017 or above
.NET Core 2.0 or above
jQuery

یک solution جدید ایجاد کنید و نام آن را WebApiAspNetCoreJQuerySolution کنید.

یک پروژه ASP.NET Core Web Application جدید اضافه کنید و نام آن را به عنوان EmployeeJquery.Ui باشد.

در صفحه بعدی الگوی پروژه را Web API انتخاب کنید:

برنامه را کامپایل و اجرا کنید و صفحه اصلی را ببینید.

ما می خواهیم یک single page application با عملیات CRUD که قابلیت (Add ، Update ، Remove) با پایگاه داده EmployeeRepository در حافظه دارد ایجاد کنیم:

ما باید وظایف زیر را انجام بدهیم:

مجموعه EmployeeRepository را انتخاب کنید
ایجاد EmployeeController
اضافه کردن Home Index page-ایجاد Client با استفاده از jQuery Ajax
به روز رسانی API routing برای رفتن به صفحه اصلی
ایجاد جدول قابل ارتقاء HTML و jQuery AJAX برای فرخوانی Http

تنظیم TodoRepository

از SmartIT.Employee.MockDB استفاده کنید که دارای TodoRepository در آن با پایگاه داده MOCK در حافظه است.
شما می توانید به وب سایت زیر مراجعه کنید و با نمونه های آن آشنا شوید:

https://www.nuget.org/packages/SmartIT.Employee.MockDB/

از NuGet Package Manager برای نصب SmartIT.Employee.MockDB از nugget.org استفاده کنید.

ایجاد EmployeeController

در دایرکتوری Controllers، Web API controller Class جدید انتخاب و اضافه کنید.

EmployeeController ایجاد خواهد شد.

namespace EmployeeJquery.Ui.Controllers  
{  
    [Route("api/[controller]")]  
    public class EmployeeController : Controller  
    {  
        // GET: api/values  
        [HttpGet]  
        public IEnumerable Get()  
        {  
            return new string[] { "value1", "value2" };  
        }  
  
        // GET api/values/5  
        [HttpGet("{id}")]  
        public string Get(int id)  
        {  
            return "value";  
        }  
  
        // POST api/values  
        [HttpPost]  
        public void Post([FromBody]string value)  
        {  
        }  
  
        // PUT api/values/5  
        [HttpPut("{id}")]  
        public void Put(int id, [FromBody]string value)  
        {  
        }  
  
        // DELETE api/values/5  
        [HttpDelete("{id}")]  
        public void Delete(int id)  
        {  
        }  
    }  
}

کد EmployeeController را با کد زیر تعویض کنید که دارای تمام API ها برای عملیات CRUD است.

using System.Collections.Generic;  
using Microsoft.AspNetCore.Mvc;  
using SmartIT.Employee.MockDB;  
  
namespace EmployeeJquery.Ui.Controllers  
{  
  [Produces("application/json")]  
  [Route("api/Employee")]  
  public class EmployeeController : Controller  
  {  
  
    private EmployeeRepository db = new EmployeeRepository();  
  
    [Route("~/api/GetEmployees")]  
    [HttpGet]  
    public ICollection< Employee> GetEmployees()  
    {  
      return db.GetAll();  
    }  
  
    [HttpGet("{id}")]  
    public Employee Get(int id)  
    {  
      return db.FindbyId(id);  
    }  
  
    [Route("~/api/AddEmployee")]  
    [HttpPost]  
    public IActionResult AddEmployee([FromBody]Employee obj)  
    {  
      db.Add(obj);  
      return new ObjectResult("Employee added successfully!");  
    }  
  
    [Route("~/api/UpdateEmployee")]  
    [HttpPut]  
    public IActionResult UpdateEmployee([FromBody]Employee obj)  
    {  
      db.Update(obj);  
      return new ObjectResult( "Employee modified successfully!");  
    }  
  
    [Route("~/api/DeleteEmployee/{id}")]  
    [HttpDelete]  
    public IActionResult Delete(int id)  
    {  
      db.Delete(db.FindbyId(id));  
      return new ObjectResult("Employee deleted successfully!");  
    }  
  }  
}

برنامه را کامپایل و اجرا کنید.
GetEmployees با فراخوانی به API تست کنید:

http://localhost:60769/api/GetEmployees

توجه :

port number شما ممکن است متفاوت از ما باشد، از local port number خود استفاده کنید.

ایجاد یک Client با استفاده از jQuery Ajax

یک MVC Controller Class به دایرکتوری Controller اضافه کنید:

یک HomeController مانند زیر ایجاد می شود:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using Microsoft.AspNetCore.Mvc;  
  
// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860  
  
namespace EmployeeJquery.Ui.Controllers  
	{  
	    public class HomeController : Controller  
	    {  
	        // GET: /< controller>/  
	        public IActionResult Index()  
	        {  
	            return View();  
	        }  
	    }  
	}

مانند شکل زیر فولدر و View را بسازید :

یک MVC View Page در دایرکتوری Home مانند عکس زیر ایجاد کنید:

یک Index.cshtml خالی مانند زیر ایجاد می شود.

@*  
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860  
*@  
@{  
}  
  
@*  
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860  
*@  
@{  
}  
SmartIT by John Kocer

به روز رسانی مسیر API برای رفتن به صفحه اصلی

یک مسیر را در فایل Startup.cs برای HomeController مانند زیر پیکر بندی کنید:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)  
    {  
      if (env.IsDevelopment())  
      {  
        app.UseDeveloperExceptionPage();  
      }  
  
      app.UseMvc();  
      app.UseMvc(routes =>  
      {  
        routes.MapRoute(  
                  name: "default",  
                  template: "{controller=Home}/{action=Index}/{id?}");  
  
        routes.MapSpaFallbackRoute(  
                  name: "spa-fallback",  
                  defaults: new { controller = "Home", action = "Index" });  
      });  
    }

به فایل launchsettings.json زیر دایرکتوری Properties مانند صفحه زیر بروید.

"launchUrl": "api/values" به مقدار "launchUrl": "home" به روز کنید:

profiles": {  
    "IIS Express": {  
      "commandName": "IISExpress",  
      "launchBrowser": true,  
      "launchUrl": "api/values",  
      "environmentVariables": {  
        "ASPNETCORE_ENVIRONMENT": "Development"  
      }

در اینجا فایل launchsettings.json به روز شده است:

{  
  "iisSettings": {  
    "windowsAuthentication": false,  
    "anonymousAuthentication": true,  
    "iisExpress": {  
      "applicationUrl": "http://localhost:60769/",  
      "sslPort": 0  
    }  
  },  
	  "profiles": {  
	    "IIS Express": {  
	      "commandName": "IISExpress",  
	      "launchBrowser": true,  
	      "launchUrl": "api/values",  
	      "environmentVariables": {  
	        "ASPNETCORE_ENVIRONMENT": "Development"  
	      }  
	    },  
	    "EmployeeJquery.Ui": {  
	      "commandName": "Project",  
	      "launchBrowser": true,  
	      "launchUrl": "api/values",  
	      "environmentVariables": {  
	        "ASPNETCORE_ENVIRONMENT": "Development"  
	      },  
	      "applicationUrl": "http://localhost:60770/"  
	    }  
	  }  
	}

برنامه را کامپایل و اجرا کنید:

ایجاد جدول قابل ارتقاء HTML و jQuery AJAX برای فرخوانی Http

فایل Index.cshtml با محتوای زیر به روز رسانی کنید.در اینجا نتیجه نهایی، نتیجه responsive web design است.

< html >  
< head >  
  < title >SmartIT Employee Manager< /title >  
  
  < script src="https://code.jquery.com/jquery-3.2.1.min.js"
          6. integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          7. crossorigin="anonymous" >< /script >  
  
  < script >


    $(document).ready(function () {
      getEmployeeList();
    });

    var Employee = {
      id: 0,
      name: "",
      gender: "",
      salary: ""
    }

    // Get all Employees to display
    function getEmployeeList() {
      // Call Web API to get a list of Employees
      $.ajax({
        url: '/api/GetEmployees/',
        type: 'GET',
        dataType: 'json',
        success: function (employees) {
          employeeListSuccess(employees);
        },
        error: function (request, message, error) {
          handleException(request, message, error);
        }
      });
    }

    // Display all Employees returned from Web API call
    function employeeListSuccess(employees) {
      // Iterate over the collection of data
      $("#employeeTable tbody").remove();
      $.each(employees, function (index, employee) {
        // Add a row to the employee table
        employeeAddRow(employee);
      });
    }

    // Add employee row to < table >
    function employeeAddRow(employee) {
      // First check if a < tbody > tag exists, add one if not
      if ($("#employeeTable tbody").length == 0) {
        $("#employeeTable").append("< tbody >< /tbody >");
      }

      // Append row to < table >
      $("#employeeTable tbody").append(
        employeeBuildTableRow(employee));
    }

    // Build a < tr > for a row of table data
    function employeeBuildTableRow(employee) {
      var newRow = "< tr >" +
        "< td >" + employee.id + "< /td >" +
        "< td >< input   class='input-name' type='text' value='" + employee.name + "'/ >< /td >" +
        "< td >< input  class='input-gender'  type='text' value='" + employee.gender + "'/ >< /td >" +
        "< td >< input  class='input-salary' type='text' value='" + employee.salary + "'/ >< /td >" +
        "< td >" +
        "< button type='button' " +
        "onclick='employeeUpdate(this);' " +
        "class='btn btn-default' " +
        "data-id='" + employee.id + "' " +
        "data-name='" + employee.name + "' " +
        "data-gender='" + employee.gender + "' " +
        "data-salary='" + employee.salary + "' " +
        " >" +
        "< span class='glyphicon glyphicon-edit' / > Update" +
        "< /button > " +
        " < button type='button' " +
        "onclick='employeeDelete(this);'" +
        "class='btn btn-default' " +
        "data-id='" + employee.id + "' >" +
        "< span class='glyphicon glyphicon-remove' / >Delete" +
        "< /button >" +
        "< /td >" +
        "< /tr >";

      return newRow;
    }

    function onAddEmployee(item) {
      var options = {};
      options.url = "/api/AddEmployee";
      options.type = "POST";
      var obj = Employee;
      obj.name = $("#name").val();
      obj.gender = $("#gender").val();
      obj.salary = $("#salary").val();
      console.dir(obj);
      options.data = JSON.stringify(obj);
	      options.contentType = "application/json";
	      options.dataType = "html";

	      options.success = function (msg) {
	        getEmployeeList();
	        $("#msg").html(msg);
	      },
	        options.error = function () {
	          $("#msg").html("Error while calling the Web API!");
	        };
	      $.ajax(options);
	    }

	    function employeeUpdate(item) {
	      var id = $(item).data("id");
	      var options = {};
	      options.url = "/api/UpdateEmployee/"
	      options.type = "PUT";

	      var obj = Employee;
	      obj.id = $(item).data("id");
	      obj.name = $(".input-name", $(item).parent().parent()).val();
	      obj.gender = $(".input-gender", $(item).parent().parent()).val();
	      obj.salary = $(".input-salary", $(item).parent().parent()).val();
	      console.dir(obj);
	      options.data = JSON.stringify(obj);
	      options.contentType = "application/json";
	      options.dataType = "html";
	      options.success = function (msg) {
	        $("#msg").html(msg);
	      };
	      options.error = function () {
	        $("#msg").html("Error while calling the Web API!");
	      };
	      $.ajax(options);
	    }

	    function employeeDelete(item) {
	      var id = $(item).data("id");
	      var options = {};
	      options.url = "/api/DeleteEmployee/"
	        + id;
	      options.type = "DELETE";
	      options.dataType = "html";
	      options.success = function (msg) {
	        console.log('msg= ' + msg);
	        $("#msg").html(msg);
	        getEmployeeList();
	      };
	      options.error = function () {
	        $("#msg").html("Error while calling the Web API!");
	      };
	      $.ajax(options);
	    }

	    // Handle exceptions from AJAX calls
	    function handleException(request, message, error) {
	      var msg = "";
	      msg += "Code: " + request.status + "\n";
	      msg += "Text: " + request.statusText + "\n";
	      if (request.responseJSON != null) {
	        msg += "Message" + request.responseJSON.Message + "\n";
	      }

	      alert(msg);
	    }
	  < /script >  
	< /head >  
	< body >  
	  < h3 >Employee Manager< /h3 >  
	  < form >  
	    < table id="employeeTable" style="border: 1px solid #999" cellpadding="1" >  
	      < thead >  
	        < tr >  
	          < td >Id < /td >  
	          < td > Name < /td >  
	          < td > Gender < /td >  
	          < td > Salary < /td >  
	          < td > < /td >  
	        < /tr >  
	        < tr >  
	          < td >< /td >  
	          < td >< input id="name" type="text" / >< /td >  
	          < td >< input id="gender" type="text" / >< /td >  
	          < td >< input id="salary" type="text" / >< /td >  
	          < td >< input type="button" id="insert" value="Insert" onclick='onAddEmployee(this)' / >< /td >  
	      < /thead >  
	    < /table >  
	    < br / >

	    < div id="msg" >< /div >  
	  < /form >  
	  Copyright 2017 (c) SmartIT. All rights reserved. By John Kocer  
	< /body >  
	< /html >

خلاصه

در این مقاله یاد گرفتیم که:

چگونه با استفاده از EmployeeRepository نحوه استفاده از پایگاه داده کارمند در حافظه (Employee in-memory database) فرا بگیریم.
چگونگی ایجاد API controller سفارشی در ASP.NET Core با عملیات CRUD.
گرفتن لیست Objects
یک آیتم insert جدید ایجاد کنید
یک Itemرا به روز کنید(Update)
یک Item را پاک کنید(Delete)
Write HttpPost Create API method.
Write HttpPut Update API method.
Write HttpPost Delete API method.
Route table
تنظیم کردن شروع(Start) controller Route به Home Index method.
مقدار jQuery / HTML ردیف جدول به JavaScript function
jQuery Ajax HttpGet
jQuery Ajax HttpPut
jQuery Ajax HttpPost
Editable HTML table
Responsive Web Design

تمرین آزمایشی

یک تمرین آزمایشی برای نشان دادن آنچه که از این موارد آموزشی یاد گرفته اید، برای ایجاد عملیات CRUD Responsive Design SPA application . TodoRepository شامل این موارد آموزشی است.
شما می توانید با استفاده از موارد بالا برنامه To-do CRUD ASP.NET MVC jQuery application خودتون رو ایجاد کنید.

TodoRepository _todoRepository = new TodoRepository();    
var todoList = _todoRepository.GetAll();    
todoList.CDump("_todoRepository.GetAll()");    
var findById = _todoRepository.FindById(2);    
findById.CDump("_todoRepository.FindById(2)");    
var newTodo = _todoRepository.Add(new Todo { Name = "Call a friend" });    
_todoRepository.GetAll().CDump("Check if Call a friend todo added?");    
newTodo.Name = newTodo.Name + " Updated";    
_todoRepository.Update(newTodo);    
_todoRepository.GetAll().CDump("Check if Call a friend todo updated with Updated?");    
_todoRepository.Delete(_todoRepository.FindById(1));    
_todoRepository.GetAll().CDump("Check if Id=1 todo is Deleted?");

شما می توانید source code این مقاله را از لینک زیر دانلود کنید:

https://github.com/SmartITAz/WebApiAspNetCoreJQuerySolution

شما دانشجویان گرامی می توانید فایل مربوط به این آموزش را از قسمت پایانی این مقاله دانلود نمایید .

آموزش MVC Core-نحوه استفاده از صفحات Razor در ASP.NET Core 2.0

1397/03/05 3425 1496

دانلود PDF

دانلود سورس کد

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما