Submit a form using AJAX JQuery and ASP.Net with 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");
    }

}

score 4 · Answer 1 · edited May 23 '17 at 12:27

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:

score 0 · Answer 2 · answered Dec 22 '11 at 23:31

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;
}

Submit a form using AJAX JQuery and ASP.Net with Master Pages

2 Answers2