2 parhattursun parhattursun 于 2015.07.04 15:02 提问

Jquery Mobile Ajax ASP.NET控件 无刷新页面查询,添加,修改,删除 1000C

Jquery Mobile Ajax 技术用ASP.NET控件怎么实现无刷新页面查询,添加,修改,删除功能?
现在刷新一次才能执行JavaScript代码,否则没反应,有时候样式也没了。
我写的代码如下:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <div data-role="page" data-quicklinks="true">
            <div data-role="header"><h1>标题</h1></div>

            <div role="main">
            <ul data-role="listview">
                <li><a href="TestSql.aspx?key=1">AAA</a></li>
                <li><a href="TestSql.aspx?key=2">BBB</a></li>
            </ul>
            </div>

            <div data-role="footer" data-position="fixed"><h4>©2013-2015</h4></div>
        </div>
    </form>
</body>
</html>

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestSql.aspx.cs" Inherits="TestSql" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

            <div data-role="page">

            <div data-role="header"><h1>标题</h1><a href="Default.aspx" data-icon="arrow-r"><% =GetCityName() %></a></div>

            <div id="tabs" data-role="tabs">
              <div data-role="navbar">
                <ul>
                  <li><a href="#one" data-ajax="false">第一</a></li>
                  <li><a href="#two" data-ajax="false">第二</a></li>
                </ul>
              </div>
              <div class="ui-body-d ui-content" id="one">
                <asp:DropDownList data-native-menu="false" ID="ddlSort" runat="server" OnSelectedIndexChanged="ddlSort_SelectedIndexChanged"></asp:DropDownList>
                <asp:DropDownList data-native-menu="false" ID="ddlCity" runat="server"></asp:DropDownList>
                <asp:Button ID="btnSearch" runat="server" Text="查询" CssClass="ui-btn-active" />
              </div>
              <div id="two">
                <ul data-role="listview" data-inset="true">
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                    <li><a href="#">E</a></li>
                </ul>
              </div>
            </div>

            <div data-role="footer" data-position="fixed"><h4>©2013-2015</h4></div>

            </div>

            </ContentTemplate>
        </asp:UpdatePanel>

    </form>
</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.Data;

public partial class TestSql : System.Web.UI.Page
{
    SqlEditForOleDb ed = new SqlEditForOleDb();

    string CityNumber = string.Empty;

    int StationSortIndex = 0;
    string StationSortName = string.Empty;

    int StationIndex = 0;
    string StationName = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {

        try
        {
            CityNumber = Request.QueryString["key"].ToString();
            Session["CityID"] = CityNumber;
            if (CityNumber == string.Empty)
            {
                Response.Redirect("Default.aspx");
            }
        }
        catch
        {
            Response.Redirect("Default.aspx");
        }

        ddlSort.AutoPostBack = true;
        ddlCity.AutoPostBack = true;

        if (!IsPostBack)
        {
            ddlSort.Items.Add("A");
            ddlSort.Items.Add("B");
            ddlSort.Items.Add("C");
            ddlSort.Items.Add("D");
            ddlSort.Items.Add("E");
            ddlCity.Enabled = false;
        }
        else if (ddlSort.SelectedIndex == 0)
        {
            ddlCity.Enabled = false;
        }

        StationSortName = ddlSort.Text;
        StationSortIndex = ddlSort.SelectedIndex;
        StationName = ddlCity.Text;
        StationIndex = ddlCity.SelectedIndex;
    }

    public string GetCityName()
    {
        string str = string.Empty;
        try
        {
            str = ed.Search("SELECT 名称 FROM 城市 WHERE ID = " + CityNumber).Rows[0][0].ToString();
        }
        catch
        { }
        return str;
    }

    public string GetCityID()
    {
        string str = string.Empty;
        try
        {
            str = Session["CityID"].ToString();
        }
        catch
        { }
        return str;
    }

    protected void ddlSort_SelectedIndexChanged(object sender, EventArgs e)
    {
        ddlCity.Items.Clear();

        if (ddlSort.SelectedIndex == 0)
        {
            ddlCity.Enabled = false;
        }
        else
        {
            ddlCity.Enabled = true;
            DataTable dtStation = new DataTable();
            dtStation = ed.Search("SELECT DISTINCT 城市.名称 FROM 城市 WHERE 城市.名称 like '" + StationSortName + "%'");

            for (int i = 0; i < dtStation.Rows.Count; i++)
            {
                ddlCity.Items.Add(dtStation.Rows[i][0].ToString());
            }
        }
    }

}

8个回答

caozhy
caozhy   Ds   Rxr 2015.07.04 15:22

目测Page_Load开头有问题,丢出异常或者session空。

u010919083
u010919083   2016.07.20 11:06

我给你写个例子你看看 : var test = JSON.stringify(info);
$.ajax({
type: "Post",
url: "ShowData.aspx/GetRateInfo",
data: "{'Str':'" + test + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var jsonstr = data.d;
var json = JSON.parse(jsonstr);

            var ja = "{\"total\":803,\"rows\":\"" + jsonstr + "\"}";
            //json = JSON.parse(ja);
            //json = ja;
            $('#dg').datagrid({
                data:json,
                pageNumber:1,  
                pagination: true,//分页控件   
                rownumbers: true,//显示行号  
                loader: myLoader, //前端分页加载函数  
            });
u012216727
u012216727   Ds   Rxr 2015.07.04 15:44

这个你只能自己测了,你测测从后台向前台输值那块。一般这样的问题都是代码有异常造成的。你让人从头看到尾你的代码也没人知道错在哪里,

danielinbiti
danielinbiti   Ds   Rxr 2015.07.04 17:30

jquery mobile本身样式刷新就是一个比较麻烦的事情。如果和asp.net结合有些难度吧。
看看这里的解决方案
http://forum.jquery.com/topic/jquery-mobile-asp-net

lzp_lrp
lzp_lrp   Ds   Rxr 2015.07.04 17:33

参考一下这个

Asp.net利用JQuery AJAX实现无刷新

http://www.cnblogs.com/heqichang/archive/2010/09/21/1832814.html

lzp_lrp
lzp_lrp   Ds   Rxr 2015.07.04 17:36

或者看看这个是否有帮助

ASP+Ajax+Jquery无刷新留言本
http://www.mycodes.net/26/5151.htm

parhattursun
parhattursun   2015.07.04 18:09

能不能帮我写一个简单的例子,这个我研究了很多,我在网上找出了很多JS代码,大部分先刷新页面或者刷新HTML控件的代码。

testcs_dn
testcs_dn   Rxr 2015.11.22 12:07

如果你选择使用ASP.NET控件的话,就考虑使用AJAX.net;
要么就不要使用ASP.NET控件,像ddlSort_SelectedIndexChanged 这个完全可以使用AJAX实现;

Csdn user default icon
上传中...
上传图片
插入图片