Estou começando a estudar webapi
com knockout
, usando uma classe
básica como exemplo fiz meu model
, no knockout
fiz o listar e o incluir, na minha classe
tenho decorado os atributos com alguns data annotations
, nessa parte entra minha dúvida, sei que com o knockout
posso fazer bastante validações no lado cliente, mas quero também ter essas validações no server. Qual e a melhor maneira de mostrar os erros do lado do servidor quando se está usando o webapi
?
Segue abaixo código do que tenho pronto!
Model
public class Noticia
{
public int Id { get; set; }
[Required(ErrorMessage = "Campo obrigatório!")]
public string Titutlo { get; set; }
[DataType(DataType.Date)]
[Required(ErrorMessage = "Campo obrigatório!")]
public DateTime DataCadastro { get; set; }
[Required(ErrorMessage = "Campo obrigatório!")]
public string Conteudo { get; set; }
}
Controller
public IQueryable<Noticia> GetNoticias()
{
return _db.Noticias;
}
[HttpPost]
[ResponseType(typeof(Noticia))]
public IHttpActionResult PostNoticia(Noticia noticia)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (noticia == null)
{
return BadRequest();
}
_db.Noticias.Add(noticia);
_db.SaveChanges();
return CreatedAtRoute("DefaultApi", new { id = noticia.Id }, noticia);
}
** VIEW **
<div class="lista-noticias">
<h2>Lista de Notícias</h2>
<hr />
<table id="newsTable" class="table table-condensed">
<thead>
<tr>
<th>Titulo</th>
<th>Data de Cadastro</th>
</tr>
</thead>
<tbody data-bind="foreach: noticias">
<tr>
<td>
<span data-bind="text: titutlo"></span>
</td>
<td>
<span data-bind="text: dataCadastro"></span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="cadastra-noticias">
<form id="AddNoticia">
<div class="row form-group">
<input type="hidden" data-bind="value : noticia.id" class="form-control input-lg" />
<label class="control-label">Título</label>
<input data-bind="value : NovaNoticia.titutlo" class="form-control input-lg" />
<label class="control-label">Data Cadastro</label>
<input data-bind="value : NovaNoticia.dataCadastro" class="form-control input-lg" />
<label class="control-label">Conteúdo</label>
<input data-bind="value : NovaNoticia.conteudo" class="form-control input-lg" />
<input type="button" id="btnAddStudent" class="btn btn-primary" value="Add Noticia" data-bind="click: $root.AddNoticia" />
</div>
</form>
</div>
** JS do KnockOut **
function noticia(id, titutlo, dataCadastro, conteudo) {
return {
id: ko.observable(id),
titutlo: ko.observable(titutlo),
dataCadastro: ko.observable(dataCadastro),
conteudo: ko.observable(conteudo)
};
}
function NoticiaViewModel() {
var self = this;
self.NovaNoticia =
{
id: ko.observable(0),
titutlo: ko.observable("").extend({ required: true }),
dataCadastro: ko.observable("").extend({ required: true }),
conteudo: ko.observable("").extend({ required: true })
};
self.noticias = ko.observableArray([]);
$.getJSON("/admin/api/noticiasapi", function (data) {
self.noticias(data);
});
self.AddNoticia = function (model, event) {
$.post("/admin/api/noticiasapi/PostNoticia", model.NovaNoticia)
.complete(function (data) {
self.noticias.push(data);
}).fail(function (data) {
$(".list-errors").removeClass("hide");
//$(".list-errors ul").append("<li>" + data.message + "</li>");
console.warn(data.responseText);
});
};
}
ko.applyBindings(new NoticiaViewModel());