Question

好的，我知道这是令人尴尬的，因为我几个月来一直在使用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空Web应用程序Visual C＃”开始，但我真的不知道我需要右键单击什么类型的文件 - 添加到项目来处理这个问题。我要做的就是将输入field1和field2简单地插入到数据库中的相应列中。我找不到任何关于如何从头开始构建ASP.NET页面的资源，我读过的所有书籍都是从一个连接了所有内容的模板开始的，所以......

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

Answer 1

在同一页面的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"); }
       });

Answer 2

鉴于您正在使用的模板，我认为ASP.NET Web API中的控制器将比WebMethods更适合（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中或不在IIS中）挂接依赖注入的方式，路由等有点不同，但asp.net上的教程是legio。< / p> 祝你好运！：）

Answer 3

以下是代码

网络方法必须是公开的和静态的

<!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)
    {

    }
}

如何创建将信息提交到数据库的单页ASP.NET应用程序？

3 个答案: