使用AJAX JQuery和ASP.Net与Master Pages提交表单

Question

I wrote a search program using lucene.net. The search method returns a string containing an html table with the search results. This part works, but I wanted the ability to submit the search without reloading the entire page... So I searched and found that this could be done using AJAX. For whatever reason I cannot get it to work.

I'm not throwing an error. The contents of "Search.aspx" get returned, but it seems like the Submit Method never executes.

Search.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<script type="text/javascript">
    $(function () {    

        $(".sBM").click(function () {

            dataString = "valve"

            $.ajax({
                type: "POST",
                url: "Search.aspx/Submit",
                //data: dataString,
                data: dataString,
                contentType: "application/html; charset=utf-8",
                dataType: "html",
                success: function (msg) {
                    $("#searchResults").text(msg);
                   alert(msg);
                },
                error: function (xhr, ErrorText, thrownError) {
                    $("#searchResults").text("Error" + xhr.status);
                }

            });
            return false;
        });

    }); 

</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

 <div class="sHead"> 

    <div id="search_form" class="sSBM">
    <form name="search" action=""> 
        <fieldset>  
            <label for="name" id="rpe_label">RPE Search</label>  
            <input type="text" name="query" value="" class="sTM" />
            <input type="submit" name="submit" class="sBM" id="submit_btn" value="" />               
      </fieldset>  
    </form>  
    </div>  

 </div>   

   <div id="searchResults" ></div>     
</asp:Content>

CodeFile:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

public partial class Search : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]

    public static string Submit(string query) 
    {
        SearchDoc seek = new SearchDoc();
        return seek.Search("valve");
    }

}

Answer 1

You must have the ScriptModule configured in your web.config to call static page methods like that. If you are running an ASP.NET 3.5 project in Visual Studio using the built-in development web server, make sure this is in your web.config, inside system.web/httpModules :

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

If you are using IIS then make sure this is in your web.config, inside system.webServer/httpModules :

<remove name="ScriptModule"/>
<add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

If you don't have the right configuration, it is common that a post to Search.aspx/Submit will just return the full page and your web method will not even be called in that case. The role of the ScriptModule is to map this request to the web method and return its return value as the response.

---

If that does't work (you already have the right configuration), then try to set your request contentType to application/json and perhaps also change the way you pass the query parameter to your web method (also in JSON format):

data: { "query": dataString }, 
contentType: "application/json; charset=utf-8",
dataType: "json",

See also these similar questions:

• Call ASP.NET PageMethod/WebMethod with jQuery - returns whole page
• Jquery AJAX with ASP.NET WebMethod Returning Entire Page

Answer 2

Well I recent work with a site in ASP.NET, I add a Webservice to my ASP.NET project, and use this snippet in jQuery:

        var info = {};
        info.Ticket = ticket;
        info.idCategoria = $('#hidCategoria').val();

        var DTO = { 'info': info };

        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "MyWebService.asmx/MyTargetFunction",
            data: JSON.stringify(DTO),
            dataType: "json",
            success: function (data) {
                if (data.d != null) {
                    // My Logic
                }
            },
            error: function (data) {
                alert('Error!');
            }
        });

My Webservice are a function like this:

    [WebMethod]
public ResponseInfo CrearTicket(CreateTicketInfo info) {
    ResponseInfo i = new ResponseInfo();
    _info = info;

    try
    {
        // Logic Here
    }
    catch (Exception e)
    {
        i.ResponseCode = ContactoConstants.GENERICERROR;
        i.Message = e.Message;
    }

    return i;
}