领英 Integration in Asp.Net MVC5

by Santhakumar Munuswamy

  Posted on  04 June 2016

  ASP.NET MVC


 

在本文中,我们将讨论如何与MVC中的Disqus评论系统集成。众所周知,评论是当今博客的一部分。我们已将数据存储到数据库或XML文件中。以高昂的价格处理数据维护和存储空间非常麻烦。为了克服这个问题,我们在Disqus中提供了一个选项。这是一个最受信任的评论插件,无需编程,即可轻松使用。

背景

领英是博客评论托管服务,为社交集成,社交网络,用户个人资料,分析,移动评论等提供平台。它由Daniel Ha和Jason Yan于2007年创立,是一家Y Combinator创业公司。简单易学,即使对于非技术人员也是如此。它与WordPress,Tumblr,Squarespace等最受欢迎的服务直接集成。 

设置 up Disqus Environment

第一, we have to register an account and can able to logged in the forum. If we can setup up 
争议 on a new site with enter the site name, choose your unique Disqus URL and Category, 
和 then click Next Button.     

 

后, you have successfully created a own site on Disqus. Now you can able to choose your platform

喜欢 “普遍 Code” as below screen shots.

 

If we can selected a universal code option and you can know the setup instruction for universal code 

as following steps:-

步 1:-  

We can add the following code where you’d like Disqus to load

<div id="争议_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: //disqus.com/admin/universalcode/#configuration-variables
*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');

s.src = '//san2blog.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>


步 2:-

We can able to edit the recommended configuration variables section using your CMS or platform’s 
动态 values. If you want to learn why defining 识别码 和 网址 is important for preventing duplicate 
线程。

怎么样 to display comment count 

步 1:-

We can add the following code before your site’s closing </body> tag
<script id="dsq-count-scr" src="//san2blog.disqus.com/count.js" async></script>
步 2:- 

附加 #争议_thread to the href 属性 in your links. This will tell Disqus which links to look up 

和 return the comment count. For example

<a href="http://example.com/bar.html#disqus_thread">Link</a>.

怎么样 to integrate the Disqus with Sample MVC Application

We are going to discuss how to integrate the Disqus commenting plugin with sample application and 
显示 the demo in MVC. We will see the step by step guidelines for the sample application creation
这里  

步 1:-

打开 Visual Studio 2015 and go to file menu and point the new and then click new project. New ASP.NET 

项目 window will open, you can select a ASP.NET Web Application and Type Project Name DisqusCommentDemo, 
选择 the project location path and then click OK button.

新 ASP.NET project window will open, you can select a 空的 Template and select a MVC folder  with 
No Authentication and then click OK button.

 

步 2:-

怎么样 to add Layout and ViewStart page
 
Go to View folder and right click the View folder and point Add then click the New Folder. Now, you can change 
新 folder name as “共享” folder

Go to Shared folder and right click the Shared folder and point Add then click the MVC 5 Layout page. You can 
类型 the item name as _布局 and click OK button.

Go to View folder and right click the View folder and point Add hen click the Add View. You can type the view 
名称  as _ViewStart, Template as leave empty and click Add button.

同样, you can add HomeController.cs under the Controller folder and Index.cshtml under the View inside a 首页 folder.

步 3:- 

<div id="争议_thread"></div>

Index.cshtml

@{
    ViewBag.Title = "首页";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Home</h2>

<div id="争议_thread"></div>


We have added layout reference in index page. So we can able to add the disqus plugin scripts to _Layout.cshtml. 

加 also we have unique identifier name for disqus plugin as registered in the forum as following lines.

var d = document, s = d.createElement('script');
s.src = '//san2blog.disqus.com/embed.js';  

最后, we can add one more script for comment count as following line before closing </body> tag

<script id="dsq-count-scr" src="//san2blog.disqus.com/count.js" async></script>
_布局.cshtml  
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="视图port" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Style/bootstrap.min.css" rel="stylesheet">
    <script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: //disqus.com/admin/universalcode/#configuration-variables
*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');

s.src = '//san2blog.disqus.com/embed.js';

s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
    </script>
    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</head>
<body>
 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-example">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Disqus Comment Apps</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse-example">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
</nav>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                @RenderBody()

            </div>
        </div>
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; San2debug 2016</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>
        </div>
    <script src="~/scripts/jquery.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script id="dsq-count-scr" src="//san2blog.disqus.com/count.js" async></script>
</body>
</html>

步 4:-

现在, if you can run the sample application, you can see a comment looks as following

参考 

结论

I hope i have covered all the required things that if you found anything i missed in this article. 
请 let me know ? Please kindly share your valuable feedback or suggestions.

 


关于作者
Santhakumar Munuswamy是一位经验丰富的解决方案架构师,并且是Cloud / AI解决方案中最有价值的专家。他在解决方案设计,软件产品开发,技术文档,Web和云应用程序的项目管理方面拥有大约14年的经验。他在不同领域(汽车,电信,医疗保健,物流和仓库自动化等)的IT行业经验丰富,担任过技术架构师,Genesys顾问,技术负责人,团队负责人和开发人员。他在指导和指导高潜力开发人员方面经验丰富。

跟着我: 脸书, 推特, 谷歌加, 领英
博客评论由 领英


Month List

社区徽章