8

我想创建可在淘汰赛/jquery/asp.net mvc 页面上使用的可重用控件

例如，各种项目可以进行讨论（评论列表）。我想要一个讨论控件来处理显示和添加评论等。

最初的想法是使用局部视图来注入 html，然后使用 .js 文件和一些 javascript 来设置淘汰视图模型。不过，它似乎有点笨拙。我只是想知道是否有人有一种非常好的方法来完成所有这些并将其打包为一个很好的控件？

4

3 回答 3

3

这是一种方法。

您有一个单独的 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，因此我们可以将我们的淘汰视图模型绑定到页面的这个特定部分（避免与页面上的其他淘汰组件冲突）。我们需要的 JavaScript（淘汰视图模型等）被包括在内，创建了一个新的 ViewModel 并应用了淘汰绑定。

@{
    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 中，我们定义了淘汰视图模型等。

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 })
于 2013-07-04T11:21:49.787 回答
0

如果“控制”是指我们习惯于 ASP.NET WebForms 的控制类型，那么在 ASP.NET MVC 中最接近的就是HTML Helpers。由于它们基本上只是常规的 .NET 方法返回HtmlString，因此您可以轻松地将所需的任何内容打包到包含这些方法以及嵌入式资源（用于 JavaScript、CSS 和图像文件）的程序集中。

于 2011-10-16T23:00:51.810 回答
0

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

这仍然是一项正在进行的工作。要使用它，请查看http://jsfiddle.net/rxXyC/11/的演示小提琴。

您还可以在https://github.com/SteveSanderson/knockout/wiki/Plugins查看一些可用插件的列表

于 2011-10-17T01:12:57.810 回答