我看到已经有很多主题看起来像我的,但经过一些研究和努力,我仍然没有找到一个有助于解决我的具体问题。
我编写了C#代码,用于从数据库中检索图像引用。此代码似乎按预期工作。我还编写了som JS代码,应该使用上面提到的引用在html页面上放入“src”。 JS代码肯定是问题,因为它没有做我想做的事情。我不知道如何运行这个JS代码,因为它应该在页面加载时运行,而不是在用户单击按钮或链接时运行。 代码如下:
Htm代码:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="JS/ImageFromDB/ImageDBHandler.js" type="text/javascript"></script>
<asp:Literal ID="literal" runat="server"></asp:Literal>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="slideshow">
<img id="imageView" src="" alt="" class="active" runat="server" />
</div>
</asp:Content>
服务器端代码:
public string LoadImagesFromDB()
{
Sql sql = new Sql();
string query = "SELECT Location FROM GalleryImages";
MySqlCommand cmd = sql.Command(query);
DataTable dt = sql.DataTable(cmd);
string images= "<script type=\"text/javascript\">var images= [";
foreach (DataRow row in dt.Rows)
{
images+= "\"" + HttpUtility.UrlDecode(row["Location"].ToString()) + "\",";
}
images = billeder.Substring(0, billeder.Length - 1);
images += "];</script>";
return images;
}
和JS代码: 这就是我认为一切都崩溃的地方。我不知道如何编写JS代码以便它可以完成这项工作。 'images [this.length]的结果如下: 'HTTP:www.host.com/Folder/imageFile.jpg'。我很确定这是错的,但我不知道该写些什么。我很惊讶图像[this.length]没有返回一个数字(长度,这当然没用)。
function imageSlider() {
$("#imageView").attr("src", images[this.length]);
}
---------------------------------以防万一----------- ------------------------
这是html页面的c#类。该类调用从数据库进行查询的类。
private WebLogic logic = new WebLogic();
public void GetImageForView()
{
string images= logic.LoadImagesFromDB();
literal.Text = images;
// imageView.Src = HttpUtility.UrlDecode(images);
}
我真的希望你们专家可以帮助我,我已经连续3天一直在努力。 提前致谢
答案 0 :(得分:2)
你的方法似乎很混乱。根据我的理解,您希望下载指向图像的网址列表,然后使用imageView图像显示它们。首先,您至少需要基本的JS知识来了解正在发生的事情。我看到你已经在使用jQuery了。如果您遇到错误,您应该检查jQuery库是否正确包含在您的网站中(例如http://www.dotnetcurry.com/ShowArticle.aspx?ID=231)。根据您使用的浏览器并计划与之兼容(例如Firebug,Chrome开发者工具,IE中的F12等),您还应该熟悉浏览器开发人员工具。
关于您的问题,您可以使用AJAX调用(http://weblogs.asp.net/karan/archive/2010/09/12/calling-server-side-method-using-jquery-ajax.aspx)调用服务器方法LoadImagesFromDB。负责此类呼叫的功能可能如下所示,例如
var getImages = function () {
$.ajax({
type: "POST",
url: "YourPage.aspx/LoadImagesFromDB",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: imagesUrlsReceived
});
return false;
};
接下来需要修改服务器端方法:它必须是静态的,并且必须使用[ WebMethod ]属性进行修饰。更重要的是,你不包括脚本标签等。所有你应该返回的是一个包含你的网址的字符串数组(我没有检查你的网址创建程序,你可以验证这是否自己生成正确的链接)。它可能类似于下面的代码:
public static string[] LoadImagesFromDB()
{
Sql sql = new Sql();
string query = "SELECT Location FROM GalleryImages";
MySqlCommand cmd = sql.Command(query);
DataTable dt = sql.DataTable(cmd);
string[] images = new string[dt.Rows.Count];
for(int i = 0; i < dt.Rows.Count;i++)
{
images[i] = HttpUtility.UrlDecode(dt.Rows[i]["Location"].ToString());
}
return images;
}
现在,您需要将服务器返回的结果(URL字符串数组)保存在客户端的JavaScript变量中。你可以这样做,例如在文档上使用jQuery的ready事件。你所做的是:你触发getImages()并在imagesUrlsReceived中用图像变量填充结果。
var images = [];
var imagesUrlsReceived = function(results) {
if (results === undefined) {
alert('Something went wrong while returning results from server!');
return;
}
for (var i in results) {
images.push(results[i]);
}
};
$(document).ready(function () {
getImages();
});
现在是最重要的部分。你的电话(至少有这个小信息)
function imageSlider() {
$("#imageView").attr("src", images[this.length]);
}
现在没什么意义。您应该在JavaScript中阅读有关范围和此内容(例如http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/)。我想你想要从图片列表中显示一张图片。显示例如列表中的第一张图片你可以这样做:
function showFirstImage() {
$("#imageView").attr("src", images[0]);
}
当然,这不是我们可能想到的最通用的解决方案,这就是为什么我们可以像这样实现它:
function imageSlider(imageNum) {
$("#imageView").attr("src", images[imageNum]);
}
其中imageNum是图像阵列中图像的从0开始的索引。值得一提的是,imageSlider函数不应该在使用从服务器下载的URL填充图像变量时调用。否则,图像变量仍为空。
除了草绘的内容外,还有很多其他事情要做。你应该注意可能的错误(如果我传递一个字符串而不是一个数字作为imageNum,如果imageNum为null,或者未定义,或者imageNum超出界限,例如小于0或大于images.length?) 。
但是,我想我已经给了你一个粗略的计划,在这种情况下应该采取什么行动。我不保证这是剪切和粘贴代码,它是作为说明和指导,而不是一个完整的解决方案。