如何在 asp.net 网站中实现 SOTag 文本框？
[英]How can I implement SOTag textbox in asp.net website?
问题描述
I am trying to use SOTag textbox in a asp.net website(Here link of SOTag textbox).
我正在尝试在 asp.net 网站中使用 SOTag 文本框（这里是 SOTag 文本框的链接）。
The php example is this: 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>
My aspx page is this:我的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>
Then I've changed in js/so_tag.js然后我在js/so_tag.js改变了
autocomplete_URL: 'SOTag.php'
with和
autocomplete_URL: 'MyPage.cs'
Now I don't understand how to implement result.php and SOtag.php in c#.现在我不明白如何在c#中实现result.php和SOtag.php。 Someone could help me?有人可以帮助我吗？
EDIT1编辑1
I have done what you have explained but it dosen't work.我已经完成了你所解释的但它不起作用。
In web.config I wrote在 web.config 我写
<urlMappings enabled="true">
<add url="~/Index.aspx" mappedUrl="~/SoTag.ashx" />
</urlMappings>
But in the index.aspx the result is the json string.但是在 index.aspx 中，结果是 json 字符串。
I have upload the project example on MEGA--> here you can find the link .我已将项目示例上传到 MEGA--> 在这里您可以找到链接。
1 个解决方案
解决方案1
3 已采纳 2014-02-16 00:42:59
To make it work on asp.net you need to follow some steps.要使其在 asp.net 上运行，您需要执行一些步骤。
- Make the autocomplete handler.制作自动完成处理程序。
- Change the
so_tag.jsto ask the new handler.更改so_tag.js以询问新的处理程序。 - Attach it to any asp.net page.将其附加到任何 asp.net 页面。
The handler处理程序
How you make it.你是怎么做到的。 You create a handler SoTag.ashx , and there you return on jSon format the tags.您创建了一个处理程序SoTag.ashx ，并在那里返回 json 格式的标签。 Here is just a simple return to see the return format.这里只是简单的回车看看回车格式。
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);
}
On your code, on this file you must open your database, get the q query string, ask your database for the在您的代码中，在此文件中，您必须打开数据库，获取q查询字符串，向数据库询问
- ID ID
- tag标签
- tag_description标签描述
return them on json format, and the plugin shows them.以 json 格式返回它们，插件会显示它们。
Change the so_tag.js更改 so_tag.js
On the so_tag, find the autocomplete_URL, and change to the asp.net handler, as:在 so_tag 上，找到 autocomplete_URL，并更改为 asp.net 处理程序，如下所示：
autocomplete_URL: 'SoTag.ashx',
The asp.net page asp.net 页面
And the most simple, just attach it to any input control.最简单的是，只需将其附加到任何输入控件即可。
<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>
Finally最后
The only difficulty here is to complete the handler to read data, from your database, that you need to add a lot of informations of the tags, and return them back with json format.这里唯一的困难是完成处理程序从您的数据库中读取数据，您需要添加大量标签信息，并以json格式返回它们。
This code here is tested and work, and here is the screenshot:这里的代码已经过测试和工作，这是屏幕截图：
(source: planethost.gr ) （来源： planethost.gr ）
Small Improvements小改进
The SO_tag.js is make too many calls on every key press, is better to give some time to finish the typing, so add use/change this code on the keyup bind. 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);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.