ران نشدن پروسه ذخیره کردن در بانک توسط Ajax

باسلام
بنده می خواهم عملیات CRUD را با Ajax بنویسم. هر چه تلاش می کنم هر مقاله ای می خوانم . هر کاری می کنم نمی شود . جواب نمی گیرم. از هر که بپرسم و در هر سایتی مطرح می کنم فایده ندارد.
مثلا برای پروسه ذخیره در بانک اطلاعاتی:
کد در کنترلر:

public ActionResult InsertData_5()

        {

            return View();

        }

 

        [HttpPost]

        public ActionResult InsertData_5(Personal objdata)

        {

            try

            {

                //SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrin  gs[connectionString].ToString());

                string constr = "Data Source=192.168.100.1;Initial Catalog=ContosoUniversity1;Persist Security Info=True;User ID=sa;Password=Abhar70";

                SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrin  gs[constr].ToString());

 

                con.Open();

                SqlCommand cmd = new SqlCommand("InsertData_SP", con);

                cmd.CommandType = CommandType.StoredProcedure;

                cmd.Parameters.AddWithValue("@FirstName", objdata.FirstName);

                cmd.Parameters.AddWithValue("@LastName", objdata.LastName);

                cmd.Parameters.AddWithValue("@Phone", objdata.Phone);

                cmd.ExecuteNonQuery();

                con.Close();

 

            }

            catch (Exception)

            {

 

                throw;

            }

            return View("InsertData_5");

        }

+++++++++++++++++
محتوای Store Procedure :

USE [ContosoUniversity1]

GO

/****** Object:  StoredProcedure [dbo].[InsertData_SP]    Script Date: 02/18/2020 15:04:34 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

-- Batch submitted through debugger: SQLQuery1.sql|0|0|C:\Users\Administrator\AppData\L  ocal\Temp\~vsF4A9.sql

ALTER PROCEDURE [dbo].[InsertData_SP]

(

@FirstName nvarchar(MAX),

@LastName nvarchar(MAX),

@Phone nvarchar(MAX)

)

 

AS

BEGIN

INSERT INTO Personal_tbl2

(

FirstName

,LastName

,Phone

)

Values

(

@FirstName

,@LastName

,@Phone

)

END

+++++++++++++++++
محتوای فایل ویوی InsertData_5.cshtml :

@model ContosoUniversity.Models.Personal

 

@using System.Web.Optimization;

 

@{

    ViewBag.Title = "InsertData_5";

}

 

<h2>Index</h2>

 <!-- سه خط زیر را اضافه کردیم تا بتوان با ایجکس کار کرد -->

<script src="~/Scripts/jquery-3.4.1.js"></script>

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

<script src=”-/Scripts/jquery.unobtrusive-ajax.min.js”></script>

 

 

<div id="divEmp">

 

    @using (Ajax.BeginForm("InsertData_5", "Post", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEmp" }))

    {

        <table>

            <tr>

                <td>FirstName</td>

                <td>

                    <input type="text" id="txtFirstName" />

                </td>

            </tr>

            <tr>

                <td>LastName</td>

                <td>

                    <input type="text" id="txtLastName" />

                </td>

            </tr>

            <tr>

                <td>Phone</td>

                <td>

                    <input type="text" id="txtPhone" />

                </td>

            </tr>

            <tr>

                <td>

                    <input type="button" id="btnsubmit" value="Save" />

                </td>

            </tr>

        </table>

 

        <script type="text/javascript">

            $(document).ready(function () {

                $("#btnsubmit").click(function () {

                    $.ajax(

                    {

                        type: "POST",

                        url: "Home/InsertData_5",

                        data: {

                            FirstName: $("#txtFirstName").val(),

                            LastName: $("#txtLastName").val(),

                            Phone: $("#txtPhone").val()

                        }

 

                    });

 

                });

            });

        </script>

    }

    </div>

++++++++++++++++
محتوای فایل Index.cshtml :
این فایل که با اجرای برنامه فراخوانی می شود و در اینجا دکمه ای قرار داده ایم که با فشردن آن پروسه ذخیره اطلاعات اجرا شود . اطلاعات را می گیرد ولی در بانک نمی ریزد.

@{ ViewBag.Title = "صفحه نخست";  }

<div class="jumbotron">

    <h1>aa</h1>

</div>

 

<div class="row">

  

    <div class="col-md-4">

        <div class="navbar-collapse collapse">

            <ul class="btn btn-default">

                <li>@Html.ActionLink("Ajax and SQL Server ذخیره رکورد 5 - با", "InsertData_5", "Home")</li>

            </ul>  

 

        </div>

    </div>

 

</div>

کجای کار اشکال دارد که ذخیره نمی کند؟
با تشکر

استفاده از Ajax.BeginForm قدیمی شده و این روزها کاربرد چندانی ندارد. بهتر است به جای آن از jQuery Ajax استفاده کنید که خیلی روان تر و راحت تر است.

سلام. یعنی مشکل عدم ذخیره اطلاعات در بانک به دلیل استفاده از

Ajax.BeginForm می باشد؟ قطغا این نیست.

سلام گویا جند هفتست درگیر این مساله شدید
یک مثال
ایتدا در کنترولر یک متد get جهت نمایش ویو و وهله سازی ویومدل میسازیم

 [HttpGet]



        public virtual ActionResult AddPersonnel()

        {

                             

            var model = new PersonnelViewModel ();

               return View( model);

        }

و متد post برای دریافت از سمت کلاینت

[HttpPost]

 [AjaxOnly]   //فقط در حالت اي‌جكس قابل دسترسي باشد

[ValidateAntiForgeryToken] 

        public virtual ActionResult AddPersonnel(PersonnelViewModel model)

        {

            if (!ModelState.IsValid)

            {

                ModelState.AddModelError("", @"خطاهای برنامه را بررسی کنید");

                return new JsonResult

                {

                    Data = new

                    {

                        errors = ModelState.Keys.SelectMany(k => ModelState[k].Errors).Select(x => x.ErrorMessage).ToArray(),

                        IsSuccess = false

                    },



                    JsonRequestBehavior = JsonRequestBehavior.AllowGet,

                    }

                };



            }



      var ctx= new AppDbCo0ntext();

ctx.Person.Add(new Person{Name=model.Name})



var i=ctx.saveChange();

      

            return new JsonResult

            {

                Data = new

                {



                    errors = ModelState.Keys.SelectMany(k => ModelState[k].Errors).Select(x => x.ErrorMessage).ToArray(),

                    IsSuccess = i>0





                },



                JsonRequestBehavior = JsonRequestBehavior.AllowGet,

                 }

            };



        }

یک اتربیوت بسازید برای حالت پست ajax

 [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]

    public sealed class AjaxOnlyAttribute : ActionFilterAttribute

    {

        public override void OnActionExecuting(ActionExecutingContext filterContext)

        {

            if (filterContext.HttpContext.Request.IsAjaxRequest()  )

            {

                base.OnActionExecuting(filterContext);

            }

            else

            {

                throw new InvalidOperationException("This operation can only be accessed via Ajax requests");

            }

        }

    }

سمت سرور تکمیل هست
حالا در سمت ویو
using ویومدل در سمت ویو فراموش نشود
@model PersonneViewModel

 @using (Html.BeginForm("AddPersonnel", "ControllerName", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "inputForm" }))

        {



            @Html.AntiForgeryToken()

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

          <div class="form-group">

               @Html.LabelFor(m => m.Name, new { @class = "control-label col-md-1 col-lg-1", @for = "Name" })

                <div class="col-md-2 col-lg-2">

                    <div class="input-group">

                        @Html.TextBoxFor(x => x.Name, new { @class = "form-control", @for = "Name", id = "Name" })

                    </div>

                </div>

                <div class="col-md-2 col-lg-2">

                    <button type="button" id="save" class="btn btn-success">

                        <i class="fa fa-save"></i> ثبت نام 

                    </button>

                </div>

            </div>

                }

متد جی کوئری هم اینجور بنویسید

  $("#save").click(function(e) {



               e.preventDefault();

               var button = $("#save");

               var $form = $("#inputForm");

               var validator = $form.data('validator');

               validator.settings.ignore = ':hidden:not(".multiselect")';

               validator.settings.ignore = ":hidden:not(select)";



               var validateForm = function(form) {

                   //فعال سازي دستي اعتبار سنجي جي‌كوئري

                   var val = form.validate();

                   val.form();

                   return val.valid();

               };

               //اگر فرم اعتبار سنجي نشده، اطلاعات آن ارسال نشود

               if (!validateForm($form)) return;





               button.attr('disabled', 'disabled');

               button.val("لطفا صبر کنید");

              



               $.ajax({

                   url: '@Url.Action("AddPersonnel", "ControllerName نام کنترولر")',

                   type: "POST",

                   data: $form.serialize(), // فيلدهاي فرم در اینجا ارسال میشود

                   cache: false,

                   complete: function(xhr, status) {

                       var data = xhr.responseText;

                       if (xhr.status == 403) {

                           window.location = options.loginUrl; 

                       } else if (status === 'error' || !data) {

                           $.each(data,

                             alert("برررسی خطا")



                       } else {



                           button.removeAttr('disabled');

                           button.val("ثبت در سیستم");

                           $('.validation-summary-errors').addClass('validation-summary-valid');

                           $('.validation-summary-errors').removeClass('validation-summary-errors');



                       }

                   },





                   success: function(data) {

                       if (data.IsSuccess) {





                           alert("ثبت شد");





                       } else {



                           if (data.errors != null) {

                               // show model state error

                               $.each(data.errors,

                                   function(idx, errorMessage) {

                                       alert(errorMessage);//بررسی خطا

                                   }

                               );





                           }



                       }



                   },

                   error: function(xhr, ajaxOptions, thrownError) {

                        alert("خطا");



                   }

               });

               $('.validation-summary-errors').addClass('validation-summary-valid');

               $('.validation-summary-errors').removeClass('validation-summary-errors');



               button.removeAttr('disabled');

               button.val("ثبت در سیستم");

           });