Add Layout dynamically in MVC c#

Question

I have Page with tabs . First tabs holds all patient information. Second tab I have a layout with one dropdown box and text box inserted by default (_layout1). I also have + sign button next to text box. What I expect is when user clicks on + button it should insert same layout again which means there will 2 text boxes & 2 dropdown boxes now. How can I achieve this functionality in MVC .netcore. Thanks !!

Answer 1

Here is an example how this could be done in javascript:

<div id="tab2">

    <h2>Tab 2</h2>

    Current New Row ID: <span id="currentNewRowId" style="color: red;">0</span>
    <br />
    Row ID To Be Deleted From Database:
    <input type="text" name="txtRowIdDelete" id="txtRowIdDelete" readonly /><br />
    <br />

    <button id="buttonAdd" onclick="addRow(); return false;">Add Row</button>
    *Negative ID = means new row (not existed in database)

    <br />
    <br />

    <div id='divRow1'>
        Row ID:
    <input type='text' name='input_1_id' readonly value='1' style='width: 40px;' />
        Name:
    <input type='text' name='input_1_name' value='Sam' />
        Gender: 
    <select name='input_1_gender'>
        <option value='1'>Male</option>
        <option value='2'>Female</option>
    </select>
        <button onclick='removeRow(1); return false;'>Remove</button>
    </div>

    <div id='divRow2'>
        Row ID:
    <input type='text' name='input_2_id' readonly value='2' style='width: 40px;' />
        Name:
    <input type='text' name='input_2_name' value='Foo' />
        Gender: 
    <select name='input_2_gender'>
        <option value='1'>Male</option>
        <option value='2' selected>Female</option>
    </select>
        <button onclick='removeRow(2); return false;'>Remove</button>
    </div>

    <div id='divRow3'>
        Row ID:
    <input type='text' name='input_3_id' readonly value='3' style='width: 40px;' />
        Name:
    <input type='text' name='input_3_name' value='Boo' />
        Gender: 
    <select name='input_3_gender'>
        <option value='1'>Male</option>
        <option value='3'>Female</option>
    </select>
        <button onclick='removeRow(3); return false;'>Remove</button>
    </div>

</div>

and the javascript:

var newId = 0;
var tab2 = document.querySelector("#tab2");

function addRow() {

    // obtaining new unique number
    newId--;

    let divRow = document.createElement("div");
    divRow.id = `divRow${newId}`;

    divRow.innerHTML = `

        Row ID:
        <input type='text' name='input_${newId}_id' readonly value='${newId}' style='width: 40px;' />
        Name:
        <input type='text' name='input_${newId}_name' />
        Gender: 
        <select name='input_${newId}_gender'>
            <option value='1'>Male</option>
            <option value='2'>Female</option>
        </select>
        <button onclick='removeRow(${newId}); return false;'>Remove</button>

    `;

    tab2.appendChild(divRow);

    document.getElementById("currentNewRowId").innerHTML = newId;
}

function removeRow(rid) {

    if (rid > 0) {
        const txtRowIdDelete = document.getElementById("txtRowIdDelete");
        if (txtRowIdDelete.value.length > 0)
            txtRowIdDelete.value += ",";
        txtRowIdDelete.value += rid + "";
    }

    document.getElementById(`divRow${rid}`).remove();
}