ASP.NET işlevi JavaScript'ten çağrılsın mı?

ASP.NET'te bir web sayfası yazıyorum. Bazı JavaScript kodum var ve bir tıklama etkinliğine sahip bir gönderme düğmem var.

ASP'de oluşturduğum bir yöntemi JavaScript'in tıklama etkinliğiyle çağırmak mümkün müdür?

Peki, Ajax veya başka bir yol kullanarak yapmak istemiyorsanız ve normal bir ASP.NET geri gönderiminin olmasını istiyorsanız, bunu nasıl yapacağınız (başka bir kitaplık kullanmadan):

Yine de biraz zor ... :)

ben. Kod dosyanızda (C # ve .NET 2.0 veya daha yenisini kullandığınızı varsayarak) aşağıdaki arabirimi aşağıdaki gibi ekleyin:

public partial class Default : System.Web.UI.Page, IPostBackEventHandler{}

ii. (Kullanarak bu eklemek gerekir Tab- Tab: kod dosyanıza bu fonksiyonu)

public void RaisePostBackEvent(string eventArgument) { }

iii. JavaScript'teki onclick etkinliğinize aşağıdaki kodu yazın:

var pageId = '<%=  Page.ClientID %>';
__doPostBack(pageId, argumentString);

Bu, kod dosyanızdaki 'eventArgument' ile 'RaisePostBackEvent' yöntemini JavaScript'ten geçirdiğiniz 'argumentString' olarak çağırır. Şimdi istediğiniz başka bir etkinliği arayabilirsiniz.

PS: Bu 'alt çizgi-alt çizgi-doPostBack' ... Ve, bu sırayla boşluk olmamalı ... Bir şekilde WMD alt çizgilere yazmamı ve bir karakter izlememe izin vermiyor!

__doPostBack()Yöntem iyi çalışıyor.

Başka bir çözüm (çok hackish), işaretlemenize görünmez bir ASP düğmesi eklemek ve bir JavaScript yöntemiyle tıklamaktır.

<div style="display: none;">
   <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" />
</div>

JavaScript'inizden, ClientID'yi kullanarak düğmeye referans alın ve üzerindeki .click () yöntemini çağırın .

var button = document.getElementById(/* button client id */);

button.click();

Microsoft AJAX kütüphanesi Bunun olacak. Ayrıca .NET işlevlerini çalıştırmak için kendi aspx (temel olarak) komut dosyalarınızı çağırmak için AJAX kullanmayı içeren kendi çözümünüzü de oluşturabilirsiniz.

Microsoft AJAX kütüphanesini öneririm. Kurulduktan ve referans alındıktan sonra, sayfa yüklemenize veya başlamanıza bir satır eklemeniz yeterlidir:

Ajax.Utility.RegisterTypeForAjax(GetType(YOURPAGECLASSNAME))

Sonra aşağıdaki gibi şeyler yapabilirsiniz:

<Ajax.AjaxMethod()> _
Public Function Get5() AS Integer
    Return 5
End Function

Ardından, sayfanızda şu şekilde arayabilirsiniz:

PageClassName.Get5(javascriptCallbackFunction);

İşlev çağrınızın son parametresi, AJAX isteği döndürüldüğünde yürütülecek javascript geri arama işlevi olmalıdır.

.NET Ajax PageMethods kullanarak eşzamansız olarak yapabilirsiniz. Buraya veya buraya bakın .

Ben blog yazı Ajax (jQuery) kullanarak ASP.NET sayfasında SQL Server veritabanı verileri almak ve göstermek için nasıl yardımcı olacağını düşünüyorum.

JavaScript Kodu

<script src="http://code.jquery.com/jquery-3.3.1.js" />
<script language="javascript" type="text/javascript">

    function GetCompanies() {
        $("#UpdatePanel").html("<div style='text-align:center; background-color:yellow; border:1px solid red; padding:3px; width:200px'>Please Wait...</div>");
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCompanies",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: OnSuccess,
            error: OnError
        });
    }

    function OnSuccess(data) {
        var TableContent = "<table border='0'>" +
                                "<tr>" +
                                    "<td>Rank</td>" +
                                    "<td>Company Name</td>" +
                                    "<td>Revenue</td>" +
                                    "<td>Industry</td>" +
                                "</tr>";
        for (var i = 0; i < data.d.length; i++) {
            TableContent += "<tr>" +
                                    "<td>"+ data.d[i].Rank +"</td>" +
                                    "<td>"+data.d[i].CompanyName+"</td>" +
                                    "<td>"+data.d[i].Revenue+"</td>" +
                                    "<td>"+data.d[i].Industry+"</td>" +
                                "</tr>";
        }
        TableContent += "</table>";

        $("#UpdatePanel").html(TableContent);
    }

    function OnError(data) {

    }
</script>

ASP.NET Sunucu Tarafı İşlevi

[WebMethod]
[ScriptMethod(ResponseFormat= ResponseFormat.Json)]
public static List<TopCompany> GetCompanies()
{
    System.Threading.Thread.Sleep(5000);
    List<TopCompany> allCompany = new List<TopCompany>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        allCompany = dc.TopCompanies.ToList();
    }
    return allCompany;
}

Statik, güçlü yazılan programlama benim için her zaman çok doğal hissettirdi, bu yüzden ilk önce uygulamalarım için web tabanlı ön uçlar oluşturmak zorunda kaldığımda JavaScript öğrenmeye (HTML ve CSS'den bahsetmiyorum) karşı koydum. Saf C # kodlamak sürece, sadece gerçekleştirmek ve OnLoad olay eylem için bir sayfaya yönlendirmek gibi bir şey yapmak için her şeyi yaparım.

Bununla birlikte, web siteleriyle çalışacaksanız, açık fikirli olmanız ve daha web odaklı düşünmeye başlamanız gerektiğini göreceksiniz (yani, sunucuda istemci tarafı şeyler yapmaya çalışmayın ve bunun tersi) . Ben ASP.NET webforms ve hala (yanı sıra kullanmak seviyorum MVC ), ama İşleri basitleştirmek için çalışıyoruz ve gelenleri şaşırtmak ve aslında zaman zaman işler daha zor hale sona erebilir istemci ve sunucu ayrılmasını gizleyerek diyecekler .

Tavsiyem bazı temel JavaScript'leri öğrenmek (etkinlikleri kaydetme, DOM nesnelerini alma, CSS'yi değiştirme, vb.) Ve web programlamayı çok daha keyifli bulacaksınız (daha kolay bahsetmiyorum). Bir çok insan farklı Ajax kütüphanelerinden bahsetti, ama gerçek Ajax örnekleri görmedim, işte burada. (Ajax'ı bilmiyorsanız, tüm sayfayı yeniden yüklemeden veya tam bir geri gönderme yapmadan içeriği yenilemek (veya senaryoda sunucu tarafı eylemi gerçekleştirmek) için eşzamansız bir HTTP isteği yapmaktır.

İstemci Tarafı:

<script type="text/javascript">
var xmlhttp = new XMLHttpRequest(); // Create object that will make the request
xmlhttp.open("GET", "http://example.org/api/service", "true"); // configure object (method, URL, async)
xmlhttp.send(); // Send request

xmlhttp.onstatereadychange = function() { // Register a function to run when the state changes, if the request has finished and the stats code is 200 (OK). Write result to <p>
    if (xmlhttp.readyState == 4 && xmlhttp.statsCode == 200) {
          document.getElementById("resultText").innerHTML = xmlhttp.responseText;
    }
};
</script>

Bu kadar. Ad yanıltıcı olsa da sonuç düz metin veya JSON'da da olabilir, ancak XML ile sınırlı değilsiniz. jQuery , Ajax çağrıları yapmak için daha basit bir arayüz sağlar (diğer JavaScript görevlerini basitleştirmenin yanı sıra).

İstek bir HTTP-POST veya HTTP-GET olabilir ve bir web sayfasında olması gerekmez, ancak RESTful API gibi HTTP isteklerini dinleyen herhangi bir hizmette yayınlayabilirsiniz . ASP.NET MVC 4 Web API'sı, isteği çok kolay bir şekilde ele almak için sunucu tarafı web hizmetini kurmanızı sağlar. Ancak birçok kişi, web formları projesine API denetleyicileri ekleyebileceğinizi ve bu gibi Ajax çağrılarını işlemek için kullanabileceğinizi bilmiyor.

Sunucu Tarafı:

public class DataController : ApiController
{
    public HttpResponseMessage<string[]> Get()
    {
        HttpResponseMessage<string[]> response = new HttpResponseMessage<string[]>(
            Repository.Get(true),
            new MediaTypeHeaderValue("application/json")
        );

        return response;
    }
}

Global.asax

Sonra HTTP yolunu Global.asax dosyanıza kaydetmeniz yeterlidir, böylece ASP.NET isteği nasıl yönlendireceğini bilir.

void Application_Start(object sender, EventArgs e)
{
    RouteTable.Routes.MapHttpRoute("Service", "api/{controller}/{id}");
}

AJAX ve Denetleyiciler ile, herhangi bir sunucu tarafı işlemi gerçekleştirmek için istediğiniz zaman sunucuya geri dönebilirsiniz. Bu iki yumruk, hem JavaScript'in esnekliğini hem de C # / ASP.NET'in gücünü sağlar ve sitenizi ziyaret eden kişilere daha iyi bir genel deneyim sunar. Hiçbir şeyden ödün vermeden her iki dünyanın da en iyisini elde edersiniz.

Referanslar

• Ajax ,
• jQuery Ajax ,
• Web Formlarında Denetleyici

Microsoft AJAX kitaplığı bunu başaracaktır. Ayrıca .NET işlevlerini çalıştırmak için kendi aspx (temel olarak) komut dosyalarınızı çağırmak için AJAX kullanmayı içeren kendi çözümünüzü de oluşturabilirsiniz.

Bu, Michael Schwarz adında bir MVP yazılmış AjaxPro kütüphanesi . Bu kütüphane Microsoft tarafından yazılmamıştı.

AjaxPro yaygın olarak kullandım ve sunucuya basit geri aramalar için tavsiye ederim çok güzel bir kütüphane. Hiçbir sorun olmadan Ajax Microsoft sürümü ile iyi çalışır. Ancak, Microsoft'un Ajax'ı ne kadar kolay hale getirdiğiyle, sadece gerçekten gerekli olduğunda kullanacağımı not ediyorum. Sadece bir güncelleme paneline bırakarak Microsoft'tan aldığınız gerçekten karmaşık bazı işlevler yapmak çok fazla JavaScript gerektirir.

Sunucu tarafı olay işleyicisini (örneğin Button'ın click olayını) tetiklemek istiyorsanız her iki senaryo için de (yani senkron / asenkron) çok kolaydır.

Bir denetimin olay işleyicisini tetiklemek için: Sayfanıza bir ScriptManager eklediyseniz, 1. adımı atlayın.

1. Aşağıdakileri sayfanızın istemci komut dosyası bölümüne ekleyin

   //<![CDATA[
   var theForm = document.forms['form1'];
   if (!theForm) {
       theForm = document.form1;
   }
   function __doPostBack(eventTarget, eventArgument) {
       if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
           theForm.__EVENTTARGET.value = eventTarget;
           theForm.__EVENTARGUMENT.value = eventArgument;
           theForm.submit();
       }
   }
   //]]>

   2. Kontrolünüz için sunucu tarafı olay işleyicisi yazın

      korumalı void btnSayHello_Click (nesne gönderen, EventArgs e) {Label1.Text = "Merhaba Dünya ..."; }

   3. Sunucu tarafı olay işleyicisini çağırmak için istemci işlevi ekleme

      işlev SayHello () {__doPostBack ("btnSayHello", ""); }

Yukarıdaki koddaki "btnSayHello" yı kontrolünüzün istemci kimliğiyle değiştirin.

Bunu yaptığınızda, kontrolünüz bir güncelleme panelinin içindeyse, sayfa yenilenmez. Bu çok kolay.

Söylenecek başka bir şey şudur: ClientIDMode özelliğiyle tanımlanan kimlik oluşturma ilkenize bağlı olduğundan istemci kimliğine dikkat edin.

Bunu uygulamaya çalışıyorum ama doğru çalışmıyor. Sayfa geri gönderiyor, ancak kodum yürütülmüyor. Sayfada hata ayıklama, RaisePostBackEvent asla tetiklenir. Farklı yaptığım bir şey, bunu bir aspx sayfası yerine bir kullanıcı denetiminde yapıyorum.

Başka biri Merk gibiyse ve bunun gelmesinde sorun yaşıyorsam, bir çözümüm var:

Bir kullanıcı denetiminiz olduğunda, üst sayfada PostBackEventHandler'ı da oluşturmanız gerekir. Ve sonra doğrudan arayarak kullanıcı denetiminin PostBackEventHandler'ı çağırabilirsiniz. Aşağıya bakınız:

public void RaisePostBackEvent(string _arg)
{
    UserControlID.RaisePostBackEvent(_arg);
}

Burada UserControlID, işaretleme üzerinde iç içe yerleştirdiğinizde üst sayfaya kullanıcı denetimini verdiğiniz kimliktir.

Not: Sadece o kullanıcı kontrolüne ait yöntemleri doğrudan çağırabilirsiniz (bu durumda, yalnızca üst sayfada RaisePostBackEvent işleyicisine ihtiyacınız olacaktır):

public void RaisePostBackEvent(string _arg)
{
    UserControlID.method1();
    UserControlID.method2();
}

Yaygın yöntemleriniz için bir web hizmeti oluşturmak isteyebilirsiniz.
Aramak istediğiniz işlevlerin üzerine bir WebMethodAttribute eklemeniz yeterlidir, hepsi bu.
Tüm ortak öğelerinizle birlikte bir web hizmetine sahip olmak da sistemin bakımını kolaylaştırır.

__DoPostBack işlevi sayfada oluşturulmamışsa, bunu zorlamak için bir kontrol eklemeniz gerekir:

<asp:Button ID="btnJavascript" runat="server" UseSubmitBehavior="false" />

ilgili olarak:

var button = document.getElementById(/* Button client id */);

button.click();

Şöyle olmalı:

var button = document.getElementById('<%=formID.ClientID%>');

Burada formID, .aspx dosyasındaki ASP.NET denetim kimliğidir.

Beklenen nesne hatası alıyorsanız bu satırı sayfa yüklemesine ekleyin.

ClientScript.GetPostBackEventReference(this, "");

PageMethods.Your C# method NameC # yöntemlerine veya VB.NET yöntemlerine JavaScript'e erişmek için kullanabilirsiniz .

Bunu dene:

if(!ClientScript.IsStartupScriptRegistered("window"))
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "window", "pop();", true);
}

Veya bu

Response.Write("<script>alert('Hello World');</script>");

JavaScript işlevlerini çağırmak için düğmenin OnClientClick özelliğini kullanın ...

JavaScript kodunuza şu satırı ekleyerek de alabilirsiniz:

document.getElementById('<%=btnName.ClientID%>').click()

Bence bu çok kolay!

Lütfen şunu deneyin:

<%= Page.ClientScript.GetPostBackEventReference(ddlVoucherType, String.Empty) %>;

ddlVoucherType, seçilen dizin değişikliğinin çağıracağı bir denetimdir ... Ve bu denetimin seçilen dizin değişikliğine herhangi bir işlev koyabilirsiniz.

Bunu başarmanın en basit ve en iyi yolu, onmouseup()JavaScript etkinliğini kullanmak yerineonclick()

Bu şekilde, tıkladıktan sonra JavaScript'i tetiklersiniz ve ASP OnClick()olayını engellemez .

Bunu denemek ve böylece jQuery kullanırken bir Asp.Net yöntemi çalıştırabilirsiniz.

1. JQuery kodunuzda sayfa yönlendirmesi yapın

   window.location = "Page.aspx?key=1";

2. Sonra Sayfa Yükleme'de bir Sorgu Dizesi kullanın

   protected void Page_Load(object sender, EventArgs e)
   {
       if (Request.QueryString["key"] != null)
       {
           string key= Request.QueryString["key"];
           if (key=="1")
           {
               // Some code
           }
       }
   }

Ekstra kod çalıştırmaya gerek yok

Bu cevap benim için bir esinti gibi çalışıyor teşekkürler çapraz tarayıcı:

__DoPostBack () yöntemi iyi çalışıyor.

Başka bir çözüm (çok hackish), işaretlemenize görünmez bir ASP düğmesi eklemek ve bir JavaScript yöntemiyle tıklamaktır.

<div style="display: none;"> 
    <asp:Button runat="server" ... OnClick="ButtonClickHandlerMethod" /> 
</div> 

JavaScript'inizden, ClientID'yi kullanarak düğmeye başvuruyu alın ve ardından üzerindeki .Click () yöntemini çağırın:

var button = document.getElementByID(/* button client id */); 

button.Click(); 

blockquote