2

Ok, I know this is embarassing since I've been working as a web developer with ASP.NET for months, but I used to starting with a largely prepackaged ASP.NET MVC site with routing, controllers, etc., and extending it from there. All I need to do right now is creating a single-page ASP.NET page that submits a form to the database.

I already have my table in the database

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

and I have a form in my HTML

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

and I have a function

  $('#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"); }
       });

I started in Visual Studio with a "ASP.NET Empty Web Application Visual C#" but I seriously don't know what type of file I need to right-click-Add to the project to handle this. All I'm trying to do is a simple insertion of the inputs field1 and field2 into their corresponding columns in the database. I can't find any resources of how to build an ASP.NET page from scratch and all the books I've ever read start with a template that has everything hooked up, so ...

Can someone give me a hint of how to connect the dots here?

3
  • Right click on the project --> add new item--> select WebForm
    – Bayeni
    Dec 8, 2015 at 7:00
  • @Bayeni Will this be my index page or will it handle the AJAX request? Dec 8, 2015 at 7:03
  • 1
    Yes it will be a default aspx page and will be able to handle AJAX. In the header section you can put your AJAX code. This will give you an idea stackoverflow.com/questions/18236634/…
    – Bayeni
    Dec 8, 2015 at 7:12

3 Answers 3

2

Here is the Code

web method must be public and static

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

Code Behind

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

    }
}
2

Create a WebMethod in cs file of the same page

[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"); }
       });
1

Given the template you're using, I think a controller from ASP.NET Web API will be more appropriate than WebMethods (which were introduced in .NET 3.5 and haven't changed since...).

Add an ApiController to your project:

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();
    }
}

You'll also need to create the input model:

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

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

The [DataContract] and [DataMember] attributes are from System.Runtime.Serialization. [Required] is from System.ComponentModel.DataAnnotations, and will work in conjunction with ModelState.IsValid() to validate input - you can add a bunch of other attributes too (or write your own!) to specify other rules than just required fields.

Depending on how you're planning to host this (in IIS or not) the way you hook up the dependency injection, routing etc is a little different, but the tutorials on asp.net are legio.

Good luck! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.