I'm starting to study webapi
with knockout
, using a classe
f% as an example I made my model
, in knockout
I made the list and include it, in my classe
I have decorated the attributes with some data annotations
, in this part enter my doubt, I know that with knockout
I can do enough validations on the client side, but I also want to have these validations on the server. What is the best way to show server side errors when using webapi
?
Follow the code below for what I'm ready to do!
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>
** KnockOut JS **
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());