CODEWITHSUNDEEP
c#asp.netajaxasmx
StudentRik
StudentRik

Reputation: 1049

Update Database with Ajax and Linq

I have been trying to update using Ajax and Linq, but the Ajax call never gets to the webmethod of the code behind. I have changed the user class to match the database and made the user object the same names and still never gets to the code behind. I wonder if this is the preferred way?

Front page:

<div class="row">
    <asp:TextBox ID="txt_name" runat="server" ClientIDMode="Static"/>
</div>
<div class="row">
     <asp:TextBox ID="txt_pass" runat="server" ClientIDMode="Static"/>
</div>
<div class="row">
     <asp:DropDownList ID="ddl_item" runat="server" ClientIDMode="Static">
            <asp:ListItem Text="item 1" Value="Item1" Selected="True"/>
            <asp:ListItem Text="item 2" Value="Item2" />
            <asp:ListItem Text="item 3" Value="Item3" />
           </asp:DropDownList>
</div>
<div class="row">
    <asp:Button runat="server" ID="btn_submit" ClientIDMode="Static" Text="GO"/>
</div>

userUpload.js

$(function() {
$('#btn_submit').on('click', function() {
    var user = {};
    user.name = $('#txt_name').val();
    user.Pass = $('#txt_pass').val();
    user.Item = $('#ddl_item').val();
    $.ajax({
        type: "POST",
        url: "~/uploadUserAjax/SaveUser",
        data: '{user: ' + JSON.stringify(user) + '}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            alert("user has been added");
        }
    });
    return false;
});
});

uploadUserAjax.aspx.cs

[WebMethod]
    [ScriptMethod]
    public static void SaveUser(WebformTest.Models.User user)
    {
        using (var db = new dbDataContext())
        {
            var insert = new User
            {
                name = user.name,
                pass = user.pass,
                Item = user.Item
            };
            db.Users.InsertOnSubmit(insert);
            db.SubmitChanges();
        }
    }

User class file:

 public class User
{
    public string name { get; set; }
    public string pass { get; set; }
    public string Item { get; set; }
}

my database file names are the same as my User class file.

I have changed these a few times and after doing lots of googling it says to keep your class file name the same as your js object file names, I am using the correct class file when passing in my setters for the values to be entered into the database. Wondered how i could check that it goes to the webmethod on the code behind. I haver all the correct using statements referenced.

Upvotes: 1

Views: 1650

Answers (1)

Mihai Dinculescu
Mihai Dinculescu

Reputation: 20033

Your problem is most likely caused by:

url: "~/uploadUserAjax/SaveUser"

jQuery doesn't know of ~, only ASP.NET does.

You could have easily detected this issue by using the browser's included developer tools. You can check the network and/or console tabs for transport and/or JS errors. These developer tools are available in all modern browsers (Chrome, FF, IE8+) and you can open them by pressing F12.

Additionally you should debug the ASP.NET website itself using Visual Studio's integrated debugging tools. This way you can test if the WebMethod is entered.

In jQuery you are using $('#btn_submit') but asp.net generates another ID for that button. Consider replacing the button with a normal HTML one. Or just use $('#<%=btn_submit.ClientID %>').

Upvotes: 3

Related Questions