如何發送數據到控制器像模型列表模型AngularJs

Question

嗨，我的文章模型有CategoryModel和TagModel列表。在Java腳本中，我可以發送文章標題，類別，CoverImageUrl和藝術內容。但如何發送標籤與我的功能？在這裏我的源代碼，如：

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>(); 
    } 

} 

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

Answer 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); 
}])