Question

您好我的文章模型有CategoryModel和TagModel列表。在java脚本中，我可以发送文章标题，类别，CoverImageUrl和艺术内容。但是如何用我的功能发送标签？这里我的源代码如下：

NewArticle View：

＆＃13;

@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>

＆＃13;

blogController.js（writeArticle Section）：

 $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 Section）：

 [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。您的视图似乎是在服务器端呈现的，因此所有输入/控件都是从服务器模型预先填充的，然后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);
}])

如何将数据发送到控制器，如Model具有List模型AngularJs

1 个答案: