AJAX using in Asp.Net MVC

Hi guys.. this session i will give an idea on how to post data using ajax.

Lets Take a look.


1> First we Create a controller name ContactController for an example.
      Action name will be Index.
      we will pass two parameter , same variable name as  in Ajax  we have called for data retrieve.



2>Now we Create a View for Index Action.Then we will create Controls  (textbox) for insert   value 
    and Save button.



As in Code

<table>
        <tr> <td>Name</td>  <td><input type="text" class="form-control" id="name" name="name" /></td> </tr>
        <tr><td>Phone</td>  <td><input type="text" class="form-control" id="phone" name="phone" /></td></tr>
        <tr><td></td><td><input type="button" class="btn btn-default"  id="saveme" name="saveme" value="Save"/></td></tr>
</table>


3> Now we create Ajax for post the data to Controller.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>  
   
    $(document).ready(function ()
    {
       $("#saveme").click(function ()
       {
             $.ajax({
                       type: "POST", //HTTP POST Method
                       url: "@Url.Action("Index", "Contact", new { area = "Admin" })", // Controller/View
                       data: { //Passing data
                               names: $("#name").val(), //Reading text box values using Jquery                   
                               phones: $("#phone").val()
                             }
                   });
       });
    });

</script>



4>Now Run the project , add the value and press the save button.
now you visualize that in names "Jhone" value  and put the cursor on other parameter phones  and there value will come "+022-01-889......"


5>Put the break point [httpPost] in index action so that value will visible in parameter.




     
    

Share this

Previous
Next Post »