How to send data to controller like Model has List model AngularJs

Question

Hi my Article model has CategoryModel and TagModel list. In java script i can send article Header,Category,CoverImageUrl and Art content. But how can send Tags with my function? Here my source codes like:

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

And ArticleController.cs(NewArticle Section):

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

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

My ArticleModel Like this:

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

}

As i told i can catch others but i can't add tags into article model. What should i do??

Eugene G · Accepted Answer · 2015-09-07 10:49:04Z

1

Try this

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

Few comments:

First of all I've noticed that you are using the Angular in unusual way. It seems that your view is being rendered on server-side so all inputs/controls are pre-populated from server model and then Angular comes into play (may be not on this view but I believe on others you have). I suggest you to take a closer look at Angular-based SPA examples and use Web API instead of MVC. But if you prefer to have a server-side rendered views I suggest you to populate JS-model instead of HTML inputs. In this case you will have a proper data-binding.

Render your server model as follows

<script>

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

</script>

and then use it in your controller

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

answered Sep 7, 2015 at 10:49

Eugene G

2441 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CoderWho Over a year ago

thank you for your advice my friend. I'm new in angularJs and just learning somethings I believe. I'll look for your advice too. And I'll write result after i used your code example. And my project is so mixed i know 'cause for example i can't make login operations with API,on the other hand my project is not only for blogging. There will be Users which freelancers and their communication informations. So infact my idea is complex for starting with AngularJs i think.

Collectives™ on Stack Overflow

How to send data to controller like Model has List model AngularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related