jQuery Ajaxを使用してフォームデータをASP.Netの別のcsファイルに実装する方法

Question

フォームデータを別のCSファイルに送信するためのフォームを実装する方法。データベースを更新します。ここ Here is the form and the coding

<form id="form1" runat="server" action="./update.aspx" class="col-md-10" > 


    <asp:Table ID="GridView1" class="nav-justified" runat="server" AutoGenerateColumns="false" Height="628px" Width="763px"> 
     <asp:TableRow> 
      <asp:TableCell> 
       <h4> Car name:</h4> 

      </asp:TableCell> 
      <asp:TableCell> 
       <asp:TextBox ID="newid" runat="server" ReadOnly="true" Width="50px" CssClass="form-control"></asp:TextBox> 
       <asp:TextBox ID="carmake" runat="server" Width="301px" CssClass="form-control"></asp:TextBox> 

      </asp:TableCell> 
     </asp:TableRow> 
     <asp:TableRow> 
      <asp:TableCell> 
       <h4> Car model:</h4> 
      </asp:TableCell> 
      <asp:TableCell> 
       <asp:TextBox ID="carmodel" runat="server" Width="301px" CssClass="form-control"></asp:TextBox> 
      </asp:TableCell> 
     </asp:TableRow> 
     <asp:TableRow> 
      <asp:TableCell> 
       <h4> Price: </h4> 
      </asp:TableCell> 
      <asp:TableCell> 
       <asp:TextBox ID="price" runat="server" Width="301px" CssClass="form-control"></asp:TextBox> 
      </asp:TableCell> 
     </asp:TableRow> 
     <asp:TableRow> 
      <asp:TableCell> 
       <h4> Discounted Price If: </h4> 
      </asp:TableCell> 
      <asp:TableCell> 
       <asp:TextBox ID="d_price" runat="server" Width="301px" CssClass="form-control"/> 
      </asp:TableCell></asp:TableRow><asp:TableRow> 
      <asp:TableCell> <h4>Car image (Type url)</h4></asp:TableCell><asp:TableCell> 
       <asp:TextBox CssClass="form-control" ID="image" runat="server" />Just Location 
      </asp:TableCell></asp:TableRow><asp:TableRow> 
      <asp:TableCell><h4>Avilability</h4></asp:TableCell><asp:TableCell> 
       <asp:TextBox CssClass="form-control" ID="avail" runat="server" />Just Location 
      </asp:TableCell></asp:TableRow><asp:TableRow> 
      <asp:TableCell><h4>Quantity</h4></asp:TableCell><asp:TableCell> 
       <asp:TextBox CssClass="form-control" ID="quantity" runat="server" />Just Location 
      </asp:TableCell></asp:TableRow><asp:TableRow> 
      <asp:TableCell> 
       <h4>Long description </h4> 
      </asp:TableCell><asp:TableCell> 

       <asp:TextBox ID="details" runat="server" Width="295px" CssClass="form-control" Height="81px" TextMode="MultiLine"></asp:TextBox> 
      </asp:TableCell></asp:TableRow><asp:TableRow> 
      <asp:TableCell> 
       <h4>Year </h4> 
      </asp:TableCell><asp:TableCell> 
       <asp:TextBox ID="year" runat="server" Width="295px" CssClass="form-control" ></asp:TextBox> 
      </asp:TableCell></asp:TableRow><asp:TableRow> 
      <asp:TableCell> 
       <h4>Special Discounted(0 0r 1) </h4> 
      </asp:TableCell><asp:TableCell> 
       <asp:TextBox ID="special" runat="server" Width="295px" CssClass="form-control" ></asp:TextBox> 
      </asp:TableCell></asp:TableRow></asp:Table><asp:Button ID="button" runat="server" Cssclass="btn btn-primary btn-lg btn-block" Text="Update the car" /> 


<br /> 
    <br /> 

    </form> 
<!-- <script type="text/javascript"> 
    $("#form1").submit(
     function() 
     { 
     $.ajax 
     ({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "update.aspx/AcceptFormData", 
      data: "{'funcParam':'"+$('#form1').serialize()+"'}", 
      dataType: "json", 
      success: function(msg) 
      { 
       var msgFromASPXFunction = msg.d 
       alert(data); 
      } 
     }); 
     } 
    ); 
    }); 
</script> --> 

CSコード

using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Data; 
using System.Configuration; 
using MySql.Data.MySqlClient; 

public partial class AdminGroup_Update : System.Web.UI.Page 
{ 
    [System.Web.Services.WebMethod] 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     string constor = ConfigurationManager.ConnectionStrings["constr"].ConnectionString; 
     MySqlConnection conn = new MySqlConnection(constor); 
     var id = Request.QueryString["newid"]; 
     var carmake = Request.QueryString["carmake"]; 
     var carmodel = Request.QueryString["carmodel"]; 
     var price = Request.QueryString["price"]; 
     var d_price = Request.QueryString["d_price"]; 
     var image = Request.QueryString["image"]; 
     var quantity = Request.QueryString["qnty"]; 
     var avail = Request.QueryString["avlb"]; 
     var details = Request.QueryString["details"]; 
     var year = Request.QueryString["year"]; 
     var special = Request.QueryString["special"]; 

     //var id = Request.QueryString["id"]; 
     string sql = "Update product SET car_make=@carmake, car_model=@carmodel, UnitPrice=@price, Discountprice=@d_price, image=@image, Quantity=@quantity, availability=@avail, details=@details, year=@year, special=@special WHERE id= @id"; 
var cmd = new MySqlCommand(sql, conn); 
     using (MySqlDataAdapter sda = new MySqlDataAdapter()) 
     { 


conn.Open(); 
      cmd.CommandType = CommandType.Text; 
      var ex = cmd.ExecuteNonQuery(); 

      if (ex == 1) 
      { 
       Response.Redirect("AdminList.aspx"); 
      } 
      else 
      { 
       Response.Write("Error"); 
      } 
      conn.Close(); 

     } 
    } 

は、これらのは、私はちょうどそれがすべてのデータを取得し、データベース

を更新することができるべきである別のページにポストにフォームデータを望んでコーディングされています

Answer 1

すでに要求

$.ajax 
    ({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "update.aspx/AcceptFormData", 
     data: "{'funcParam':'"+$('#form1').serialize()+"'}", 
     dataType: "json", 
     success: function(msg) 
     { 
      var msgFromASPXFunction = msg.d 
      alert(data); 
     } 
    }); 

Create a new method in AcceptFormData in the class - AdminGroup_Update and modify the url in the javascript 
    from url: "update.aspx/AcceptFormData", 
    to url: "AdminGroup_Update/AcceptFormData", 

Make sure to check the input you are passing from the JQuery and the Inputs received at the server side(AdminGroup_Update class and AcceptFormData method)