Jquery Mobile Ajax ASP.NET控件 无刷新页面查询，添加，修改，删除
问题描述：
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());
}
}
}
}
答
The problem you have been encountered was also the same issue I have ever faced. Personally, if u want to make an Ajax request, you
may want to use a javascript framework. ASP.NET MVC ships wirh Jquery, so this example assuemes you have Jquery all ready to rock.
<button id="MyButton" />
<script type="text/javascript">
// This will bind a javascript event handler to the button(s) identified
// by the CSS selector #MyButton.
//
// You could also use the onclick event in the <input> element to
// say, call a javascript function... but this couples the HTML to
// the Javascript logic in a way that is less maintainable as things
// get more complex.
$("#MyButton").click(function () {
// $ is a global reference to JQuery. This instantiates and executes
// a JQuery request using the browsers native request object (different
// browsers do this slightly differently, this is why you need a
// framework like JQuery to write Javascript productively)
$.ajax(
// This is the URL back to an ASP.NET controller\action that will handle the event.
url: "{controller}/{action}",
// This is a callback function that will execute when the round trip completes.
success: function (response) {
alert("server response: " + response);
}
);
});
</script>
You can also visit to this page http://api.jquery.com/jQuery.ajax/
Goodluck.
答
目测Page_Load开头有问题，丢出异常或者session空。
答
这个你只能自己测了,你测测从后台向前台输值那块。一般这样的问题都是代码有异常造成的。你让人从头看到尾你的代码也没人知道错在哪里,
答
jquery mobile本身样式刷新就是一个比较麻烦的事情。如果和asp.net结合有些难度吧。
看看这里的解决方案
http://forum.jquery.com/topic/jquery-mobile-asp-net
答
能不能帮我写一个简单的例子，这个我研究了很多，我在网上找出了很多JS代码，大部分先刷新页面或者刷新HTML控件的代码。
答
如果你选择使用ASP.NET控件的话，就考虑使用AJAX.net;
要么就不要使用ASP.NET控件，像ddlSort_SelectedIndexChanged 这个完全可以使用AJAX实现；
答
我给你写个例子你看看 ： 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, //前端分页加载函数
});