c# - tutorial - ¿Cómo crear controles reutilizables usando knockout, jquery y ASP.NET MVC?

mvc c# windows forms

Question

Estoy queriendo crear controles reutilizables que se usen en una página de mcc knockout / jquery / asp.net

Por ejemplo, varios elementos pueden tener una discusión (una lista de comentarios). Quiero un control de discusión que se encargue de mostrar y agregar comentarios, etc.

las ideas iniciales son usar una vista parcial para inyectar el html, y luego tener el archivo .js con algún javascript que configure el modelo de vista knockout. Aunque parece un poco torpe. Me pregunto si alguien tiene una manera realmente agradable de hacer todo esto y empacarlo como un buen control.

Answer 1

Si está buscando conectar automáticamente su html a knockout, eche un vistazo a mi complemento en https://github.com/phototom/ko-autobind .

Esto todavía es un trabajo en progreso. Para usarlo, eche un vistazo a un juego de demostración en http://jsfiddle.net/rxXyC/11/ .

También puede ver la lista de algunos complementos disponibles en https://github.com/SteveSanderson/knockout/wiki/Plugins

Answer 2

Si, con "control", te refieres al tipo de control al que estamos acostumbrados desde ASP.NET WebForms, lo más parecido que tienes en ASP.NET MVC es HTML Helpers . Dado que básicamente son solo métodos regulares de .NET que devuelven HtmlString , puede empaquetar fácilmente todo lo que desee dentro de un ensamblaje que contenga estos métodos junto con recursos incrustados (para JavaScript, CSS y archivos de imágenes).

Answer 3

Aquí hay un enfoque.

Usted tiene un controlador WebAPI separado para manejar el acceso a los datos desde el lado del cliente.

//Inside your CommentsApiController, for example
public IEnumerable<Comment> Get(int id)
{
    var comments = _commentsService.Get(int id);    //Call lower layers to get the data you need
    return comments;
}

Sus controladores MVC tienen acciones que devuelven PartialViewResults . Es una acción simple que devuelve una vista parcial.

//Inside your MVC CommentsController, for example
public PartialViewResult CommentsList(int id)
{
    return PartialView(id);
}

Su vista parcial representa su marcado, con enlaces knockout. Hacemos una identificación única para nuestro HTML para que podamos vincular nuestro modelo de vista eliminatoria a esta sección específica de la página (evite entrar en conflicto con otros componentes inactivados en la página). Se incluye el JavaScript que necesitamos (viewmodels knockout, etc.), un nuevo ViewModel creado y enlaces de knockout aplicados.

@{
    var commentsId = Model;    //passed from our MVC action
    var uniqueIid = System.Guid.NewGuid().ToString();
}
<section class="comments" id="@uniqueIid ">
    <ul data-bind="foreach: { data: Comments, as: ''comment'' }">
        <li>
            <span data-bind="text: comment.Author"></span>
            <p data-bind="text: comment.Message"></p>
        </li>
    </ul>
</section>


@Scripts.Render("~/js/comments")    //using MVC Bundles to include the required JS
@{
    //generate the URL to our WebAPI endpoint.
    var url = Url.RouteUrl("DefaultApi", new { httproute = "", controller = "Comments", id = commentsId });
}
<script type="text/javascript">
    $(function() {
        var commentsRepository = new CommentsRepository(''@url'');
        var commentsViewModel = new CommentsViewModel(commentsRepository);

        var commentsElement = $(''#@uniqueIid'')[0];
        ko.applyBindings(commentsViewModel, commentsElement);
    });
</script>

Dentro de nuestro JavaScript, definimos nuestros modelos de vista knockout, etc.

var CommentsRepository = function(url) {
    var self = this;
    self.url = url;

    self.Get = function(callback) {
        $.get(url).done(function(comments) {
            callback(comments);
        });
    };
};

var CommentsViewModel = function (commentsRepository) {
    var self = this;
    self.CommentsRepository = commentsRepository;
    self.Comments = ko.observableArray([]);

    //self executing function to Get things started
    self.init = (function() {
        self.CommentsRepository.Get(function(comments) {
            self.Comments(comments);
        });
    })();
};

¡Y terminamos! Para usar este nuevo componente, podemos usar RenderAction

@* inside our Layout or another View *@
<article>
    <h1>@article.Name</h1>
    <p>main page content here blah blah blah</p>
    <p>this content is so interesting I bet people are gonna wanna comment about it</p>
</article>
@Html.RenderAction("Comments", "CommentsList", new { id = article.id })