Dynamic page in MVC

@model Nop.Admin.Models.Vendors.VendorFinancialsModel



　

<div class="section-header accounthead">

<div class="title marginbotnone">



Vendor Financials

</div>

</div>

@using (Html.BeginForm())



{

<div class="formDetails row">

<div class="formbox">

<div class="formNameInfo">Financials Information</div>

<div class="editInfo"><input type="button" id="btnEdit" name="save-continue" class="k-button" value="" /></div>



@Html.AntiForgeryToken()

</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 borderRight">

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.PaymentTermDays)

</div>



@Html.HiddenFor(m=>m.Id)

@Html.HiddenFor(m=>m.VendorId)

@Html.HiddenFor(m=>m.CreatedBy)

@Html.TextBoxFor(model => model.PaymentTermDays, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.PaymentTermDays, "", new { @class = "text-danger", id = "" })

</div>

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.YearToDateSales)

</div>

@Html.TextBoxFor(model => model.YearToDateSales, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.YearToDateSales, "", new { @class = "text-danger" })

</div>

</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 borderRight">

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.TaxId)

</div>

@Html.TextBoxFor(model => model.TaxId, new { maxlength = "9" })

@Html.ValidationMessageFor(model => model.TaxId, "", new { @class = "text-danger", name = "txid" })

</div>

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.LastYearSales)

</div>

@Html.TextBoxFor(model => model.LastYearSales, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.LastYearSales, "", new { @class = "text-danger" })

</div>

</div>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 borderRight">

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.CustomerNo)

</div>

@Html.TextBoxFor(model => model.CustomerNo, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.CustomerNo, "", new { @class = "text-danger" })

</div>

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.Rebate)

</div>

@Html.TextBoxFor(model => model.Rebate, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Rebate, "", new { @class = "text-danger" })

</div>

</div>

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.Notes)

</div>

@Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control" } })

@Html.ValidationMessageFor(model => model.Notes, "", new { @class = "text-danger" })

</div>

</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<div class="form-group">

<div class="labelWrap">



@Html.NopLabelFor(model => model.Discount)

</div>

<div class="pull-right addbtn">

<a class="k-button buttonEdit" id="addDiscount">Add Discount</a>

</div>

<div class="clearer"></div>

<div class="content" style="height:200px; overflow:auto">

<div>

<table id="tb" class="table table-striped table-bordered table-vcenter dataTable no-footer customTable">

<thead>

<tr>

<th>Discount</th>

<th>Terms</th>

<th width="50px">Action</th>

</tr>

</thead>

<tbody></tbody>

</table>

</div>

</div>

</div>

</div>

<div class="form-group" style="margin-top:40px">

<div class="col-md-offset-5 col-md-10">

<input type="button" id="btn" value="Create" class="btn btn-default" />

<input type="button" id="btnl" class="btn btn-default" value="Cancel" />

</div>

</div>

</div>



　

}

<script type="text/javascript">

$(function () {

$('#PaymentTermDays').prop('disabled', true);

$('#TaxId').prop('disabled', true);

$('#CustomerNo').prop('disabled', true);

$('#YearToDateSales').prop('disabled', true);

$('#LastYearSales').prop('disabled', true);

$('#Rebate').prop('disabled', true);

$('#Notes').prop('disabled', true);

$('#addDiscount').prop('disabled', true);

$('#tb').prop('disabled', true);

$('#btn').prop('disabled', true);

$('#btnl').prop('disabled', true);

$('#tb').append("<tr name='row1'><td><select name='ddl'></select><span class='mandatory' name='ddls'></span></td><td><input type='text' name='tbterm' maxlength='80' ></td><td><a name='del'><img src='/Administration/Content/images/delete-icon.png'></a></td></tr>");

$('#tb').find("a[name='del']").prop('disabled', true);

$('#tb').find("input[name='tbterm']").prop('disabled', true);

$('#btnEdit').click(function () {

$('#PaymentTermDays').prop('disabled', false);

$('#TaxId').prop('disabled', false);

$('#CustomerNo').prop('disabled', false);

$('#YearToDateSales').prop('disabled', true);

$('#LastYearSales').prop('disabled', true);

$('#Rebate').prop('disabled', false);

$('#Notes').prop('disabled', false);

$('#addDiscount').prop('disabled', false);

$('#tb').prop('disabled', false);

$('#btn').prop('disabled', false);

$('#btnl').prop('disabled', false);

$('#tb').find("a[name='del']").prop('disabled', false);

$('#tb').find("input[name='tbterm']").prop('disabled', false);



});

$('#tb tr').each(function (i, j) {

if (i > 0) {

$(j).find("select[name='ddl']").append("<option >Select</option>")

for (var k = 1; k < 101; k++) {

$(j).find("select[name='ddl']").append("<option value=" + k + ">" + k + "</option>")



}

}

});

$('#btnl').click(function () {



window.location.href = location.href;

});

var m = $("tr[name='row1']").clone();

$('#tb').on('click', "a[name='del']", function () {

if ($('#tb tr').length > 2)

$(this).closest("tr").remove();



});

$('#TaxId').blur(function () {



$.ajax({

cache: false,

type: "POST",

url: '../Vendor/checkid',

data: { id: $(this).val() },

success: function (data) {

if (data == 1)

$("span[name='txid']").text('TaxId already exist.');

else

$("span[name='txid']").text('');



}

});

});

$('#addDiscount').click(function () {

var v = m.clone();

$('#tb').append(v);

$('#tb').find("a[name='del']").prop('disabled', false);

$('#tb').find("input[name='tbterm']").prop('disabled', false);



});

if ($('#Id').val() != 0)



{

var data=@Html.Raw(Json.Encode(Model.lstvendorFinanceDiscountMapping));

for(var i=1;i<data.length;i++)



{

var v = m.clone();

$('#tb').append(v);



}

for(var i=0;i<data.length;i++)



{

var l=i+1;

$('#tb tr').each(function(j,k){

if(j==l)



{

$(k).find("select[name='ddl'] :selected").text(data[i].Discount);

$(k).find("input[name='tbterm']").val(data[i].Description)



j++;

}

});

}

}

$('#btn').click(function () {

var datasave = [];

var mk = 0;

$('#tb tr').each(function (i, j) {

if (i > 0) {

if ($(j).find("select[name='ddl'] :selected").val() == "Select") {

$(j).find("span[name='ddls']").text('Please select a discount');



mk = 1;

}

else {

$(j).find("span[name='ddls']").text('');

datasave.push({ Discount: $(j).find("select[name='ddl'] :selected").val(), Description: $(j).find("input[name='tbterm']").val() })



}

}

});

if($('#TaxId').val().length<9)



{

$("span[name='txid']").text('TaxId length must be 9.')



mk=1;

}

if (mk == 1)



{

mk = 0;

return false;



}

$.ajax({

cache: false,

type: "POST",

url: '../Vendor/Save',

data: {Id:$('#Id').val(), PaymentTermDays: ($('#PaymentTermDays').val() == "" ? 0 : $('#PaymentTermDays').val()), TaxId: ($('#TaxId').val() == "" ? 0 : $('#TaxId').val()), CustomerNo: ($('#CustomerNo').val() == "" ? 0 : $('#CustomerNo').val()), YearToDateSales: ($('#YearToDateSales').val() == "" ? 0 : $('#YearToDateSales').val()), LastYearSales: ($('#LastYearSales').val() == "" ? 0 : $('#LastYearSales').val()), Rebate: $('#Rebate').val(), Notes: $('#Notes').val(), VendorId: $('#VendorId').val(), CreatedBy: $('#CreatedBy').val(), lst: datasave },

success: function ()



{

window.location.href = location.href;

}

});

});

});

</script>