2015-09-07 90 views
1

嗨,我的文章模型有CategoryModel和TagModel列表。在Java腳本中,我可以發送文章標題,類別,CoverImageUrl和藝術內容。但如何發送標籤與我的功能?在這裏我的源代碼,如:如何發送數據到控制器像模型列表模型AngularJs

NewArticle查看:

@model projectCoderWho.Model.Model.ArticleModel 
 

 
@{ 
 
    ViewBag.Title = "NewArticle"; 
 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
 
} 
 

 

 

 
<h4>Yeni Makale Yaz</h4> 
 

 
<span class="alert-success">Makale Başlığı</span> 
 
<br /> 
 
<input type="text" id="Header" name="Header" class="form-control" placeholder="Makale Bağlığınız..." required /> 
 
<br /> 
 
<br /> 
 
<span class="alert-success">Cover Img Url</span> 
 
<br /> 
 
<input type="text" id="CoverImageUrl" name="CoverImageUrl" class="form-control" placeholder="Makaleniz için bir görsel..." required /> 
 
<br /> 
 
<br /> 
 
<span class="alert-success">Kategori</span> 
 
<br /> 
 
<select class="form-control" id="Category" name="Category"> 
 
    <option data-ng-repeat="cat in Categories" value="{{cat.Id}}">{{cat.CategoryName}}</option> 
 
</select> 
 
<br /> 
 
<br /> 
 
<span class="alert-success">İcerik</span> 
 
<br /> 
 
<textarea id="ArtContent" name="ArtContent" placeholder="İçeriği giriniz..." cols="150" rows="10" class="form-control" style="resize:vertical" required></textarea> 
 
<br /> 
 
<input type="text" id="Tag" name="Tag" class="form-control" placeholder="Makalenize uygun taglari yazınız...(Virgül ile ayırınız)" required /> 
 
<br /> 
 
<br /> 
 
<div class="widget categories" style="padding:0px"> 
 
    <ul> 
 
     <li><a class="form-control" data-ng-click="writeNewArticle()" style="text-align:center">Makale Oluştur</a></li> 
 
    </ul> 
 
</div>

blogController.js(writeArticle段):

$scope.writeNewArticle = function() { 
     $scope.NewArticle.Header = document.getElementById("Header").value; 
     $scope.NewArticle.ArtContent = CKEDITOR.instances.ArtContent.getData(); 
     $scope.NewArticle.CoverImageUrl = document.getElementById("CoverImageUrl").value; 
     $scope.NewArticle.Category.Id = document.getElementById("Category").value; 
     var tags = document.getElementById("Tag").value; 

     ArticleApi.writeArticle($scope.NewArticle) 
     .success(function() { 
      alert("bok oldu") 
     }) 
    }; 

articleApiService.js:

angular.module('BlogAppModule') 
.factory('ArticleApi', function CategoryApiFactory($http) { 
    return { 
     all: function() { 
      return $http({ method: "GET", url: "Buraya Article Api gelecek" }); 
     }, 
     writeArticle: function (NewArticle) { 
      return $http({ method: "POST", url: "/Article/NewArticle", data: NewArticle }) 
     } 
    } 
}); 

而且ArticleController.cs(NewArticle段):

[HttpPost] 
    public ActionResult NewArticle(ArticleModel NewArticle) 
    { 
     if (NewArticle != null) 
     { 
      //Do something like add to database... 
     } 

     return RedirectToAction("Index", "Home"); 
    } 

我ArticleModel像這樣:

public class ArticleModel 
{ 
    public virtual int Id { get; set; } 
    public virtual string Header { get; set; } 
    public virtual string ArtContent { get; set; } 
    public virtual DateTime PublishDate { get; set; } 
    public virtual UserModel Author { get; set; } 
    public virtual IList<CommentModel> Comments { get; set; } 
    public virtual CategoryModel Category { get; set; } 
    public virtual string CoverImageUrl { get; set; } 
    public virtual DateTime EditDate { get; set; } 
    public virtual UserModel EditedBy { get; set; } 
    public virtual IList<TagModel> Tags { get; set; } 
    public virtual int Views { get; set; } 
    public virtual bool IsActive { get; set; } 

    public ArticleModel() 
    { 
     Comments = new List<CommentModel>(); 
     Tags = new List<TagModel>(); 
    } 

} 

正如我告訴我能​​趕上別人,但我不能添加標籤到文章的模型。我該怎麼辦??

回答

1

試試這個

$scope.writeNewArticle = function() { 
    $scope.NewArticle.Header = document.getElementById("Header").value; 
    $scope.NewArticle.ArtContent = CKEDITOR.instances.ArtContent.getData(); 
    $scope.NewArticle.CoverImageUrl = document.getElementById("CoverImageUrl").value; 
    $scope.NewArticle.Category.Id = document.getElementById("Category").value; 
    var tags = (document.getElementById("Tag").value || "").split(","); 
    var tagModels = []; 
    for (var v in tags) { 
     //here Tag is corresponding property in your TagModel C# class 
     tagModels.push({ Tag: tags[v] }); 
    }   
    $scope.NewArticle.Tags = tagModels; 

    ArticleApi.writeArticle($scope.NewArticle) 
     .success(function() { 
     alert("bok oldu") 
     }) 
}; 

幾點意見:

首先我注意到,您正在使用的角度以不同尋常的方式。看起來你的視圖是在服務器端渲染的,所以所有的輸入/控件都是從服務器模型預先填充的,然後Angular開始起作用(可能不在這個視圖上,但我相信你有其他人)。我建議你仔細看看基於Angular的SPA例子,並使用Web API代替MVC。但是如果你更喜歡服務器端渲染視圖,我建議你填充JS模型而不是HTML輸入。在這種情況下,您將擁有適當的數據綁定。

渲染服務器型號如下

<script> 

angular.module("app").value("ArticleModel", @(Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model)))); 

</script> 

,然後用它在你的控制器

app.controller("ArticleController", ["$scope", "ArticleModel", function($scope, ArticleModel) { 
    $scope.NewArticle = angular.copy(ArticleModel); 
}]) 
+0

謝謝你的建議我的朋友。我是angularJs的新手,剛剛學習了一些我相信的東西。我也會尋找你的建議。在我使用你的代碼示例之後,我會寫結果。而我的項目如此混雜,我知道'因爲我不能使用API​​進行登錄操作,另一方面,我的項目不僅適用於博客。將有用戶的自由職業者和他們的通信信息。所以,事實上我的想法對於我認爲以AngularJs開始而言是複雜的。 – CoderWho

相關問題