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, Jul 17 '14 at 08:00
Mr. Aravinth, my issue is data inserting null in the database. the text values coming null from view to ActionMethod in controller — Datha, Jul 17 '14 at 08:13
Can you show the controller action code? Also, you should take a look at the `@Ajax.BeginForm()` method: http://www.hanselman.com/blog/ASPNETMVCPreview4UsingAjaxAndAjaxForm.aspx — devqon, Jul 17 '14 at 09: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, Jul 17 '14 at 09:44
I want to insert data in button click even with ajax and jquery — Datha, Jul 17 '14 at 13:13

score 0 · Answer 1 · edited May 23 '17 at 11:59

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 '17 at 11:59

Community

1
1

answered Jul 17 '14 at 09:48

Aravinth Kannan

535
6
8

i will go through the link and let u inform – Datha Jul 17 '14 at 11:06

score 0 · Accepted Answer · answered Jul 17 '14 at 11:06

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

Hi Razack, i place the code which you given even though it is not working for me. Thank you. — Datha, Jul 17 '14 at 11:55
in jquery, when i click on button alert messages also not coming — Datha, Jul 17 '14 at 12:18
Then you just try with firebug Net option to debug the XMLHttpRequest details. — Razack, Jul 21 '14 at 04:18
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. — Razack, Jul 25 '14 at 09:12

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

2 Answers2