با سلام
من در View MVC تعداد 2 Textbox را دارم . می خواهم به دو روش (روش DataTable و روش WebGrid ) با فشردن دکمه اضافه کردن به گرید اطلاعات را از 2 text box خوانده و در Grid اضافه نمایم و با فشردن دکمه ارسال کلیه اطلاعات گرید به Action در تگ Form ارسال گردد و همچنین اطلاعات در Grid به Model ارسالی Bind شده باشد
لطفا برای پیاده سازی با این 2 گرید مخصوصا Datatable راهنمایی نمایید
در زیر کلیه کد های مربوطه را ارسال کردم
Dto =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
public class TempDto
{
public long CODE { get; set; }
public string TITLE { get; set; }
}
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
public class TempModel
{
public TempDto Temp { get; set; }
public IList<TempDto> TempList { get; set; }
public TempModel() { }
//public TEMPModel()
//{
// this.TEMPs = new List<TEMP>();
// //this.CODE = CODE;
// //this.TITLE = TITLE;
// //this.DatePickerModelView = new DatePickerModelView();
//}
public TempModel(List<TempDto> TEMPList)
{
this.TempList = TEMPList;
}
public TempModel(TempDto temp)
{
this.Temp= temp;
}
}
}
Controller =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
public virtual ActionResult Index()
{
List<TempDto> model = iTempService.GetListGeneric(null, null);
model = new TempModel(aa);
return View(model);
}
[HttpPost]
public virtual ActionResult Index(TempModel model)
{
return View();
}
View =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
@model Spec.Model.TempModel
@{
ViewBag.HeaderTitle = "فرم تستی";
}
<button id="btnGrid">اضافه کردن به گرید</button>
<form action="@Url.Action("Index", "Temp")" method="post" id="tempId">
@Html.TextBoxFor(x => x.Temp.CODE, new { id = "txtCode", Class = "form-control ", placeholder = "کد ", Style = "width:80%;" })
@Html.TextBoxFor(x => x.Temp.TITLE, new { id = "txtTitle", Class = "form-control ", placeholder = "عنوان", Style = "width:80%;" })
<table class="table table-striped table-bordered table-hover " id="myGrid">
<thead>
<tr>
<th>کد</th>
<th>عنوان</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.TempList)
{
<tr>
<td>@item.CODE</td>
<td>@item.TITLE</td>
</tr>
count++;
}
</tbody>
</table>
@if (Model.TempList != null && Model.TempList.Count() > 0)
{
var grid = new WebGrid(Model.TempList, canSort: true);
<div>
@grid.GetHtml(columns:
grid.Columns
(
grid.Column("CODE", "کد"),
grid.Column("TITLE", "عنوان")
), mode: WebGridPagerModes.Numeric)
</div>
}
<button id="btnPost" type="submit" class="btn btn-primary block btnstyle">ارسال</button>
</form>
<script type="text/javascript">
$(document).ready(function () {
var myTable = $('#myGrid').DataTable(
{
"columns": [
{ "data": "Column1" },
{ "data": "Column2" }
]
});
$('#btnGrid').on('click', function () {
myTable.rows.add([{
"Column1": $("#txtCode").val(),
"Column2": $("#txtTitle").val()
}]).draw(false);
});
});
</script>
