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

[armm1388]

باسلام
بنده می خواهم عملیات 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 استفاده کنید که خیلی روان تر و راحت تر است.

[armm1388]

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

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

[ali_md110]

سلام گویا جند هفتست درگیر این مساله شدید
یک مثال
ایتدا در کنترولر یک متد 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("ثبت در سیستم");

           });