Home > DeveloperSection > Forums > How to a dynamic row in a table using Razor view in MVC4?
Samuel Fernandes
Samuel Fernandes

Total Post:154

Points:1082
Posted on    October-05-2013 2:33 AM

 ASP.NET MVC ASP.NET MVC 
Ratings:


 1 Reply(s)
 5154  View(s)
Rate this:

I have a table in the razor view and this table contain some Html controls like below:-

  <table style="text-align: center; width: 680px; background-color: White;" rules="all" id="tableId">
                <tr>
                    <td style="width: 20px;"></td>
                    <td>
                        <label>
                            Campaign Name</label>
                    </td>
                    <td>
                        <label>
                            Valid Date From</label>
                    </td>
                    <td>
                        <label>
                            Valid Date To</label>
                    </td>
                    <td>
                        <label>
                            Is Active</label>
                    </td>
                    <td>
                        <label>
                            ContractPDF</label>
                    </td>
                    <td>
                        <label>
                            Browse Contract</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.HiddenFor(m => m.Customer_ID)
                    </td>
                    <td class="trBorder">
                        @Html.TextBoxFor(m => m.Customer_Name)
                    </td>
                    <td class="trBorder">
                        @Html.TextBoxFor(m => m.ValidFrom, new { @class = "datepicker" })
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.ValidTo, new { @class = "datepicker" })
                    </td>
                    <td>
                        @Html.CheckBox("gridChkCampaignIsActive", m => m.IsActive)
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.ContractDocumentPath)
                    </td>
                    <td>
                        @Html.ActionLink("Browse", "FileUpload")
                    </td>
                </tr>
            </table>

Add Customer button

<input type="button" value="Add Customer" name="btnAddCustomer" id="btnAddCustomer" style="margin-left: 20px;"/>

My problem is that I want this table like a grid control and when I click on "Add Customer" button, a blank row will be added in the grid control.

please Help me!

Any Help Will be Appreciated



Dag Hammarskjold
Dag Hammarskjold

Total Post:24

Points:168
Posted on    October-05-2013 4:14 AM

First of all , you must add jquery library to your code :

$("#btnAddCustomer").click(function(){
    $("#tableId tr:last").after("<tr>...</tr><tr>...</tr>");
    });

Or you can use this:

$("#btnAddCustomer").click(function(){
$('#tableId').append('<tr><td>my data</td><td>more data</td></tr>');
});

 


Don't want to miss updates? Please click the below button!

Follow MindStick