如何创建一个向数据库提交信息的单页ASP.NET应用程序

本文关键字：提交 信息 单页 ASP 应用程序 NET 数据库 一个 何创建 创建 | 更新日期: 2023-09-27 18:26:01

好吧，我知道这很尴尬，因为我已经在ASP.NET做了几个月的web开发人员，但我习惯于从一个基本上预先打包的带有路由、控制器等的ASP.NET MVC网站开始，并从那里扩展它。我现在所需要做的就是创建一个single-page ASP.NET页面，该页面向数据库提交表单。

我的表已经在数据库中了

 CREATE TABLE stuff ( field1 VARCHAR (100), field2 VARCHAR (100) );

我的HTML 中有一个表格

<form id="myform">
    <input type="text" name="field1"/>
    <input type="text" name="field2"/>
    <input type="submit"/>
</form>

我有一个功能

  $('#myform input[type="submit"]').click(function(){
       var that = this;
       $.ajax({
           url: '????',
           method: 'POST', 
           data: new FormData($(that).closest('form')[0]),
           success: function() { alert("Well, at least this succeeded"); }
       });

我从Visual Studio开始使用"ASP.NET Empty Web Application Visual C#"，但我真的不知道需要什么类型的文件才能右键单击"添加到项目"来处理此问题。我所要做的只是将输入field1和field2简单地插入到数据库中相应的列中。我找不到任何关于如何从头开始构建ASP.NET页面的资源，我读过的所有书籍都是从一个连接了所有内容的模板开始的，所以。。。

有人能给我一个如何连接这里的点的提示吗？

如何创建一个向数据库提交信息的单页ASP.NET应用程序

这是代码

web方法必须是公共和静态

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">  
    <title></title>  
     <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>  
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>  
    <link rel="Stylesheet" href="StyleSheet.css" />  
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Button1').click(function (e) {
                alert('Data Saved')
                var commentsCorrespondence;
                var ddlST = $('#ddlStatus option:selected').val();// get dropdown selected value in ddlST variable
                var chkbox = $('#ChkValue').val();// get checkbox value in chkbox
                var Date = $('#txtDate').val();//get textbox value in date variable
                $.ajax({
                    type: "POST",
                    url: "AutoCompleteCity.aspx/SaveData", //this is the url from which you call your web method ! in my case its /Default.aspx and method name is SaveData
                    data: "{'status': '" + ddlST + "','chkBoxValue': '" + chkbox + "','DueDate': '" + Date + "'}",// These are the method parameters in my case 'status' , 'chkBoxValue' and 'DueDate' are parameters
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: alert('Data Saved'),
                    failure: function (response) {
                        Message = response.d;
                    }
                });
                return false;
            });
        });
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
        <asp:DropDownList ID="ddlStatus" runat="server"></asp:DropDownList>
        <asp:CheckBox ID="ChkValue" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />  
        <br />  
        <br />  
    </div>  
    </form>  
</body>  
</html>

代码隐藏

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class AutoCompleteCity : System.Web.UI.Page
{
    [WebMethod]
    public static void SaveData(string status, string chkBoxValue, string DueDate)
    {
        List<string> Emp = new List<string>();
        string query = string.Format("Insert Into [Table] Values ({0},{1},{2})", status, chkBoxValue, DueDate);
        using (SqlConnection con = new SqlConnection("your Connection string"))
        {
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                con.Open();
                cmd.ExecuteNonQuery();
            }
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
    }
}

在同一页面的cs文件中创建WebMethod

[WebMethod]
Public static bool FxName(string field1, string field2){
// Do the code here for saving
}

in ajax
$('#myform input[type="submit"]').click(function(){
       var that = this;
       $.ajax({
           url: 'pagename.aspx/FxName',
           method: 'POST',
           contentType: 'application/json; charset=utf-8',
           dataType: 'json',
           data: {"field1": valueoftextbox,"field2":valueoftextbox},
           success: function() { alert("Well, at least this succeeded"); }
       });

考虑到您正在使用的模板，我认为ASP.NET Web API中的控制器将比WebMethods（在.NET 3.5中引入，自…以来一直没有更改）更合适

将ApiController添加到您的项目中：

public class FooController : ApiController
{
    [HttpPost]
    public IHttpActionResult PostForm(FormInput input)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }
        // You'll have to create the repository class as well as inject it
        // into your controller. If you don't know what I'm talking about,
        // google "dependency injection asp.net webapi" for more info.
        _repository.SaveFormDataToDb(input.Field1, input.Field2);
        return Ok();
    }
}

您还需要创建输入模型：

[DataContract]
public class FormInput
{
    [DataMember]
    [Required]
    public string Field1 { get; set; }
    [DataMember]
    [Required]
    public string Field1 { get; set; }
}

[DataContract]和[DataMember]属性来自System.Runtime.Serialization。[Required]来自System.ComponentModel.DataAnnotations，将与ModelState.IsValid()一起工作以验证输入-您也可以添加一堆其他属性（或编写自己的属性！）来指定除必需字段之外的其他规则。

根据您计划如何托管（是否在IIS中），连接依赖项注入、路由等的方式有点不同，但asp.net上的教程是合法的。

祝你好运！：）

相关文章：