如何使用knockout、jquery和ASP创建可重用控件.净MVC

本文关键字：控件 MVC 创建 ASP knockout 何使用 jquery | 更新日期: 2023-09-27 18:11:38

我想创建一个可重用的控件，可以在knockout/jquery/asp.net mvc页面上使用

例如，不同的项目可以有一个讨论(一个评论列表)。我想要一个讨论控件来处理显示和添加评论等。

最初的想法是使用一个局部视图来注入html，然后使用.js文件和一些javascript来设置knockout视图模型。不过看起来有点笨重。我只是想知道是否有人有一个很好的方法来做这一切，并把它包装成一个很好的控制?

如何使用knockout、jquery和ASP创建可重用控件.净MVC

这是一种方法。

你有一个单独的WebAPI控制器来处理来自客户端的数据访问。

//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;
}

你的MVC控制器有返回PartialViewResults的动作。这是一个返回局部视图的简单操作。

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

你的局部视图通过删除绑定呈现你的标记。我们为HTML创建了一个唯一的ID，这样我们就可以将knockout视图模型绑定到页面的这个特定部分(避免与页面上的其他knockout组件冲突)。包括我们需要的JavaScript (knockout viewmodels等)，创建一个新的ViewModel并应用knockout绑定。

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

在JavaScript中，我们定义了knockout视图模型等。

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

我们做完了!要使用这个新组件，我们可以使用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 })

如果你说的"control"是指我们在ASP中使用的控件类型。NET WebForms，最接近ASP的东西。. NET MVC，是HTML helper。因为它们基本上只是返回HtmlString的常规。net方法，所以你可以很容易地将任何你想要的东西打包到包含这些方法以及嵌入资源(用于JavaScript, CSS和图像文件)的程序集中。

如果您希望自动将html连接到knockout，请查看我的插件https://github.com/phototom/ko-autobind。

这项工作仍在进行中。要使用它，请查看一个演示文件http://jsfiddle.net/rxXyC/11/.

您还可以在https://github.com/SteveSanderson/knockout/wiki/Plugins

上看到一些可用插件的列表。
相关文章：