我想将用户名和密码从html文件传递到（webservice）asmx文件。 我应该使用什么？

Question

<form class="login" id="frmLogIn" method="post" runat="server">
    <p class="title"><i class="fa fa-user-o" style="font-size:20px;color:brown"></i> Log in </p>
      <input type="text" placeholder="Username" id="txtusername" runat="server"/>
    <i class="fa fa-user"></i>
   <input type="password" placeholder="Password" id="txtpassword"runat="server"/>
    <i class="fa fa-key"></i>

    <a href="#">Forgot your password?</a>
    <button>
      <i class="spinner"></i>
      <span class="state" id="btnLogIn" runat="server" onclick="btnLogIn_Click">Log in</span>

    </button>

  </form>

I want to pass the username and password from html file to (webservice )file.but i don't know how because i'm newbie to asp.net. If i sink the html into the asp file the html interface will change. i want to use c-sharp for back end what should i use?.

Answer 1

Your html file

 $(document).ready(function () {
            var validateUsername = $('#validateUsername');
            $('#username').keyup(function () {
                var t = this;
                if (this.value != this.lastValue) {
                    if (this.timer) clearTimeout(this.timer);
                    validateUsername.removeClass('error').html('<img src="images/ajax-loader.gif" height="16" width="16" /> checking availability...');
                    this.timer = setTimeout(function () {
                        $.ajax({
                            contentType: "application/json; charset=utf-8",
                            url: 'ValidateUser.asmx/GetUsernameAvailable',
                            data: '{username: "'+t.value + '"}',
                            dataType: 'json',
                            type: "post",
                            success: function (j) {
                                validateUsername.html('I willl have my logic in here for changing the html on the label to reflect success or failure!');
                            }
                        });
                    }, 200);

                    this.lastValue = this.value;

Asmx File

<%@ WebService Language="C#" Class="ValidateUser" %>
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.Odbc;
using System.Web.Script.Serialization;
using System.Web.Script.Services; 
using UserSite.DataClasses;

[WebService(Description = "Web services to query Username availability.", Namespace = "http://localhost")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ValidateUser: System.Web.Services.WebService
{

    [WebMethod(Description = "Gets the availability of a username.")]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetUsernameAvailable(string username)
    {

        if (username == null)
        {
            username = "";
        }
        DbaseExecSpWithReturnValue Sproc = new DbaseExecSpWithReturnValue();
        Sproc.SetSp("sp_CheckUsernameAvailable");
        Sproc.AddParam(1);
        Sproc.AddParam("Username", SqlDbType.Char, username, 20);
        int RetVal = Sproc.Execute();
        Sproc.Close();
        if (RetVal == 0)
        {
            return @"{""available"": false}";
        }
        else
        {
            return @"{""available"": true}";
        }

    }
}


public bool GetUsernameAvailable(string username)
{
   ...
   return (RetVal == 0) ? false : true;
}

Ajax Above would return boolean value and you call access it in your call function as jd For example,

...
$ajax({
 ...
 success: function (j) {
    alert(j.d); // will alert either true or false
 }
...