在aspx中使用jQuery .get（不使用单独的HTML）

问题描述 投票：0回答：1

我正在asp.net中试验jquery和json，以便更好地了解并在项目中实现它。

使用单独的html页面时，代码可以正常工作。但是当我尝试在单个aspx页面中实现它时，后端处理失败。

以下是预览：enter image description here

以下是我的代码：

在HTML页面中：

  <!DOCTYPE html>
<html>
<head runat="server">
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var textBoxes = $('input[type="text"]');
            textBoxes.keyup(function () {
                var helpDiv = $(this).attr('id');
                var textInBox = $(this).val();
                $.get('jQuery_Ajax_json', { HelpTextKey: textInBox }, function (response) {
                    $('#' + helpDiv + 'HelpDiv').html(response.Text);
                }, 'json');
            });

        });
    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>First Name</td>
            <td><input id="firstName" type="text" /></td>
            <td><div id="firstNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input id="lastName" type="text" /></td>
            <td><div id="lastNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input id="email" type="text" /></td>
            <td><div id="emailHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Income</td>
            <td><input id="income" type="text" /></td>
            <td><div id="incomeHelpDiv"></div></td>
        </tr>
    </table>
</body>
</html>

在aspx文件中：

<%@ Page Language="C#" AutoEventWireup="true"
         CodeBehind="jQuery_Ajax_json.aspx.cs" Inherits="WebApplication1.jQuery_Ajax_json" %>

在aspx.cs文件中：

using System;
using System.Web.Script.Serialization;

namespace WebApplication1
{
    public partial class jQuery_Ajax_json : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            JavaScriptSerializer js = new JavaScriptSerializer();
            string JSONString = js.Serialize(GetHelpTextByKey(Request["HelpTextKey"]));

            Response.Write(JSONString);
        }

        private HelpText GetHelpTextByKey(string key)
        {
            HelpText helpText = new HelpText();

                helpText.Key = key;
                helpText.Text = key.ToUpper();

            return helpText;
        }
    }

    public class HelpText
    {
        public string Key { get; set; }
        public string Text { get; set; }
    }
}

我现在正试图完全消除HTML页面，只使用aspx和aspx.cs.如果你能指出我正确的方向，我感激不尽。

这是我的看法：

aspx文件：

    <!DOCTYPE html>

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_test.aspx.cs" Inherits="folder_manage_system.jQuery_test" %>


<html>
<head runat="server">
    <title> </title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var textBoxes = $('input[type="text"]');
            textBoxes.keyup(function () {
                var helpDiv = $(this).attr('id');
                var textInBox = $(this).val();
                $.get('jQuery_test', { HelpTextKey: textInBox }, function (response) {
                    $('#' + helpDiv + 'HelpDiv').html(response.Text);
                }, 'json');
            });

        });
    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>First Name</td>
            <td><input id="firstName" type="text" /></td>
            <td><div id="firstNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input id="lastName" type="text" /></td>
            <td><div id="lastNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input id="email" type="text" /></td>
            <td><div id="emailHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Income</td>
            <td><input id="income" type="text" /></td>
            <td><div id="incomeHelpDiv"></div></td>
        </tr>
    </table>
</body>
</html>






    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.Script.Serialization;

    namespace folder_manage_system
    {
        public partial class jQuery_test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                JavaScriptSerializer js = new JavaScriptSerializer();
                string JSONString = js.Serialize(GetHelpTextByKey(Request["HelpTextKey"]));

                Response.Write(JSONString);
            }

            private HelpText GetHelpTextByKey(string key)
            {
                HelpText helpText = new HelpText();
                if (key != null)
                {
                    helpText.Key = key;
                    helpText.Text = key.ToUpper();
                }
                return helpText;
            }
        }
        public class HelpText
        {
            public string Key { get; set; }
            public string Text { get; set; }
        }
    }

结果预览：

enter image description here

jquery asp.net json
1个回答
1
投票

在页面声明后移动<!DOCTYPE html>：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_test.aspx.cs" Inherits="folder_manage_system.jQuery_test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.