如何在MVC中从textbox动态添加多行到webgrid [英] How to add multiple rows dynamically from textbox to webgrid in MVC

问题描述

亲爱的朋友们，



我设计了带文本框和网格的库存模块。我需要动态地将文本框中的项目添加到webgrid ..请帮帮我..



我尝试了什么：



查看：

Dear Friends,

I have designed inventory module with textbox and web grid. i need add items from textbox to webgrid dynamically.. Please help me..

What I have tried:

View:

新增

@if（Model！= null&& Model.Count> 0）

{

int j = 0;

foreach（模型中的var i）

{







j ++;

}

}

项目名称	项目费率代码	项目代码	Qty Requested
@ Html.TextBox（ItemName，null，new {id =ItemName，@ class =form-control，autocomplete =off}）	@ Html.TextBoxFor（a => a [j] .IRateCode，new {id =RateCode，@ class =form-control，autocomplete =off}）	@ Html.TextBoxFor（a => a [j ] .ItemCode，new {id =ItemCode，@ class =form-control，autocomplete =off}）	@ Html.TextBoxFor（a => a [j] .QtyRequested ，new {id =QtyRequested，@ class =form-control，autocomplete =off}）	@if（j> 0） {< br $> 删除 }

< script language =javascript>

$（document）.ready（function（）{



// 1.添加新行

$（＃addNew）。点击（功能（e）{

e .preventDefault（）;

var $ tableBody = $（＃dataTable ）;

var $ trLast = $ tableBody.find（tr：last）;

var $ trNew = $ trLast.clone（）;



var suffix = $ trNew.find（'：input：first'）。attr（'name'）。match（/ \d + /）;

$ trNew.find（td：last）。html（'删除'）;

$ .each（$ trNew.find（'：input'），function（i，val）{

//替换名称

var oldN = $（this）.attr（'name' ）;

var newN = oldN.replace（'['+ suffix +']'，'['+（parseInt（suffix）+ 1）+']'）;

$（this）.attr（'name'，newN）;

//替换值

var type = $（this）.attr（'type' ）;

if（type.toLowerCase（）==text）{

$（this）.attr（'value'，''）;

}



//如果您有其他类型，则替换为默认值

$（this）.removeClass（input-validation-错误）;



}）;

$ trLast.after（$ trNew）;



//重新分配验证

var form = $（form）

.removeData（validator）

.removeData（unobtrusiveValidation）;

$ .validator.unobtrusive.parse（form）;

}）;



// 2.删除

$（'a.remove'）。live（click，function（e）{

e.preventDefault （）;

$（this）.parent（）。parent（）。remove（）;

}）;



}）;

< / script>



@ *这一行用于多行插入temprary * @

@ System.Web.Optimization.Scripts.Render（〜/ bundles / jquery）

@if (Model != null && Model.Count > 0)
{
int j = 0;
foreach (var i in Model)
{



j++;
}
}

Item Name	Item Rate Code	Item Code	Qty Requested
@Html.TextBox("ItemName", null, new { id = "ItemName", @class = "form-control", autocomplete = "off" })	@Html.TextBoxFor(a => a[j].IRateCode, new { id = "RateCode", @class = "form-control", autocomplete = "off" })	@Html.TextBoxFor(a => a[j].ItemCode, new { id = "ItemCode", @class = "form-control", autocomplete = "off" })	@Html.TextBoxFor(a => a[j].QtyRequested, new { id = "QtyRequested", @class = "form-control", autocomplete = "off" })	@if (j > 0) { Remove }

<script language="javascript">
$(document).ready(function () {

//1. Add new row
$("#addNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#dataTable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();

var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$trNew.find("td:last").html('Remove');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name', newN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase() == "text") {
$(this).attr('value', '');
}

// If you have another Type then replace with default value
$(this).removeClass("input-validation-error");

});
$trLast.after($trNew);

// Re-assign Validation
var form = $("form")
.removeData("validator")
.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
});

// 2. Remove
$('a.remove').live("click", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});

});
</script>

@* This lines for multi line insert temprary*@
@System.Web.Optimization.Scripts.Render("~/bundles/jquery")

推荐答案

（document）.ready（function（）{



// 1添加新行

(document).ready(function () {

//1. Add new row

（＃addNew）。点击（功能（e）{

e.preventDefault（）;

var

("#addNew").click(function (e) {
e.preventDefault();
var

tableBody =

tableBody =

这篇关于如何在MVC中从textbox动态添加多行到webgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！