从Code Behind调用UpdatePanel中的.js文件

Question

我一直在努力为一个项目自学ASP.NET和Javascript，现在几十个小时都遇到了一个问题。

我在网上发现了一个非常好的javascript拖放列表，复制了提供的源代码并将css拆分为.css文件，javascript转换为.js文件，HTML和引用到我的asp.net页面。它工作得很好。太好了！

接下来，我用一个填充了相同数据的静态HTML列表替换了javascript列表，将其包装在UpdatePanel中并设置了一个“编辑顺序”按钮，当按钮为按钮时，将静态列表的HTML交换为javascript列表的HTML按压。

没有骰子！

首先，初始运行时会抛出javascript错误，说明无法找到某些对象。例如：

Microsoft JScript runtime error: Unable to get value of the property 'getElementsByTagName': object is null or undefined

理解，因为元素实际上还没有。所以我删除了对主标题中的.js的引用，并尝试在更改更新面板时注册.js文件。

这是我的问题。

在线的大多数解释都集中在注册客户端块，或者RegisterStartupScript，或RegisterClientScriptInclude，或myLiteral，我无法使其中的任何一个工作。我还发现许多在线解释都是为了运行单个javascript函数，而我试图运行的脚本有700行值！我是否必须单独引用它们？

对于毫无疑问的新问题，我们深表歉意。我一直在问，直到我在屏幕上大喊大叫才有足够的讽刺来乞求求助！

谢谢和问候。

编辑：代码

如同要求，这是代码：

VB.net（这是按下按钮调用的一个子。这是我需要注册我的脚本的时候）

    Dim script As String = ""

    Dim Labelb As Label = CType(FindControl("Labelb"), Label)


    Dim con As SqlConnection
    Dim cmd As SqlCommand
    con = New SqlConnection("[connection string here]")
    con.Open()
    Dim lrd As SqlDataReader

    cmd = New SqlCommand("[command string here]", con)
    lrd = cmd.ExecuteReader

    Dim item = ""



    While lrd.Read()
        item = item & "<li style=""position: relative;"">" & lrd(1) & "</li>"
    End While
    lrd.Close()

    item = "<table id=""phonetics""><tbody><tr><td><ul id=""phonetic3"" class=""boxy"">" & item & "</ul></td></tr></tbody></table><br/>"


    Labelb.Text = item

这是asp.net母版页中的HTML更新面板：

 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
                            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                            <asp:Label ID="Labelb" runat="server" Text="" />

                            </ContentTemplate>
                            </asp:UpdatePanel>

最后，这是我需要注册的.js文件

var ToolMan = {
events : function() {
if (!ToolMan._eventsFactory) throw "ToolMan Events module isn't loaded";
return ToolMan._eventsFactory
},

css : function() {
if (!ToolMan._cssFactory) throw "ToolMan CSS module isn't loaded";
return ToolMan._cssFactory
},

coordinates : function() {
if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn't loaded";
return ToolMan._coordinatesFactory
},

drag : function() {
if (!ToolMan._dragFactory) throw "ToolMan Drag module isn't loaded";
return ToolMan._dragFactory
},

dragsort : function() {
if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn't loaded";
return ToolMan._dragsortFactory
},

helpers : function() {
return ToolMan._helpers
},

cookies : function() {
if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn't loaded";
return ToolMan._cookieOven
},

junkdrawer : function() {
return ToolMan._junkdrawer
}

}

ToolMan._helpers = {
map : function(array, func) {
for (var i = 0, n = array.length; i < n; i++) func(array[i])
},

nextItem : function(item, nodeName) {
if (item == null) return
var next = item.nextSibling
while (next != null) {
if (next.nodeName == nodeName) return next
next = next.nextSibling
}
return null
},

previousItem : function(item, nodeName) {
var previous = item.previousSibling
while (previous != null) {
if (previous.nodeName == nodeName) return previous
previous = previous.previousSibling
}
return null
},

moveBefore : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2)
},

moveAfter : function(item1, item2) {
var parent = item1.parentNode
parent.removeChild(item1)
parent.insertBefore(item1, item2 ? item2.nextSibling : null)
}
}

/** 
* scripts without a proper home
*
* stuff here is subject to change unapologetically and without warning
*/
ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]

array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join('|')
},

inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},

restoreListOrder : function(listID) {
var list = document.getElementById(listID)
if (list == null) return

var cookie = ToolMan.cookies().get("list-" + listID)
if (!cookie) return;

var IDs = cookie.split('|')
var items = ToolMan.junkdrawer()._itemsByID(list)

for (var i = 0, n = IDs.length; i < n; i++) {
  var itemID = IDs[i]
  if (itemID in items) {
    var item = items[itemID]
    list.removeChild(item)
    list.insertBefore(item, null)
  }
}
},

_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier

identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;

identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;

// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},

_itemsByID : function(list) {
var array = new Array()
var items = list.getElementsByTagName('li')
for (var i = 0, n = items.length; i < n; i++) {
  var item = items[i]
  array[ToolMan.junkdrawer()._identifier(item)] = item
}
return array
},

trim : function(text) {
if (text == null) return null
return text.replace(/^(\s+)?(.*\S)(\s+)?$/, '$2')
}
}


ToolMan._eventsFactory = {
fix : function(event) {
if (!event) event = window.event

if (event.target) {
  if (event.target.nodeType == 3) event.target = event.target.parentNode
} else if (event.srcElement) {
  event.target = event.srcElement
}

return event
},

 register : function(element, type, func) {
if (element.addEventListener) {
  element.addEventListener(type, func, false)
} else if (element.attachEvent) {
  if (!element._listeners) element._listeners = new Array()
  if (!element._listeners[type]) element._listeners[type] = new Array()
  var workaroundFunc = function() {
    func.apply(element, new Array())
  }
  element._listeners[type][func] = workaroundFunc
  element.attachEvent('on' + type, workaroundFunc)
  }
  },

unregister : function(element, type, func) {
if (element.removeEventListener) {
  element.removeEventListener(type, func, false)
} else if (element.detachEvent) {
  if (element._listeners 
      && element._listeners[type] 
      && element._listeners[type][func]) {

    element.detachEvent('on' + type, 
        element._listeners[type][func])
  }
 }
  }
 }


ToolMan._cssFactory = {
readStyle : function(element, property) {
if (element.style[property]) {
  return element.style[property]
} else if (element.currentStyle) {
  return element.currentStyle[property]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
  var style = document.defaultView.getComputedStyle(element, null)
  return style.getPropertyValue(property)
} else {
  return null
}
}
}




/* FIXME: assumes position styles are specified in 'px' */

ToolMan._coordinatesFactory = {

create : function(x, y) {
// FIXME: Safari won't parse 'throw' and aborts trying to do anything with this file
//if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
return new _ToolManCoordinate(this, x, y)
},

origin : function() {
return this.create(0, 0)
},

/*
 * FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
 */
topLeftPosition : function(element) {
var left = parseInt(ToolMan.css().readStyle(element, "left"))
var left = isNaN(left) ? 0 : left
var top = parseInt(ToolMan.css().readStyle(element, "top"))
var top = isNaN(top) ? 0 : top

return this.create(left, top)
},

bottomRightPosition : function(element) {
return this.topLeftPosition(element).plus(this._size(element))
},

topLeftOffset : function(element) {
var offset = this._offset(element) 

var parent = element.offsetParent
while (parent) {
  offset = offset.plus(this._offset(parent))
  parent = parent.offsetParent
}
 return offset
},

bottomRightOffset : function(element) {
return this.topLeftOffset(element).plus(
    this.create(element.offsetWidth, element.offsetHeight))
},

scrollOffset : function() {
if (window.pageXOffset) {
  return this.create(window.pageXOffset, window.pageYOffset)
} else if (document.documentElement) {
  return this.create(
      document.body.scrollLeft + document.documentElement.scrollLeft, 
      document.body.scrollTop + document.documentElement.scrollTop)
} else if (document.body.scrollLeft >= 0) {
  return this.create(document.body.scrollLeft, document.body.scrollTop)
} else {
  return this.create(0, 0)
}
},

clientSize : function() {
if (window.innerHeight >= 0) {
  return this.create(window.innerWidth, window.innerHeight)
} else if (document.documentElement) {
  return this.create(document.documentElement.clientWidth,
      document.documentElement.clientHeight)
} else if (document.body.clientHeight >= 0) {
  return this.create(document.body.clientWidth,
      document.body.clientHeight)
} else {
  return this.create(0, 0)
}
},

/**
 * mouse coordinate relative to the window (technically the
 * browser client area) i.e. the part showing your page
 *
 * NOTE: in Safari the coordinate is relative to the document
 */
 mousePosition : function(event) {
 event = ToolMan.events().fix(event)
 return this.create(event.clientX, event.clientY)
},

 /**
 * mouse coordinate relative to the document
 */
mouseOffset : function(event) {
event = ToolMan.events().fix(event)
if (event.pageX >= 0 || event.pageX < 0) {
  return this.create(event.pageX, event.pageY)
} else if (event.clientX >= 0 || event.clientX < 0) {
  return this.mousePosition(event).plus(this.scrollOffset())
}
},

_size : function(element) {
/* TODO: move to a Dimension class */
 return this.create(element.offsetWidth, element.offsetHeight)
},

_offset : function(element) {
return this.create(element.offsetLeft, element.offsetTop)
}
}

function _ToolManCoordinate(factory, x, y) {
this.factory = factory
this.x = isNaN(x) ? 0 : x
this.y = isNaN(y) ? 0 : y
}

_ToolManCoordinate.prototype = {
toString : function() {
return "(" + this.x + "," + this.y + ")"
},

plus : function(that) {
return this.factory.create(this.x + that.x, this.y + that.y)
},

minus : function(that) {
return this.factory.create(this.x - that.x, this.y - that.y)
},

min : function(that) {
return this.factory.create(
    Math.min(this.x , that.x), Math.min(this.y , that.y))
},

max : function(that) {
return this.factory.create(
    Math.max(this.x , that.x), Math.max(this.y , that.y))
 },

constrainTo : function (one, two) {
var min = one.min(two)
var max = one.max(two)

return this.max(min).min(max)
},

distance : function (that) {
 return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
},

reposition : function(element) {
element.style["top"] = this.y + "px"
element.style["left"] = this.x + "px"
}
}



ToolMan._dragFactory = {
createSimpleGroup : function(element, handle) {
handle = handle ? handle : element
var group = this.createGroup(element)
group.setHandle(handle)
group.transparentDrag()
group.onTopWhileDragging()
return group
},

createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)

var position = ToolMan.css().readStyle(element, 'position')
if (position == 'static') {
  element.style["position"] = 'relative'
} else if (position == 'absolute') {
  /* for Safari 1.2 */
  ToolMan.coordinates().topLeftOffset(element).reposition(element)
}

// TODO: only if ToolMan.isDebugging()
group.register('draginit', this._showDragEventStatus)
group.register('dragmove', this._showDragEventStatus)
group.register('dragend', this._showDragEventStatus)

return group
},

_showDragEventStatus : function(dragEvent) {
window.status = dragEvent.toString()
},

constraints : function() {
return this._constraintFactory
},

_createEvent : function(type, event, group) {
return new _ToolManDragEvent(type, event, group)
}
}

function _ToolManDragGroup(factory, element) {
this.factory = factory
this.element = element
this._handle = null
this._thresholdDistance = 0
this._transforms = new Array()
// TODO: refactor into a helper object, move into events.js
this._listeners = new Array()
this._listeners['draginit'] = new Array()
this._listeners['dragstart'] = new Array()
this._listeners['dragmove'] = new Array()
this._listeners['dragend'] = new Array()
}

_ToolManDragGroup.prototype = {
/*
 * TODO:
 *   - unregister(type, func)
  *   - move custom event listener stuff into Event library
 *   - keyboard nudging of "selected" group
 */

setHandle : function(handle) {
var events = ToolMan.events()

handle.toolManDragGroup = this
events.register(handle, 'mousedown', this._dragInit)
handle.onmousedown = function() { return false }

if (this.element != handle)
  events.unregister(this.element, 'mousedown', this._dragInit)
},

register : function(type, func) {
 this._listeners[type].push(func)
},

addTransform : function(transformFunc) {
this._transforms.push(transformFunc)
},

verticalOnly : function() {
this.addTransform(this.factory.constraints().vertical())
},

horizontalOnly : function() {
this.addTransform(this.factory.constraints().horizontal())
},

setThreshold : function(thresholdDistance) {
this._thresholdDistance = thresholdDistance
},

transparentDrag : function(opacity) {
var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")

this.register('dragstart', function(dragEvent) {
  var element = dragEvent.group.element
  element.style.opacity = opacity
  element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'
})
this.register('dragend', function(dragEvent) {
  var element = dragEvent.group.element
  element.style.opacity = originalOpacity
  element.style.filter = 'alpha(opacity=100)'
})
},

onTopWhileDragging : function(zIndex) {
var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")

this.register('dragstart', function(dragEvent) {
  dragEvent.group.element.style.zIndex = zIndex
})
this.register('dragend', function(dragEvent) {
  dragEvent.group.element.style.zIndex = originalZIndex
})
},

_dragInit : function(event) {
event = ToolMan.events().fix(event)
var group = document.toolManDragGroup = this.toolManDragGroup
var dragEvent = group.factory._createEvent('draginit', event, group)

group._isThresholdExceeded = false
group._initialMouseOffset = dragEvent.mouseOffset
group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
ToolMan.events().register(document, 'mousemove', group._drag)
document.onmousemove = function() { return false }
ToolMan.events().register(document, 'mouseup', group._dragEnd)

group._notifyListeners(dragEvent)
},

_drag : function(event) {
event = ToolMan.events().fix(event)
var coordinates = ToolMan.coordinates()
var group = this.toolManDragGroup
if (!group) return
var dragEvent = group.factory._createEvent('dragmove', event, group)

var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)

// TODO: replace with DragThreshold object
if (!group._isThresholdExceeded) {
  var distance = 
      dragEvent.mouseOffset.distance(group._initialMouseOffset)
  if (distance < group._thresholdDistance) return
  group._isThresholdExceeded = true
  group._notifyListeners(
      group.factory._createEvent('dragstart', event, group))
}

for (i in group._transforms) {
  var transform = group._transforms[i]
  newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
}

var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
newTopLeftPosition.reposition(group.element)
dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)

group._notifyListeners(dragEvent)

var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
if (errorDelta.x != 0 || errorDelta.y != 0) {
  coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
}
},

_dragEnd : function(event) {
event = ToolMan.events().fix(event)
var group = this.toolManDragGroup
var dragEvent = group.factory._createEvent('dragend', event, group)

group._notifyListeners(dragEvent)

this.toolManDragGroup = null
ToolMan.events().unregister(document, 'mousemove', group._drag)
document.onmousemove = null
ToolMan.events().unregister(document, 'mouseup', group._dragEnd)
},

_notifyListeners : function(dragEvent) {
var listeners = this._listeners[dragEvent.type]
for (i in listeners) {
  listeners[i](dragEvent)
}
}
}

function _ToolManDragEvent(type, event, group) {
this.type = type
this.group = group
this.mousePosition = ToolMan.coordinates().mousePosition(event)
this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
this.transformedMouseOffset = this.mouseOffset
this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}

_ToolManDragEvent.prototype = {
toString : function() {
return "mouse: " + this.mousePosition + this.mouseOffset + "    " +
    "xmouse: " + this.transformedMouseOffset + "    " +
    "left,top: " + this.topLeftPosition + this.topLeftOffset
}
}

ToolMan._dragFactory._constraintFactory = {
vertical : function() {
return function(coordinate, dragEvent) {
  var x = dragEvent.topLeftOffset.x
  return coordinate.x != x
      ? coordinate.factory.create(x, coordinate.y) 
      : coordinate
}
},

horizontal : function() {
return function(coordinate, dragEvent) {
  var y = dragEvent.topLeftOffset.y
  return coordinate.y != y
      ? coordinate.factory.create(coordinate.x, y) 
      : coordinate
}
}
}


ToolMan._dragsortFactory = {
makeSortable : function(item) {
var group = ToolMan.drag().createSimpleGroup(item)

group.register('dragstart', this._onDragStart)
group.register('dragmove', this._onDragMove)
group.register('dragend', this._onDragEnd)

return group
},

/** 
 * Iterates over a list's items, making them sortable, applying
 * optional functions to each item.
 *
 * example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
 */
 makeListSortable : function(list) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()
var items = list.getElementsByTagName("li")

helpers.map(items, function(item) {
  var dragGroup = dragsort.makeSortable(item)
  dragGroup.setThreshold(4)
  var min, max
  dragGroup.addTransform(function(coordinate, dragEvent) {
    return coordinate.constrainTo(min, max)
  })
  dragGroup.register('dragstart', function() {
    var items = list.getElementsByTagName("li")
    min = max = coordinates.topLeftOffset(items[0])
    for (var i = 1, n = items.length; i < n; i++) {
      var offset = coordinates.topLeftOffset(items[i])
      min = min.min(offset)
      max = max.max(offset)
    }
  })
})
for (var i = 1, n = arguments.length; i < n; i++)
  helpers.map(items, arguments[i])
},

_onDragStart : function(dragEvent) {
},

_onDragMove : function(dragEvent) {
var helpers = ToolMan.helpers()
var coordinates = ToolMan.coordinates()

var item = dragEvent.group.element
var xmouse = dragEvent.transformedMouseOffset
var moveTo = null

var previous = helpers.previousItem(item, item.nodeName)
while (previous != null) {
  var bottomRight = coordinates.bottomRightOffset(previous)
  if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
    moveTo = previous
  }
  previous = helpers.previousItem(previous, item.nodeName)
}
if (moveTo != null) {
  helpers.moveBefore(item, moveTo)
  return
}

var next = helpers.nextItem(item, item.nodeName)
while (next != null) {
  var topLeft = coordinates.topLeftOffset(next)
  if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
    moveTo = next
  }
  next = helpers.nextItem(next, item.nodeName)
}
if (moveTo != null) {
  helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
  return
 }
},

_onDragEnd : function(dragEvent) {
ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
}
}


ToolMan._cookieOven = {

set : function(name, value, expirationInDays) {
if (expirationInDays) {
  var date = new Date()
  date.setTime(date.getTime() + (expirationInDays * 24 * 60 * 60 * 1000))
  var expires = "; expires=" + date.toGMTString()
} else {
  var expires = ""
}
document.cookie = name + "=" + value + expires + "; path=/"
},

get : function(name) {
var namePattern = name + "="
var cookies = document.cookie.split(';')
for(var i = 0, n = cookies.length; i < n; i++) {
  var c = cookies[i]
  while (c.charAt(0) == ' ') c = c.substring(1, c.length)
  if (c.indexOf(namePattern) == 0)
    return c.substring(namePattern.length, c.length)
}
return null
},

eraseCookie : function(name) {
createCookie(name, "", -1)
}
}


var dragsort = ToolMan.dragsort()
var junkdrawer = ToolMan.junkdrawer()

window.onload = function() {

junkdrawer.restoreListOrder("phonetic3")

//junkdrawer.restoreListOrder("twolists1")
//junkdrawer.restoreListOrder("twolists2")

dragsort.makeListSortable(document.getElementById("phonetic3"),
    verticalOnly, saveOrder)


/*
dragsort.makeListSortable(document.getElementById("twolists1"),
    saveOrder)
dragsort.makeListSortable(document.getElementById("twolists2"),
    saveOrder)
*/
}

function verticalOnly(item) {
item.toolManDragGroup.verticalOnly()
}

function speak(id, what) {
var element = document.getElementById(id);
element.innerHTML = 'Clicked ' + what;
}

function saveOrder(item) {
var group = item.toolManDragGroup
var list = group.element.parentNode
var id = list.getAttribute("id")
if (id == null) return
group.register('dragend', function() {
  ToolMan.cookies().set("list-" + id, 
      junkdrawer.serializeList(list), 365)
})
}

//-->

非常感谢您的支持！

此致

Answer 1

如果您看到"value of the property 'getElementsByTagName' object is null or undefined"，则可能存在两个问题之一：

1) your script file is not properly loaded.
2) You are calling  'getElementsByTagName' inappropriately.

由于您尚未发布任何示例代码，因此任何人都很难为您的问题提供明确的答案。