javascript - 如何将数据发送到 Controller ，例如模型具有列表模型AngularJs

Question

您好，我的文章模型有 CategoryModel 和 TagModel 列表。在java脚本中，我可以发送文章标题、类别、封面图像网址和艺术内容。但是如何用我的函数发送标签呢？这里我的源代码如下:

新文章 View :

@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");
    }

我的文章模型是这样的:

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。看来您的 View 是在服务器端渲染的，因此所有输入/控件都是从服务器模型中预先填充的，然后 Angular 开始发挥作用(可能不在这个 View 上，但我相信您拥有的其他 View )。我建议您仔细查看基于 Angular 的 SPA 示例，并使用 Web API 而不是 MVC。但如果您更喜欢服务器端呈现的 View ，我建议您填充 JS 模型而不是 HTML 输入。在这种情况下，您将拥有正确的数据绑定(bind)。

按如下方式渲染您的服务器模型

<script>

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

</script> 

然后在你的 Controller 中使用它

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