var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First(); jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
var angularExample = angular.module('angularexample', ["restangular"])
angularExample.config(["RestangularProvider", function (RestangularProvider) {
//RestangularProvider.setRestangularFields({
// id: "id"
//});
RestangularProvider.setBaseUrl('/api');
}]);
angularExample.controller("MainCtrl", ["Restangular", "$scope", function (Restangular, $scope) {
var resource = Restangular.all('books');
resource.getList().then(function (response) {
$scope.books = response;
});
$scope.add = function () {
resource.post($scope.newBook).then(function (newResource) {
$scope.books.push(newResource);
})
}
}]); <!DOCTYPE html>
<html ng-app="angularexample" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rest Angular Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>
<script src="/Scripts/restangular.min.js"></script>
<script src="/app/app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div ng-repeat="item in books">
name is: {{item.name}}<br />
change name: <input type="text" ng-model="item.name" /><button type="submit" ng-click="item.put();">update</button>
</div>
<div>
add new: <br />
<input type="text" ng-model="newBook.name" /><button type="submit" ng-click="add()">add</button>
</div>
</div>
</body> var resource = Restangular.all('books');
resource.getList().then(function (response) {
$scope.books = response;
}); $scope.add = function () {
resource.post($scope.newBook).then(function (newResource) {
$scope.books.push(newResource);
})
} <div ng-repeat="item in books">
name is: {{item.name}}<br />
change name: <input type="text" ng-model="item.name" /><button type="submit" ng-click="item.put();">update</button>
</div> ممکن است بخواهیم در پاسخ یک تقاضای Ajax ایی، اگر عملیات در سمت سرور با موفقیت انجام شد، خروجی یک Controller action را به کاربر نهایی نشان دهیم. در
چنین سناریویی لازم است که بتوانیم خروجی یک action را
بصورت رشته برگردانیم. در این مقاله به این مسئله خواهیم پرداخت .
فرض کنید در یک سیستم وبلاگ ساده قصد داریم امکان کامنت گذاشتن بصورت Ajax را پیاده سازی کنیم. یک ایده عملی و کارآ
این است: بعد از اینکه کاربر متن کامنت را وارد کرد و دکمه‌ی ارسال کامنت را زد،
تقاضا به سمت سرور ارسال شود و اگر سرور پیغام موفقیت را صادر کرد، متن نوشته شده
توسط کاربر را به کمک کدهای JavaScript و در همان سمت کلاینت بصورت یک
کادر کامنت جدید به محتوای صفحه اضافه کنیم. بنده در اینجا برای اینکه بتوانم اصل
موضوع مورد بحث را توضیح دهم، از یک سناریوی جایگزین استفاده می‌کنم؛ کاربر موقعیکه دکمه ارسال را زد، تقاضا به سرور ارسال میشود. سرور بعد از انجام عملیات، تحت یک
شی JSON هم نتیجه‌ی انجام عملیات و هم
محتوای HTML نمایش کامنت جدید در صفحه را به سمت کلاینت
ارسال خواهد کرد و کلاینت در صورت موفقیت آمیز بودن عملیات، آن محتوا را به صفحه
اضافه می‌کند.
با توجه به توضیحات داده شده، ابتدا یک شیء نیاز داریم تا بتوانیم توسط آن نتیجه‌ی عملیات Ajax ایی را بصورت JSON به سمت کلاینت ارسال کنیم:
public class MyJsonResult
{
public bool success { set; get; }
public bool HasWarning { set; get; }
public string WarningMessage { set; get; }
public int errorcode { set; get; }
public string message {set; get; }
public object data { set; get; }
} سپس به متدی نیاز داریم که کار تبدیل نتیجه‌ی action را به رشته، انجام دهد:
public static string RenderViewToString(ControllerContext context,
string viewPath,
object model = null,
bool partial = false)
{
ViewEngineResult viewEngineResult = null;
if (partial) viewEngineResult = ViewEngines.Engines.FindPartialView(context, viewPath);
else viewEngineResult = ViewEngines.Engines.FindView(context, viewPath, null);
if (viewEngineResult == null) throw new FileNotFoundException("View cannot be found.");
var view = viewEngineResult.View;
context.Controller.ViewData.Model = model;
string result = null;
using(var sw = new StringWriter()) {
var ctx = new ViewContext(context, view, context.Controller.ViewData, context.Controller.TempData, sw);
view.Render(ctx, sw);
result = sw.ToString();
}
return result;
} public JsonResult AddComment(CommentViewModel model) {
MyJsonResult result = new MyJsonResult() {
success = false;
};
if (!ModelState.IsValid) {
result.success = false;
result.message = "لطفاً اطلاعات فرم را کامل وارد کنید";
return Json(result);
}
try {
Comment theComment = model.toCommentModel();
//EF service factory
Factory.CommentService.Create(theComment);
Factory.SaveChanges();
result.data = Tools.RenderViewToString(this.ControllerContext, "/views/posts/_AComment", model, true);
result.success = true;
} catch (Exception ex) {
result.success = false;
result.message = "اشکال زمان اجرا";
}
return Json(result);
} و در سمت کلاینت برای ارسال Form به صورت Ajax ایی خواهیم داشت:
@using (Ajax.BeginForm("AddComment", "posts",
new AjaxOptions()
{
HttpMethod = "Post",
OnSuccess = "AddCommentSuccess",
LoadingElementId = "AddCommentLoading"
}, new { id = "frmAddComment", @class = "form-horizontal" }))
{
@Html.HiddenFor(m => m.PostId)
<label for="fname">@Texts.ContactName</label>
<input type="text" id="fname" name="FullName" class="form-control" placeholder="@Texts.ContactName ">
<label for="email">@Texts.Email</label>
<input type="email" id="InputEmail" name="email" class="form-control" placeholder="@Texts.Email">
<br><textarea name="C_Content" cols="60" rows="10" class="form-control"></textarea><br>
<input type="submit" value="@Texts.SubmitComments" name="" class="btn btn-primary">
<div class="loading-mask" style="display:none">@Texts.LoadingMessage</div>
} و در قسمت script ها داریم:
<script type="text/javascript">
function AddCommentSuccess(jsData) {
if (jsData && jsData.message)
alert(jsData.message);
if (jsData && jsData.success) {
document.getElementById("frmAddComment").reset();
//افزودن کامنت جدید ساخته شده توسط کاربر به لیست کامنتهای صفحه
$("#divAllComments").html(jsData.data + $("#divAllComments").html());
}
}
</script>
namespace jQueryMvcSample02.Models
{
public class BlogPost
{
public int Id { set; get; }
public string Title { set; get; }
public string Body { set; get; }
}
}using System.Collections.Generic;
using System.Linq;
using jQueryMvcSample02.Models;
namespace jQueryMvcSample02.DataSource
{
public static class BlogPostDataSource
{
private static IList<BlogPost> _cachedItems;
/// <summary>
/// با توجه به استاتیک بودن سازنده کلاس، تهیه کش، پیش از سایر فراخوانی‌ها صورت خواهد گرفت
/// باید دقت داشت که این فقط یک مثال است و چنین کشی به معنای
/// تهیه یک لیست برای تمام کاربران سایت است
/// </summary>
static BlogPostDataSource()
{
_cachedItems = createBlogPostsInMemoryDataSource();
}
/// <summary>
/// هدف صرفا تهیه یک منبع داده آزمایشی ساده تشکیل شده در حافظه است
/// </summary>
private static IList<BlogPost> createBlogPostsInMemoryDataSource()
{
var results = new List<BlogPost>();
for (int i = 1; i < 30; i++)
{
results.Add(new BlogPost { Id = i, Title = "عنوان " + i, Body = "متن ... متن ... متن " + i });
}
return results;
}
/// <summary>
/// پارامترهای شماره صفحه و تعداد رکورد به ازای یک صفحه برای صفحه بندی نیاز هستند
/// شماره صفحه از یک شروع میشود
/// </summary>
public static IList<BlogPost> GetLatestBlogPosts(int pageNumber, int recordsPerPage = 4)
{
var skipRecords = pageNumber * recordsPerPage;
return _cachedItems
.OrderByDescending(x => x.Id)
.Skip(skipRecords)
.Take(recordsPerPage)
.ToList();
}
}
}using System.Linq;
using System.Web.Mvc;
using System.Web.UI;
using jQueryMvcSample02.DataSource;
using jQueryMvcSample02.Security;
namespace jQueryMvcSample02.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
//آغاز کار با صفحه صفر است
var list = BlogPostDataSource.GetLatestBlogPosts(pageNumber: 0);
return View(list); //نمایش ابتدایی صفحه
}
[HttpPost]
[AjaxOnly]
[OutputCache(Location = OutputCacheLocation.None, NoStore = true)]
public virtual ActionResult PagedIndex(int? page)
{
var pageNumber = page ?? 0;
var list = BlogPostDataSource.GetLatestBlogPosts(pageNumber);
if (list == null || !list.Any())
return Content("no-more-info"); //این شرط ما است برای نمایش عدم یافتن رکوردها
return PartialView("_ItemsList", list);
}
[HttpGet]
public ActionResult Post(int? id)
{
if (id == null)
return Redirect("/");
//todo: show the content here
return Content("Post " + id.Value);
}
}
}@model IList<jQueryMvcSample02.Models.BlogPost>
<ul>
@foreach (var item in Model)
{
<li>
<h5>
@Html.ActionLink(linkText: item.Title,
actionName: "Post",
controllerName: "Home",
routeValues: new { id = item.Id },
htmlAttributes: null)
</h5>
@item.Body
</li>
}
</ul>@model IList<jQueryMvcSample02.Models.BlogPost>
@{
ViewBag.Title = "Index";
var loadInfoUrl = Url.Action(actionName: "PagedIndex", controllerName: "Home");
}
<h2>
اسکرول نامحدود</h2>
@{ Html.RenderPartial("_ItemsList", Model); }
<div id="MoreInfoDiv">
</div>
<div align="center" style="margin-bottom: 9px;">
<span id="moreInfoButton" style="width: 90%;" class="btn btn-info">بیشتر</span>
</div>
<div id="ProgressDiv" align="center" style="display: none">
<br />
<img src="@Url.Content("~/Content/images/loadingAnimation.gif")" alt="loading..." />
</div>
@section JavaScript
{
<script type="text/javascript">
$(document).ready(function () {
$("#moreInfoButton").InfiniteScroll({
moreInfoDiv: '#MoreInfoDiv',
progressDiv: '#ProgressDiv',
loadInfoUrl: '@loadInfoUrl',
loginUrl: '/login',
errorHandler: function () {
alert('خطایی رخ داده است');
},
completeHandler: function () {
// اگر قرار است روی اطلاعات نمایش داده شده پردازش ثانوی صورت گیرد
},
noMoreInfoHandler: function () {
alert('اطلاعات بیشتری یافت نشد');
}
});
});
</script>
}// <![CDATA[
(function ($) {
$.fn.InfiniteScroll = function (options) {
var defaults = {
moreInfoDiv: '#MoreInfoDiv',
progressDiv: '#Progress',
loadInfoUrl: '/',
loginUrl: '/login',
errorHandler: null,
completeHandler: null,
noMoreInfoHandler: null
};
var options = $.extend(defaults, options);
var showProgress = function () {
$(options.progressDiv).css("display", "block");
}
var hideProgress = function () {
$(options.progressDiv).css("display", "none");
}
return this.each(function () {
var moreInfoButton = $(this);
var page = 1;
$(moreInfoButton).click(function (event) {
showProgress();
$.ajax({
type: "POST",
url: options.loadInfoUrl,
data: JSON.stringify({ page: page }),
contentType: "application/json; charset=utf-8",
dataType: "json",
complete: function (xhr, status) {
var data = xhr.responseText;
if (xhr.status == 403) {
window.location = options.loginUrl;
}
else if (status === 'error' || !data) {
if (options.errorHandler)
options.errorHandler(this);
}
else {
if (data == "no-more-info") {
if (options.noMoreInfoHandler)
options.noMoreInfoHandler(this);
}
else {
var $boxes = $(data);
$(options.moreInfoDiv).append($boxes);
}
page++;
}
hideProgress();
if (options.completeHandler)
options.completeHandler(this);
}
});
});
});
};
})(jQuery);
// ]]><!--<script src="Scripts/Libs/localstorage_adapter.js" type="text/javascript"></script>-->
<!--<script src="Scripts/App/store.js" type="text/javascript"></script>-->
Blogger.PostsRoute = Ember.Route.extend({
model: function () {
return this.store.find('post');
}
}); DS.RESTAdapter.reopen({
namespace: 'api'
}); <script src="Scripts/Adapters/web_api_adapter.js" type="text/javascript"></script>
namespace EmberJS03.Models
{
public class Post
{
public int Id { set; get; }
public string Title { set; get; }
public string Body { set; get; }
}
} using System;
using System.Web.Http;
using System.Web.Routing;
using Newtonsoft.Json.Serialization;
namespace EmberJS03
{
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
var settings = GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings;
settings.ContractResolver = new CamelCasePropertyNamesContractResolver();
}
}
} namespace EmberJS03.Controllers
{
public class PostsController : ApiController
{
public IEnumerable<Post> Get()
{
return DataSource.PostsList;
}
}
} WARNING: Encountered "0" in payload, but no model was found for model name "0" (resolved model name using DS.RESTSerializer.typeForRoot("0")) [
{
Id: 1,
Title: 'First Post'
}, {
Id: 2,
Title: 'Second Post'
}
] {
posts: [{
id: 1,
title: 'First Post'
}, {
id: 2,
title: 'Second Post'
}]
} using System.Web.Http;
using EmberJS03.Models;
namespace EmberJS03.Controllers
{
public class PostsController : ApiController
{
public object Get()
{
return new { posts = DataSource.PostsList };
}
}
} public HttpResponseMessage Post(Comment comment)
{"comment":{"text":"data...","post":"3"}}
namespace EmberJS03.Controllers
{
public class CommentsController : ApiController
{
public HttpResponseMessage Post(HttpRequestMessage requestMessage)
{
var jsonContent = requestMessage.Content.ReadAsStringAsync().Result;
// {"comment":{"text":"data...","post":"3"}}
var jObj = JObject.Parse(jsonContent);
var comment = jObj.SelectToken("comment", false).ToObject<Comment>();
var id = 1;
var lastItem = DataSource.CommentsList.LastOrDefault();
if (lastItem != null)
{
id = lastItem.Id + 1;
}
comment.Id = id;
DataSource.CommentsList.Add(comment);
// ارسال آی دی با فرمت خاص مهم است
return Request.CreateResponse(HttpStatusCode.Created, new { comment = comment });
}
}
} Blogger.Post = DS.Model.extend({
title: DS.attr(),
body: DS.attr(),
comments: DS.hasMany('comment', { async: true } /* lazy loading */)
}); namespace EmberJS03.Models
{
public class Post
{
public int Id { set; get; }
public string Title { set; get; }
public string Body { set; get; }
// lazy loading via an array of IDs
public int[] Comments { set; get; }
}
} namespace EmberJS03.Models
{
public class Post
{
public int Id { set; get; }
public string Title { set; get; }
public string Body { set; get; }
// load related models via URLs instead of an array of IDs
// ref. https://github.com/emberjs/data/pull/1371
public object Links { set; get; }
public Post()
{
Links = new { comments = "comments" }; // api/posts/id/comments
}
}
} namespace EmberJS03
{
public class Global : System.Web.HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}/{name}",
defaults: new { id = RouteParameter.Optional, name = RouteParameter.Optional }
);
var settings = GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings;
settings.ContractResolver = new CamelCasePropertyNamesContractResolver();
}
}
} namespace EmberJS03.Controllers
{
public class PostsController : ApiController
{
//GET api/posts/id
public object Get(int id)
{
return
new
{
posts = DataSource.PostsList.FirstOrDefault(post => post.Id == id),
comments = DataSource.CommentsList.Where(comment => comment.Post == id).ToList()
};
}
}
} namespace EmberJS03.Controllers
{
public class PostsController : ApiController
{
public HttpResponseMessage Delete(int id)
{
var item = DataSource.PostsList.FirstOrDefault(x => x.Id == id);
if (item == null)
return Request.CreateResponse(HttpStatusCode.NotFound);
DataSource.PostsList.Remove(item);
//حذف کامنتهای مرتبط
var relatedComments = DataSource.CommentsList.Where(comment => comment.Post == id).ToList();
relatedComments.ForEach(comment => DataSource.CommentsList.Remove(comment));
return Request.CreateResponse(HttpStatusCode.OK, new { post = item });
}
}
} Attempted to handle event `pushedData` on while in state root.deleted.inFlight.
Blogger.PostController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function () {
this.set('isEditing', true);
},
save: function () {
var post = this.get('model');
post.save();
this.set('isEditing', false);
},
delete: function () {
if (confirm('Do you want to delete this post?')) {
var thisController = this;
var post = this.get('model');
post.destroyRecord().then(function () {
thisController.transitionToRoute('posts');
});
}
}
}
});
همچنین یک Interface را نیز به نام IResourceManager تعریف میکنیم:
public interface IResourceManager
{
IStringLocalizer Localizer { get; }
} سپس دو کلاس دیگر را ایجاد کرده و آنها را از این اینترفیس مشتق میکنیم. در این اینترفیس، یک خصوصیت Localizer از نوع IStringLocalizer وجود دارد که باید در این کلاس‌ها پیاده سازی شود. این کار را به کمک IStringLocalizerFactory انجام داده و مشخص میکنیم هر کلاس، از کدام ریسورس استفاده کند:
public class SchoolResourceManager : IResourceManager
{
public SchoolResourceManager (IStringLocalizerFactory factory)
{
Localizer = factory.Create(typeof(SchoolResource));
}
public IStringLocalizer Localizer { get; }
} public class ArtSchoolResourceManager : IResourceManager
{
public ArtSchoolResourceManager(IStringLocalizerFactory factory)
{
Localizer = factory.Create(typeof(ArtSchoolResource));
}
public IStringLocalizer Localizer { get; }
}
سپس در فایل appsetting.json پروژه، یک کلید را تعریف میکنیم تا مشخص کند، نوع application، از نوع مدرسه هست یا از نوع هنرستان:
{
"ConnectionStrings": {
"str": "..."
},
"Type": "ArtSchool"
} در متد ConfigureServices در فایل startup تعیین میکنیم هنگام شروع به کار برنامه، با توجه به مقدار درون appsetting، کدام سرویس (manager) تزریق شود:
public void ConfigureServices(IServiceCollection services)
{
services.AddLocalization();
services.AddSingleton<SchoolResourceManager>();
services.AddSingleton<ArtSchoolResourceManager>();
services.AddSingleton<IResourceManager>(cnf =>
{
var type = Configuration.GetSection("Type").Value;
if (type == "ArtSchool")
return cnf.GetServices<ArtSchoolResourceManager>().FirstOrDefault();
return cnf.GetServices<SchoolResourceManager>().FirstOrDefault();
});
} خوب حالا با خیال راحت برنامه را توسعه می‌دهیم و در viewها و Controllerها از همان کلیدهای School و Student استفاده میکنیم:
: View
@inject IResourceManager ResourceManager <h2>@ResourceManager.Localizer["Student"] : </h2>
:Controller
public class TestController : Controller
{
private readonly IResourceManager _resourceManager;
public TestController (IResourceManager resourceManager)
{
_resourceManager = resourceManager;
}
} 
<img src='@Url.Action("DownloadFile", "ImageHandler", new {Area = "", id = item.BaseFileGuids, imgSize = ImageHandlerController.ImgSize.M})' alt=""/> 
public IActionResult DownloadFile([FromRoute]string id, [FromQuery] ImgSize imgSize)
{
var result = _baseFileService.GetFileNameAndFileNameOnDsAndFileType(id);
if (result == null) return View("Error");
var fileName = result.Item1;
string userAgent = Request.Headers["User-Agent"];
if (IsInternetExplorer(userAgent))
{
var htencode = HtmlEncoder.Create();
var attachment = string.Format("attachment; filename=\"{0}\"", htencode.Encode(fileName));
_httpContext.HttpContext.Response.Headers.Add("Content-Disposition", attachment);
}
var rootPath = Path.Combine(_hostingEnvironment.WebRootPath, _settingsAppPathConfig.Value.ServerImagesRootPath);
var filepath = Path.Combine(rootPath, imgSize.ToString().ToLower(), result.Item2);
if (!System.IO.File.Exists(filepath))
{
const string notFoundImage = "notFound.jpg";
var notFoundpath = Path.Combine(rootPath , notFoundImage);
string contentType;
new FileExtensionContentTypeProvider().TryGetContentType(notFoundImage, out contentType);
return File(notFoundpath, contentType, notFoundImage);
}
string contentTypebase;
new FileExtensionContentTypeProvider().TryGetContentType(result.Item3, out contentTypebase);
return File(filepath, contentTypebase, fileName);
}