ران نشدن پروسه ذخیره کردن در بانک توسط 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("ثبت در سیستم");
});