Вызов функции jquery из кода в asp.net, похоже, не работает - PullRequest
Новая
       5

Вызов функции jquery из кода в asp.net, похоже, не работает

10 голосов
/ 02 июля 2010

Я вызываю функцию jquery после вставки записи в базу данных ... 

ScriptManager.RegisterClientScriptBlock(LbOk, typeof(LinkButton), "json",
                             "topBar('Successfully Inserted');", true);

Я включил это в свою главную страницу для выполнения функции jquery после обратной передачи, 

<script type="text/javascript">
    function load() {
 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
      }
    function EndRequestHandler()
       {
           topBar(message);
     }


 function topBar(message) {
    alert(a);
    var alert = $('<div id="alert">' + message + '</div>');
    $(document.body).append(alert);
    var $alert = $('#alert');
    if ($alert.length) {
        var alerttimer = window.setTimeout(function() {
            $alert.trigger('click');
        }, 5000);
        $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function() {
            window.clearTimeout(alerttimer);
            $alert.animate({ height: '0' }, 200);
        });
    }
}
    </script>

<body onload="load();">

Но, похоже, это не работает ... Любое предложение ...

Ответы [ 4 ]

4 голосов
/ 04 июля 2010

Вот полный рабочий пример: 

<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" %>
<script type="text/C#" runat="server">
    protected void BtnUpdate_Click(object sender, EventArgs e)
    {
        // when the button is clicked invoke the topBar function
        // Notice the HtmlEncode to make sure you are properly escaping strings
        ScriptManager.RegisterStartupScript(
            this, 
            GetType(), 
            "key", 
            string.Format(
                "topBar({0});", 
                Server.HtmlEncode("Successfully Inserted")
            ), 
            true
        );
    }    
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        function topBar(message) {
            var alert = $('<div id="alert">' + message + '</div>');
            $(document.body).append(alert);
            var $alert = $('#alert');
            if ($alert.length) {
                var alerttimer = window.setTimeout(function () {
                    $alert.trigger('click');
                }, 5000);
                $alert.animate({ height: $alert.css('line-height') || '50px' }, 200).click(function () {
                    window.clearTimeout(alerttimer);
                    $alert.animate({ height: '0' }, 200);
                });
            }
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">

    <asp:ScriptManager ID="scm" runat="server" />

    <asp:UpdatePanel ID="up" runat="server">
        <ContentTemplate>
            <!-- 
                 You could have some other server side controls 
                 that get updated here 
            -->
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger 
                ControlID="BtnUpdate" 
                EventName="Click" 
            />
        </Triggers>
    </asp:UpdatePanel>

    <asp:LinkButton 
        ID="BtnUpdate" 
        runat="server" 
        Text="Update" 
        OnClick="BtnUpdate_Click" 
    />

    </form>
</body>
</html>
3 голосов
/ 09 июля 2010

Это не дает прямого ответа на ваш вопрос, но больше предназначено для передачи другой техники для вызова методов страницы без использования панелей обновления, но напрямую из jQuery.

Просто украсьте свой метод страницы (в частичнойкласс codebehind) вроде так (он должен быть статическим): 

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json, XmlSerializeString=true)]
public static bool UpdateDatabase(string param1 , string param2)
{
    // perform the database logic here...

    return true;
}

Затем вы можете вызвать этот метод страницы прямо из метода jQuery $ .ajax: 

$("#somebutton").click(function() {

  $.ajax({
    type: "POST",
    url: "PageName.aspx/UpdateDatabase",
    data: "{ param1: 'somevalue', param2: 'somevalue' }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
      if (data.d) {
        topBar("success!");
      } else {
        topBar("fail");
      }
    }
  });

});

Это оченьпросто и намного чище, что пытается зарегистрировать скрипты.Нет необходимости создавать веб-сервис.

Это отличная статья:

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

3 голосов
/ 04 июля 2010

В Chrome и Firefox единственной проблемой, с которой я столкнулся, было var alert, совпадающее с именем alert(). 

    function topBar(message) {
        alert(message);
        var alertDiv = $('<div id="alert">' + message + '</div>');
        $(document.body).append(alertDiv);
        var $alert = $('#alert');

Возможно, ваш тег body незагружается во время выполнения скрипта, что будет означать, что ссылка $(document.body) будет пустой - jquery молча не сможет добавить div оповещения.В любом случае, вам никогда не помешает заключить ваши звонки в событие $(document).ready: 

    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "json",
                         "$(document).ready(function() { topBar('Successfully Inserted');});", true);
3 голосов
/ 04 июля 2010

Предполагая, что ваш программный код работает во время обновления UpdatePanel, может ли быть плохое взаимодействие между вашим обработчиком EndRequest и вашей регистрацией программного кода?topBar () должен вызываться дважды, один раз с вашим сообщением «успешно вставлено», а затем один раз с неопределенным параметром в EndRequest (если только переменная сообщения не определена где-то, чего мы здесь не видим).

Также сохраняйтеИмейте ввиду, что $('#alert') может вернуть более одного предмета.Если topBar () вызывается более одного раза, это, вероятно, имеет место.

Как насчет того, чтобы сделать что-то подобное, для начала, чтобы смягчить этот непреднамеренный побочный эффект: 

function topBar(message) {
  var $alert = $('<div/>');

  $alert.text(message);

  $alert.click(function () {
    $(this).slideUp(200);
  });

  $(body).append($alert);

  // Doesn't hurt anything to re-slideUp it if it's already
  //  hidden, and that keeps this simple.
  setTimeout(function () { $alert.slideUp(200) }, 5000);
}

Этоне устраняет проблему с EndRequest и Register * Script, которые выполняют topBar (), но это должно удерживать их от конфликтов, чтобы вы могли лучше видеть, что происходит.

Попробуйте и дайте нам знать, если этоменяет вещи.

...