mercredi 15 juin 2016

How to use ajax call to insert data without postback in mvc?

I added model using ado.net entity datamodel. I want to insert data in database table without postback so that I used ajax and jquery but am not getting output. I am new to mvc and ajax.

This is my view file:

@model ajaxJquery.Models.register

@{
    ViewBag.Title = "Index";
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#Register").click(function () {
            //var studentid = $("#studnt_id").val();
            var Name = $("#name").val();

            var Qualification = $("#qualification").val();

            var Branch = $("#branch").val();

            var Gender = $("#gender").val();

            var State = $("#state").val();

            var LoginId = $("#login_id").val();

            var Password = $("#password").val();


                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    url: '@Url.Action("Index","Home")',

                    data: "{'name':'" + Name + "','studentId':'" + studentid + "','qualification':'" + Qualification + "','branch':'" + Branch + "','gender':'" + Gender + "','state':'" + State + "','loginid':'" + LoginId + "','password':'" + Password + "'}",
                    success: function (data) {
                        if (data == true) {

                            $("#divresult").text("recorded successfully");
                        }
                        else {

                            $("#divresult").text("couldnot save record");
                        }
                    },
                    error: function () {
                        //Show error message(if occured)
                        $('#divresult').text("Error: ");
                    }



                });

                return false;


            });



    });



    </script>
<h2>Index</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>register</legend>

        @*<div class="editor-label">
            @Html.LabelFor(model => model.studnt_id)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.studnt_id)
            @Html.ValidationMessageFor(model => model.studnt_id)
        </div>*@

        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.qualification)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.qualification)
            @Html.ValidationMessageFor(model => model.qualification)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.branch)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.branch)
            @Html.ValidationMessageFor(model => model.branch)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.gender)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.gender)
            @Html.ValidationMessageFor(model => model.gender)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.state)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.state)
            @Html.ValidationMessageFor(model => model.state)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.login_id)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.login_id)
            @Html.ValidationMessageFor(model => model.login_id)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.password)
            @Html.ValidationMessageFor(model => model.password)
        </div>

        <p>
            <input type="submit" value="Create"  id="Register"/>
        </p>


    </fieldset>
}
<div id="divresult"></div>
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

And this is my controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ajaxJquery.Models;

namespace ajaxJquery.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {

            return View();
        }
        [HttpPost]
        public ActionResult Index( string name, string qualification, string branch, string gender, string state, string loginid, string Password)
        {
            ajaxcontext db = new ajaxcontext();
            register reg = new register();
            //reg.studnt_id = studentId;
            reg.name = name;
            reg.qualification = qualification;
            reg.branch = branch;
            reg.gender = gender;
            reg.state = state;
            reg.login_id = loginid;
            reg.password = Password;
            db.registers.Add(reg);
            db.SaveChanges();
            return View();
        }

    }
}

Aucun commentaire:

Enregistrer un commentaire