ورود

View Full Version : پاس دادن مدل از ویو به اکشن با اژاکس



z.gitaro
چهارشنبه 16 بهمن 1392, 12:55 عصر
چطوری میشه با استفاده از اژاکس یک مدل از ویو رو به اکشن فرستاد؟

z.gitaro
پنج شنبه 17 بهمن 1392, 07:51 صبح
خواهش میکنم یکی جواب بده

ali_autumnal
پنج شنبه 17 بهمن 1392, 10:00 صبح
فرض کنیم تابعی در کنترلر مربوطه به فرم زیر داریم:


[HttpPost]
public ActionResult Index(ModelName model)
{
return Content("true");
}


در View مربوطه جهت ارسال دیتای مورد نظر به این اکشن به شکل زیر می نویسیم:

$(function(){

$('#btn').click(function () {
var url = '@Url.Action("Action name", "Controller")';
var data = {
Title: $('#TextBoxId').val(),
NewsId: '@Model.NewsId',
};
$.post(url, data, function (data) {

if (data == "true") {
alert("دیتای مورد نظر با موفقیت ارسال شد")
}
});
});
});

z.gitaro
پنج شنبه 17 بهمن 1392, 10:47 صبح
اکشنی که تو کنترلر نوشتم:
public ActionResult InvoiceDetail(int? id, InvoiceDetailVM InvoiceDetailVM)
{
using (var db = new BussinessManagmentEntities())
{
if (ModelState.IsValid)
{
Tbl_InvoiceDetail tblInvoiceDetail = new Tbl_InvoiceDetail();
InvoiceDetailVM.InvoicesID = lastinvoiceId;
Mapper.Map(InvoiceDetailVM, tblInvoiceDetail);
db.Tbl_InvoiceDetail.Add(tblInvoiceDetail);
db.SaveChanges();
}
return View(InvoiceDetailVM);
}
}
کد ویو :
@model BusinessManagement.ViewModel.InvoiceDetailVM
<table class="tbl">
<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Subject)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Subject)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Subject)
</td>
</tr>

<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Number)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Number)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Number)
</td>
</tr>

<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Price)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Price)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Price)
</td>
</tr>


<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Description)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Description)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Description)
</td>
</tr>

<tr>
<td></td>
<td>
<input id="btn" class="button" type="submit" value="افزودن"/>
</td>
<td></td>
</tr>

</table>

کد شمارو هم به اینصورت نوشتم اما کار نمیکنه
$(function () {

$('#btn').click(function () {
var url = '@Url.Action("InvoiceDetail", "Invoice")';
var data = {
Subject: $('#Subject').val(),
Number: $('#Number').val(),
Price: $('#Price').val(),
Description: $('#Description').val(),
};
$.post(url, data, function (data) {
if (data == "true") {
alert("دیتای مورد نظر با موفقیت ارسال شد")
}
});
});
});

ali_autumnal
پنج شنبه 17 بهمن 1392, 11:00 صبح
پارامتر های اکشن با دیتای ارسال شده همخوانی ندارد!!


public ActionResult InvoiceDetail(int? id, InvoiceDetailVM InvoiceDetailVM)



var data = {
Subject: $('#Subject').val(),
Number: $('#Number').val(),
Price: $('#Price').val(),
Description: $('#Description').val(),
};


ابتدا پس از url کد زیر رو بنویسید ببینید url شما درست هست.
alert(url);

اگر url شما درست بود در اون صورت پارامترهای ارسالی صحیح نیستند. در غیر اینصورت در قسمت url آی دی رو هم باید بفرستید

var url = '@Url.Action("InvoiceDetail", "Invoice",new { id= هرمقداری})';

z.gitaro
پنج شنبه 17 بهمن 1392, 12:17 عصر
پارامتر ورودی اکشن رو درس کردم ولی نمیدونم چرا صفحه رفرش میشه!

ali_autumnal
پنج شنبه 17 بهمن 1392, 15:34 عصر
یعنی هنگام ارسال دیتا صفحه رفرش میشه؟
چون submit انتخاب کردید!
بجای این


<input id="btn" class="button" type="submit" value="افزودن"/>

این را بنویسید


<input id="btn" class="button" type="button" value="افزودن"/>

z.gitaro
جمعه 18 بهمن 1392, 01:04 صبح
اینکارو هم کردم بازم رفرش میشه
البته اینم بگم که تو ویو دوتا پپارشیال ویو هم رندر میشه

ali_autumnal
جمعه 18 بهمن 1392, 09:58 صبح
تو اکشن هم شما دارید یه View بازگشت میدید


return View(InvoiceDetailVM);


اینم اصلاح کنید

Cybersilent
جمعه 18 بهمن 1392, 19:38 عصر
لطفا این لینک رو بررسی کنید، فکر کنم جوابتون رو پیدا کنید.

ASP.NET MVC: Passing model from AJAX call into a Controller – The Easy Way!
http://transtatic.com/blog/2013/04/asp-net-mvc-passing-model-from-ajax-call-into-a-controller-the-easy-way/

z.gitaro
شنبه 19 بهمن 1392, 07:37 صبح
تو اکشن هم شما دارید یه View بازگشت میدید


return View(InvoiceDetailVM);


اینم اصلاح کنید

اونم درس کردم بازم رفرش میشه

hakim22
شنبه 19 بهمن 1392, 09:01 صبح
پیشنهاد میکنم به این مقاله مراجعه کنید
http://s3.picofile.com/file/7912974622/ASP_MVC_AJAX_1.rar.html
http://barnamenevis.org/showthread.php?416558-%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-Ajax-%D8%AF%D8%B1-ASP.MVC-%D8%B3%DB%8C%D8%B3%D8%AA%D9%85-%D8%AB%D8%A8%D8%AA-%D9%86%D8%B8%D8%B1%D8%AF%D9%87%DB%8C

دوم اینکه مطمئن بشید فایلهای جاوااسکریپت مربوط به ajax رو در این ویو Reference داده اید

z.gitaro
شنبه 19 بهمن 1392, 11:26 صبح
ممنون از همه دوستان
رفرش صفحه درس شد
ولی هربار که کلیک میکنم بجاب یه رکورد دوتا رکورد ثبت میشه!

ali_autumnal
شنبه 19 بهمن 1392, 12:23 عصر
شاید مشکل از ViewModel هم باشه! اگر از مدل های مشتق شده و همچنین از PartialView به صورت نادرست استفاده کرده باشید در این صورت امکان اینکه چند درخواست پشت سر هم به سرور ارسال بشه هست. ViewModel رو هم بزارید و همچنین کدهای مربوط به این View

z.gitaro
شنبه 19 بهمن 1392, 13:01 عصر
کدهای InvoiceDetail
@model BusinessManagement.ViewModel.InvoiceDetailVM

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="main">
<div style="margin:20px 100px 0 100px;width:600px;border:1px solid #989797">
@Html.Action(actionName: "Invoice", controllerName: "Invoice")

@using (Ajax.BeginForm("InvoiceDetail", "Invoice",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result"
}
))
{
<table class="tbl">
<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Subject)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Subject)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Subject)
</td>
</tr>

<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Number)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Number)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Number)
</td>
</tr>

<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Price)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Price)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Price)
</td>
</tr>


<tr>
<td class="td-validation">
@Html.ValidationMessageFor(model => model.Description)
</td>
<td class="td-text">
@Html.EditorFor(model => model.Description)
</td>
<td class="td-lable">
@Html.LabelFor(model => model.Description)
</td>
</tr>

<tr>
<td></td>
<td>
<input id="btn" type="submit" class="button" value="افزودن">
</td>
<td></td>
</tr>
</table>
}
<div id="result">
@Html.Action(actionName: "ListDetailInvoice", controllerName: "Invoice")
</div>

</div>
</div>


کدهای ویو مدل:

namespace BusinessManagement.ViewModel
{
public class InvoiceDetailVM
{
public int InvioceDetailID { get; set; }
public int InvoicesID { get; set; }

[Display(Name = "تعداد")]
[Required(ErrorMessage = "وارد کردن این فیلد الزامیست")]
public int Number { get; set; }

[Display(Name = "قیمت")]
[Required(ErrorMessage = "وارد کردن این فیلد الزامیست")]
[DataType(DataType.Currency)]
public decimal Price { get; set; }

[Display(Name = "ملاحظات")]
public string Description { get; set; }

[Display(Name = "شرح")]
public string Subject { get; set; }
}
}

کدهای کنترلر:
[HttpPost]
public ActionResult InvoiceDetail(InvoiceDetailVM InvoiceDetailVM)
{
using (var db = new BussinessManagmentEntities())
{
if (ModelState.IsValid)
{
Tbl_InvoiceDetail tblInvoiceDetail = new Tbl_InvoiceDetail();
InvoiceDetailVM.InvoicesID = lastinvoiceId;
Mapper.Map(InvoiceDetailVM, tblInvoiceDetail);
db.Tbl_InvoiceDetail.Add(tblInvoiceDetail);
db.SaveChanges();
TotalPrice1 += InvoiceDetailVM.Price;
}
return RedirectToAction("ListDetailInvoice", new { total = TotalPrice1 });
}
}

/************************************************** **************************************/
public ActionResult ListDetailInvoice(decimal? total)
{
using (var db = new BussinessManagmentEntities())
{
var detail = (from a in db.Tbl_InvoiceDetail
where lastinvoiceId == a.InvoicesID
select new InvoiceDetailVM
{
InvioceDetailID = a.InvioceDetailID,
Description = a.Description,
Subject = a.Subject,
Number = a.Number,
Price = a.Price
}).ToList();
return PartialView(viewName: "_ListDetailInvoice", model: detail);
}
}

hakim22
شنبه 19 بهمن 1392, 14:34 عصر
دلیلش استفاده از رفرنس مربوط به ajax در دو قسمت است. دقت کنید که وقتی از Scripts.Render استفاده میکنید برای Validation هم فایل unobtrusive.ajax بارگذاری میشود. بعدا وقتی دستی هم مسیر رو اضافه میکنید دوباره به Ajax رفرنس داده اید و چون این script با رویدادها کار میکند رویداد ارسال اطلاعات به سرور را دوبار پاسخ میدهد.

z.gitaro
دوشنبه 21 بهمن 1392, 10:53 صبح
دلیلش استفاده از رفرنس مربوط به ajax در دو قسمت است. دقت کنید که وقتی از Scripts.Render استفاده میکنید برای Validation هم فایل unobtrusive.ajax بارگذاری میشود. بعدا وقتی دستی هم مسیر رو اضافه میکنید دوباره به Ajax رفرنس داده اید و چون این script با رویدادها کار میکند رویداد ارسال اطلاعات به سرور را دوبار پاسخ میدهد.

حالا باید چکار کنم که این مشکل رفع شه؟

hakim22
دوشنبه 21 بهمن 1392, 13:53 عصر
روش 1 :
به مسیر BundleConfig.cs در فولدر App_start بروید و در به دنبال دستورات Bundle.Add بگردید که دارای نام jqueryval است. از لیست include مربوطه آن موردی که با Unobtrusive* تمام شده است حذف کنید.

روش 2 : در آدرس دهی به اسکریپت های مربوط به Validation از

Script.Render("~/bundles/jqueryval")
استفاده نکنید و دستی اسکریپتها را با تگ script به View اضافه کنید