Data inserting using jquery, AJAX in ASP.NET MVC4?

Question

I am trying to insert data to the database. For that I am using ajax and jquery, but the values from textbox are coming null and inserting the same in database. Here is the code of html markup and jQuery button click event handling:

    @using (@Html.BeginForm("VewResult", "States" ))
     {
       <table >
          <tr>
             <td>State ID</td> <td > @Html.TextAreaFor(m => m.StateID, new { ID = "txtStateid",     style = "width:150px;height:20px" }) </td>
          </tr>
           <tr>
             <td>District ID</td> <td> @Html.TextAreaFor(m => m.DistrictID, new { ID = "txtdistrictid",   style = "width:150px;height:20px" }) </td>
         </tr>
         <tr>
             <td>State Name</td> <td> @Html.TextAreaFor(m => m.StateName, new { ID = "txtStatendame",    style = "width:150px;height:20px" }) </td>
         </tr>
         <tr>
             <td colspan="2"> <input type="Submit" id="btnAjax" name="btnAjax" value="Insert It"></td>
         </tr>           
     </table>

    <div id="result"></div>
    }

     @section Scripts{
       <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type ="text/javascript">
        $(document).ready(function () {

            $('#btnAjax').click(function () {


                alert($('#txtStateid').val());
                var stateid = $('#txtStateid').val();
                var districtid = $('#txtdistrictid').val();
                var statename = $('#txtStatendame').val();

                if (stateid != "" && districtid != "" & statename != "") {
                    $.ajax({
                        url: '/States/VewResult',
                        contentType: 'application/html; charset=utf-8',
                        data: { stid: stateid, districid: districtid, stname: statename },
                        type: 'POST',
                        dataType: 'html',
                        success(function (result) {
                            $('#result').html('Inserted Successfully');
                        })

                    });

                    error(function (xhr, status) {
                        alert(status);
                    })



                }
                else {
                    alert('Enter Stateid,districtid,statename');
                }

            });
        });
        </script>
}

Seems your question is not complete.. You have not mentioned what is the problem you are facing.. Please elaborate further... — Aravinth Kannan
– Aravinth Kannan, Commented Jul 17, 2014 at 8:00
Mr. Aravinth, my issue is data inserting null in the database. the text values coming null from view to ActionMethod in controller — Datha
– Datha, Commented Jul 17, 2014 at 8:13
Can you show the controller action code? Also, you should take a look at the @Ajax.BeginForm() method: hanselman.com/blog/ASPNETMVCPreview4UsingAjaxAndAjaxForm.aspx — devqon
– devqon, Commented Jul 17, 2014 at 9:17
@Datha, Since you are sending the data in HTML format, null value are considered as string. Hence it is stored as Null. You can explore these two options 1. Uses Ajax Form Method as mentioned above, 2. Pass the data in JSON format. — Aravinth Kannan
– Aravinth Kannan, Commented Jul 17, 2014 at 9:44
I want to insert data in button click even with ajax and jquery — Datha
– Datha, Commented Jul 17, 2014 at 13:13

Razack · Accepted Answer · 2014-07-17 11:06:25Z

0

Please try below code.

 <table >
  <tr>
     <td>State ID</td> <td > @Html.TextAreaFor(m => m.StateID, new { style = "width:150px;height:20px" }) </td>
  </tr>
   <tr>
     <td>District ID</td> <td> @Html.TextAreaFor(m => m.DistrictID, new {  style = "width:150px;height:20px" }) </td>
 </tr>
 <tr>
     <td>State Name</td> <td> @Html.TextAreaFor(m => m.StateName, new {   style = "width:150px;height:20px" }) </td>
 </tr>
 <tr>
     <td colspan="2"> <input type="Submit" id="btnAjax" name="btnAjax" value="Insert It"></td>
 </tr>           
 </table>

<div id="result"></div>


 @section Scripts{
 <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  <script type ="text/javascript">
$(document).ready(function () {

    $('#btnAjax').click(function () {


        alert($('#txtStateid').val());
        var stateid = $('#StateID').val();
        var districtid = $('#DistrictID').val();
        var statename = $('#StateName').val();

        if (stateid != "" && districtid != "" & statename != "") {
            $.ajax({
                url: '/States/VewResult',                  
                data: { stid: stateid, districid: districtid, stname: statename },
                type: 'POST',
                dataType: 'html',
                success(function (result) {
                    $('#result').html('Inserted Successfully');
                })

            });

            error(function (xhr, status) {
                alert(status);
            })



        }
        else {
            alert('Enter Stateid,districtid,statename');
        }

    });
});
</script>

There is no need of form tag is required if you are calling as ajax. Or instead of jQuery ajax you can use Ajax.Beginform() . For this please refer

And your action will be

Public ActionResult VewResult(string stid,string districid,string stname)
{
    //Your body
    return;
}

answered Jul 17, 2014 at 11:06

Razack

9503 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Datha Over a year ago

Hi Razack, i place the code which you given even though it is not working for me. Thank you.

Datha Over a year ago

in jquery, when i click on button alert messages also not coming

Razack Over a year ago

Then you just try with firebug Net option to debug the XMLHttpRequest details.

Razack Over a year ago

you just put simple alert message in document.ready() function. If it is not showing, that means your jquery library is not available in your page or page section.

Community · Accepted Answer · 2017-05-23 11:59:49Z

0

Your are sending the data in HTML format to the Controller Action. Instead pass it as JSON. This link would be helpful to implement it.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jul 17, 2014 at 9:48

Aravinth Kannan

5356 silver badges8 bronze badges

1 Comment

Datha Over a year ago

i will go through the link and let u inform

Collectives™ on Stack Overflow

Data inserting using jquery, AJAX in ASP.NET MVC4?

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related