如何在asp.net网站上实现SOTag文本框

时间:2014-02-15 23:01:04

标签: c# javascript php asp.net

大家好我想在asp.net网站上使用SOTag文本框(这里是SOTag文本框的link)。 php的例子是:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SOTag</title>
<style type="text/css">
body {
padding:30px;
width:960px;
margin:0 auto;
}
pre {
border:#ccc 1px solid;
background:#EFEFEF;
padding:10px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/so_tag.css?<?php echo rand(0,1000); ?>">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/so_tag.js?<?php echo rand(0,1000); ?>"></script>
</head>
<body>
<h2>jQuery.SO_Tag</h2>
<p>First a little description about what this plugin is for. This plugin is designed to be used with a backend database full of tags, not to be able to tag whatever you or the user wants to. I may add that feature if people want to but you cannot currently let your users add custom tags using this plugin</p>
<p>It's easy to get started, first include the JavaScript files and the CSS</p>
<pre>
<?php echo htmlentities('<link rel="stylesheet" type="text/css" href="css/so_tag.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/so_tag.js"></script>'); ?>
</pre>
<br />
<pre>
<?php echo htmlentities('<form action="result.php" method="post">
<input type="text" value="3_php" name="single_example" id="single_example" />
<input type="submit" value="Submit" />
</form>

<script type="text/javascript">
$(\'#single_example\').sotag({
description : true
});
</script>'); ?>
</pre>
<br />
<p><strong>Here is an example with multiple tag fields</strong></p>
<form action="result.php" method="post">
<p>Programming words (example: PHP)</p>
<input type="text" value="" name="multi_example_programming_tags" class="multi_example_programming_tags" />
<br />
</form>
<script type="text/javascript">
$('.multi_example_programming_tags').sotag({
description : true
});
</script>
</body>
</html>

我的aspx页面是这样的:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
       <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
       <script src="js/so_tag.js" type="text/javascript"></script>
       <link rel="stylesheet" href="css/so_tag.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <title>Example</title>
   </head>
   <body>
       <form id="form1" runat="server" method="post">
           <input type="text" value="" name="multi_example_programming_tags" class="multi_example_programming_tags" />
       <br />
       </form>
       <script type="text/javascript">
           $('.multi_example_programming_tags').sotag({
              description: true
       });
       </script>
   </body>
</html>

然后我改变了js/so_tag.js

autocomplete_URL: 'SOTag.php'

autocomplete_URL: 'MyPage.cs'

现在我不明白如何在c#中实现result.php和SOtag.php。有人可以帮帮我吗? 此致 Tinwor

EDIT1

我已经完成了你所解释的但它不起作用。

在web.config中我写了

<urlMappings enabled="true">
    <add url="~/Index.aspx" mappedUrl="~/SoTag.ashx" /> 
  </urlMappings>

但是在index.aspx中,结果是json字符串。

我已在MEGA上传项目示例 - &gt;在这里你可以找到link 提前致谢, Tinwor

1 个答案:

答案 0 :(得分:3)

要使其在asp.net上运行,您需要执行一些步骤。

  1. 制作自动填充处理程序。
  2. 更改so_tag.js以询问新处理程序。
  3. 将其附加到任何asp.net页面。
  4. 处理程序

    你是如何做到的。您创建了一个处理程序SoTag.ashx,然后在jSon格式中返回标记。这里只是一个简单的返回,看看返回格式。

    public void ProcessRequest (HttpContext context) 
    {
        context.Response.ContentType = "text/plain";
    
        // Simple one TAG format SO_Tag, and one more for test
        string cRet = @"
        [{
            ""id"": 10, 
            ""tag"": ""SO_Tag"",
            ""tag_description"": ""SO_Tag: Tagging system based on StackOverflows tag search""
        },{
            ""id"": 11, 
            ""tag"": ""asp.net"",
            ""tag_description"": ""ASP.NET is a web application framework developed by Microsoft to allow programmers to build dynamic web sites and web applications.""
        }]";
    
        context.Response.Write(cRet);   
    }
    

    在您的代码上,您必须在此文件上打开数据库,获取q查询字符串,向您的数据库询问

    • ID
    • 标签
    • tag_description

    以json格式返回它们,插件显示它们。

    更改so_tag.js

    在so_tag上,找到autocomplete_URL,然后更改为asp.net处理程序,如下所示:

    autocomplete_URL: 'SoTag.ashx',

    asp.net页面

    最简单的,只需将其附加到任何输入控件。

    <head runat="server">
        <script type="text/javascript" src="jquery.min.js"></script>
        <link rel="stylesheet" href="so_tag.css" type="text/css" />
        <script type="text/javascript" src="so_tag.js"></script>
    
    
        <script type="text/javascript">
        jQuery( document ).ready(function() 
        {
            jQuery('#<%=txtSoTags.ClientID%>').sotag({
                description : true
            });
        });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:TextBox runat="server" ID="txtSoTags" Width="300">1_some, 2_example, 3_tags</asp:TextBox>
        </form>
    </body>
    </html>
    

    最后

    这里唯一的困难是完成处理程序以从数据库中读取数据,您需要添加标签的大量信息,并以json格式返回它们。

    这里的代码经过测试并且有效,这里是截图:

    http://www.planethost.gr/so/SoTags.gif

    小改进

    SO_tag.js在每次按键时都会拨打太多电话,最好给一些时间来完成输入,所以在keyup绑定上添加使用/更改此代码。

        var cKeyPressTimer = null;
        // Now if the user starts typing show results
        elem.bind('keyup', function(e) 
        {
            if(cKeyPressTimer)
                clearTimeout(cKeyPressTimer);
            cKeyPressTimer = setTimeout(SO_update_results, 500);
        });