چگونه در asp.net با jquery داده را در جدول sql ثبت کنیم
شنبه 20 دی 1393در این مقاله یک دید کلی در مورد اینکه چگونه در asp.net می توان داده ها را با jquery در جدول درج کنیم خواهیم داشت و خواهید دید که این عمل به سادگی انجام میپذیرد.
در این مقاله این عمل را با استفاده از ajax در asp.net انجام خواهیم داد ابتدا یک جدول در sql به نام test میسازیم و دو فیلد نام و ایمیل را نیز برای این جدول در نظر میگیریم.
حال به پروژه خود یک صفحه با نام Default.aspx (روی پروژه راست کلیک کرده و گزینه Add New Item و سپس New Page را انتخاب میکنیم و نام را وارد میکنیم و رو ی add کلیک میکنیم) اضافه میکنیم.
حال در قسمت سورس کد زیر را وارد کنید:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AutoComplete Box with jQuery</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Default.aspx/InsertMethod',
data: "{'Name':'" + document.getElementById('txtUserName').value + "', 'Email':'" + document.getElementById('txtEmail').value + "'}",
async: false,
success: function (response) {
$('#txtUserName').val('');
$('#txtEmail').val('');
alert("Record Has been Saved in Database");
},
error: function ()
{ console.log('there is some error'); }
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<div class="ui-widget">
<label for="tbAuto">
Enter UserName:
</label>
<asp:TextBox ID="txtUserName" runat="server" ClientIDMode="Static" Width="202px"></asp:TextBox>
<br />
<br />
Email: <asp:TextBox ID="txtEmail" runat="server" ClientIDMode="Static" Width="210px"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" ClientIDMode="Static" />
</div>
</div>
</form>
</body>
</html>
حالا با فشردن کلید f7 به قسمت کد صفحه رفته و کد زیر را وارد کنید :
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string InsertMethod(string Name, string Email)
{
SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=TestDB;User ID=sa;Password=Micr0s0ft");
{
SqlCommand cmd = new SqlCommand("Insert into TestTable values('" + Name + "', '" + Email + "')", con);
{
con.Open();
cmd.ExecuteNonQuery();
return "True";
}
}
}
}
حالا برنامه را اجرا کنید و نام و ایمیل را وارد کنید و بر روی دکمه button کلیک کنید اطلاعات در جدول ذخیره میشود و یک پیغام در پایین صفحه سمت راست مبنی بر رکورد در جدول ذخیره شد ظاهرمی شود که میتوانید برای اطمینان sql را باز کرده و رکورد اضافه شده را مشاهده کنید یکی از مزایای استفاده از این روش این است که برای اضافه کردن یک رکورد به جدول خود نیازی به پست بک صفحه نیست.
- ASP.net
- 3k بازدید
- 4 تشکر